I am creating a new iphone apps using phonegap(cordova).I had one problem on my app.If i click anyone input field the iphone keyboard is popup and also whole page positon was changing. Like the fixed footer is popup above the keyboard.Please guide me.
Thank you
This is a difficult problem to get 'right'. You can try and hide the footer on input element focus, and show on blur, but that isn't always reliable on iOS. Every so often (one time in ten, say, on my iPhone 4S) the focus event seems to fail to fire (or maybe there is a race condition), and the footer does not get hidden.
After much trial and error, I came up with this interesting solution:
<head>
...various JS and CSS imports...
<script type="text/javascript">
document.write( '<style>#footer{visibility:hidden}#media(min-height:' + ($( window ).height() - 10) + 'px){#footer{visibility:visible}}</style>' );
</script>
</head>
Essentially: use JavaScript to determine the window height of the device, then dynamically create a CSS media query to hide the footer when the height of the window shrinks by 10 pixels. Because opening the keyboard resizes the browser display, this never fails on iOS. Because it's using the CSS engine rather than JavaScript, it's much faster and smoother too!
Note: I found using 'visibility:hidden' less glitchy than 'display:none' or 'position:static', but your mileage may vary.
Related
I've been given the task to try and fix an issue on this site:
[redacted]
When you tap below the bottom half of the screen on an iPhone 5, taps aren't registering and so links can't be clicked, etc.
I tried debugging by alerting what element is tapped, and nothing is registering below the halfway point. If you scroll down the page so the link you want to click is above the top half, it works perfectly fine.
I've searched around and there seems to be some issues with iPhone 5 apps (as far as I can tell, I'm not an app developer!) but I can't seem to find anyone having the same error on a responsive website.
What's going on - is it something to do with the viewport?
It looks like in your DOM you have an <iframe "id=FirebugUI"> that sits right below your element. It has some inline styles that include visibility:hidden; and a z-index of a super large number which means it's a hidden element that is on top of everything. You have some options:
1 - Get rid of it if you're familiar with what firebugUI is and can comfortably remove it all together. then you're good to go. It's probably being injected with some javascript.
2 - display none - you can add this css to remove it:
#FirebugUI {
display: none !important;
}
You'll need to add the important to the value so it overrides the inline styles. This may render the FirebugUI useless though.
3 - z index - you can update the z-index by setting it to like 0. But that will probably render this thing useless. so you might as well just remove this plugin if you're going to do that. You'll also need to use the !important value to override the inline styles.
I also have this issue. I am using Ubuntu and just completed the Hello world tutorial. I wrote some more text and I am unable to scroll. I can see where the words keep going but nothing I have tried lets it scroll. I have not made any HTML/CSS edits. I have only added more text to the <p> tag.
There is some default CSS applied for chrome packaged apps. Putting the following in your CSS should re-enable scrolling:
html {
overflow-y:scroll;
}
Someone is putting together a cool guide which might have some more tips. See https://gist.github.com/maicki/7622137#scrolling
Chrome apps have a default stylesheet applied to them, to help the web "page" be more of an "app" by default.
For Chrome Apps on Mobile, we also include this (well, a nearly identical) default stylesheet.
So that is the reason for that behavior. Scrolling is absolutely useful in very many contexts, and is absolutely supported in any DOM element by adding overflow-y: auto;.
It was simply deemed to be the wrong default for packaged apps which live inside a dedicated window of set bounds and where we encourage not having full page content overflow (very much the opposite of the web). Most apps usually surround a main scrolling element with fixed navigational elements (but not always).
FYI, there is also another open issue for Chrome Apps on Mobile to replicate yet more of the Chrome for Desktop default styles.
I have a problem with overflow:hidden on a touch device.
Basically I have my html and body on overflow:hidden. With a contact form outside(bottom) of the window. On clicking a button this form will animate in. This is so far working great on desktop browsers.
But on touch devices, I seem to be able to scroll down and view the form. I can't seem to find solutions after much googling. Is there anyway to force overflow:hidden on touch devices?
Any help much appreciated!
Use display:none
display: none removes the element from the page, and the flow of the page acts as if it's not there at all.
The overflow property specifies what to do if the content of an element exceeds the size of the element's box.
Ok, so I'm using the suggested window-scrollTo method and it's working just swimmingly everywhere except for one little sticking point.
When Safari decides to show the "Reader" button figuring I might want to save my page for later reading, it keeps the address bar up for a full 5 seconds before finally hiding it like I asked. Kind of an eternity in UX time.
Is this an iOS 6 thing or did it also do this in iOS 5? (I don't have a 5 device to test it on at the moment.) Also, is there any way to get around it?
I've looked around quite a bit and there doesn't appear to be any way to disable the reader button. The only possible solution I found was to make your site less "readable" so Safari doesn't add the reader button. Exactly what makes a site "readable" is pretty murky.
Here's some research on what makes something "readable": http://mathiasbynens.be/notes/safari-reader
Here's a method to make it less readable by putting your content in CSS: http://askmike.org/2012/12/a-hacky-way-to-remove-the-reader-button-in-ios-safari/
The bottom line seems to be that there is no solution. Hopefully Apple will add a meta tag to disable it or at least let us hide the address bar faster.
Here is what worked for me:
I placed all content inside an ol tag.
<ol style = "padding:0;margin:0">
my content
</ol>
From what I read elsewhere, the reader is partly triggered by the number of words on a page, but does not count words inside an ol.
You can disable the reader button by hiding the content that triggers it.
And then displaying that content 1s after the page loads.
For instance, hide all your <p> elements if they are triggering the reader button.
One of my designers sliced up a PSD & for some reason the page isn't rendering on iPhones or iPads. The div that contains a feedback link is the only thing that is visible. I've spent some time on the issue, but can't seem to find the issue. Have a look here: http://bit.ly/jNcJ47
I get the same problem in Safari on my Mac. I messed around with the Web Inspector for a few minutes and found out that when I disable the sidebar1 element's height: attribute, the content appears.
that's because the width occupied by the sidebar1 div is making the rest drop to the bottom! and since your container div has the overflow hidden, it doesn't even show the other floatted divs that dropped.
I advise positioning that div absolutelly and you're done.