When switching between form inputs on mobile safari, the cursor animates down and bounces in a strange way (whether you're using the arrow buttons, or simply clicking the form itself)
Here is a link to a video of the jumping in action
My guess is that it's the QuickType bar that's causing the screen to change the size of the keyboard... try adding this to your inputs.
<input autoCapitalize="off" autoComplete="off" autoCorrect="off" ... />
The soft keyboard changes the height of the screen, because when you enter the User ID the predictive fields are shown, conversely they are hidden when you enter the Password – because passwords have no suggestions.
You need to align the container of the login pane to the bottom, so when the size of the viewport changes, the container slides up – remaining aligned to the bottom – and there is no bounce effect.
In css something as:
.container{
position: absolute:
bottom: 0;
}
Related
I am looking for controlls that can use the icon attribute in order to display the sap-icon://accept. Till right now i have been using button in order to display icons, but as of right now, the border that does make an button, isn't fitting for the task, as such, i am looking for a new controll, that supports icon attribute as well as onPress/onClick Events.
<Button icon="sap-icon://accept"/> //displays the accept icon, however it does an border that makes an Button.
There is sap.ui.core.Icon class for displaying icons.
It also has press event you can use to click on that icon.
<core:Icon src="sap-icon://accept" color="#8875E7" press="handlePress" />
I'm trying to properly align the Facebook like button's comment popup. I'm using box count layout so that I can align all the Facebook/Twitter/Google+/Whatever buttons on the right side.
Here is my actual page layout. It looks like I want.
But once I click the Like button, the comment popup appears anchored from the left and is out of the window. Bummer.
What I want is simply have the popup anchored from the right instead of the left
I tried all versions of the button. IFRAME version does not show the comment box but can't be properly aligned. HTML5 and XFBML are properly aligned but they both show the popup out of the window.
I don't see any parameter in Facebook's documentation to adjust the alignment of the comment popup or to force the comment popup to be opened in a real browser popup. BTW, this can't be adjusted by CSS since the damn popup is inside a damn IFRAME, even when I'm using HTML5 and XFBML markup.
Is there a clean way to:
Anchor this popup to the right
Open the popup in an actual browser popup (window.open())
Hide the popup
Is there a way to achieve that? Google +1 button does the job perfectly without needing to add a lot of code.
Of course, the easy solution would be to move my buttons on the left side but it sucks.
Any help will be appreciated. Thanks :)
Try this
<center>
<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#xfbml=1">
</script><iframe src="//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2FID_HERE&layout=standard&show_faces=false&colorscheme=light&width=50&height=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:50px; height:30px;" allowtransparency="false"></iframe>
Replace ID_HERE with your page id
I have a very long html page with lots of editable elements. When click on a element, an edit dialog for it will pop up. The strange thing is if the element is at the top of the page, its edit dialog can be accessed successfully while the bottom and some middle positon elements' edit dialog cann't be accessed. the error prints out is: "Element is not currently visible and so may not be interacted with". Some checks on the failed edit dialog is:
p dialog.exist? ==>got true
p dialog.visible? ==>got false
puts dialog.attribute_value('style') ==>got ""
(firebug shows the style attribute value is 'display: block;' and the checks on success dialog of top element has exactly the same value, visible is 'false' too !!! so weired!! why it can be accessed?)
Then I tried:
browser.execute_script("document.getElementById('dialogDiv').style.display='block'; ")
to set the dialog style attribute value to 'display: block;' wish it become visiable, but failed.
On this long page, when the edit dialog of element pops up, there isn't scroll bar. So there is a chance that part of the dialog of bottom element is covered up. Is this a reason?
so I tried:
bottom_element.wd.location_once_scrolled_into_view
to scroll to the bottom element before click it, when the dialog pops up, all part of the dialog showed but still fail to access.
last trying:
after the edit dialog opend, use javacript to scroll
browser.execute_script("window.scrollBy(0,-100)")
the dialog is in middle of the browser window and isn't coverd up by anything, but still got
Element is not currently visible and so may not be interacted with
When i moved to a similar long page but has scroll bar after dialog poped up, the dialog of bottom element can be accessed successfully. Dose anyone has any idea about this? Please share with me, Thank advance.
the html is:
<div id="dialogDiv" style="display: block;">
<div class="sage_dialog ui-draggable" style="top: 322px; display: block; margin-bottom: 1000px; left: 542px;">
the location and size of the dialog are:
<struct Selenium::WebDriver::Point x=0, y=1576>
<struct Selenium::WebDriver::Dimension width=800, height=0>
I got a clue from How to force Selenium WebDriver to click on element which is not currently visible?
height=0 is a problem, how can i change it?
After consulting the html designer, I got the key of the probelm, the body html is:
<body class="float_guide_parent" style="width: 800px; overflow: hidden; cursor: auto;">
The value of overflow is 'hidden', It blocks showing of scroll bar, so i modified it by:
browser.execute_script("$('.float_guide_parent').css('overflow',''); ")
Problem soveled.
I am building a site that has a header with a fixed position which contains a select menu. The header is supposed to stay locked to the top of the screen due to the position:fixed in css. However, when clicking the select menu in mobile safari on iphone, the header no longer stays locked to the top when the ios select menu opens. It seems that ios is centering the div with the select menu onto the visible area of the screen above the menu. This doesn't happen when the page is scrolled to the top, but when the address bar is not visible, it "breaks" like so. Haven't found any other answers, maybe I'm asking the question the wrong way. I can't post links to code yet, any help is appreciated.
http://selfconstruc.tv/menu-open.PNG
http://selfconstruc.tv/menu-closed.PNG
For now I don't think there is a perfect solution to deal with the focus jumping.
In my case I hide the header on focus in and show again in focus out and it works well.
I don't know if in your case this could be a workaround.
You can try this:
// detect ios device
if(navigator.userAgent.match(/(iPad|iPhone|iPod)/gi)){
// hide header on focus in and show on focus out
jQuery("#content").focusin(function(){
jQuery('#your-header-id').hide();
})
jQuery("#content").focusout(function(){
jQuery('your-header-id').show();
})
}
The #content is a div where you should have all your controls, the jQuery .focusin() detects the focus event on parent elements, so every control will trigger the focus event. You hide the header on focus and show after that. Hope this helps!
There's an issue when accessing my website (http://www.zero11arquitetura.com.br) on iPad or iPhone with iOS 5 that I can´t fix. When window is scrolled thru code every position:fixed elements click event stop working. Can you please help me ?
This site structure uses a top menu div and a header div with position: fixed css. When user clicks on a menu item window scrolls horizontally until it reaches its target.
Clicking in the menu item is done by jQuery click method on each img tag and scrolling is done by jQuery animate method ($("html:not(:animated),body").animate({ scrollLeft: varDestino }, 1500);)
When page is loaded the menu works just as I intended but, after it scrolls thru menu, and I try to click on another menu item nothing happens. The strangest thing is that everything works again when user manually scrolls the window (by finger).
It looks like that by changing window scroll position by code (jQuery calls window.scroll) fixed elements lost its clickable position references.
Is there any workaround for this ?
Thanks,
I've solved this with a trick. I've created invisible divs over the menu items that changes it's position when page scrolls (simulating afixed element over the real position: fixed menu items). When user clicks or hover over those invisble divs the real ones are called