Menu
On my iPhone, I want the footer to be hidden when a text field is pushed and the keyboard appears. Right now it's just positioning itself above the keyboard and too little of the website is shown.
<div data-role="footer" data-id="foo1" data-position="fixed">
<div data-role="navbar">
<div data-role="controlgroup" data-type="vertical">
<ul><li><input data-iconpos="top" data-icon='plus' type="button" value="Tur" id='nyTur' /></li>
<li><input data-iconpos="top" data-icon='plus' type="button" value="48%" id='ny48' /></li>
<li><input data-iconpos="top" data-icon='plus' type="button" value="100%" id='ny100' /></li>
</ul>
</div>
</div><!-- /navbar -->
</div><!-- /footer -->
738
This works for me throughout my app...
//hide footer when input box is on focus
$(document).on('focus', 'input, textarea', function() {
$("div[data-role=footer]").hide();
});
//show footer when input is NOT on focus
$(document).on('blur', 'input, textarea', function() {
$("div[data-role=footer]").show();
});
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 with JQuery Mobile), 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.
9
Adding to Richard's answer, this handles both orientations on iPhone:
<script type="text/javascript">
var win = $(window),
height = win.height(),
width = win.width();
document.write([
"<style>",
".ui-footer-fixed { visibility: hidden; }",
"@media screen and (orientation: portrait) and (min-height: " + (Math.max(width, height) - 10) + "px)",
"{ .ui-footer-fixed { visibility: visible; } }",
"@media screen and (orientation: landscape) and (min-height: " + (Math.min(width, height) - 30) + "px)",
"{ .ui-footer-fixed { visibility: visible; } }",
"</style>"
].join(" "));
</script>
P.S. I was led to this topic by a hidden comment form this question.
EDIT: some braces were missing so this didn't have the desired effect when in landscape. Fixed now.
3
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
