jquery mobile hide fixed footer when keyboard

jquery mobile keyboard hide footer

11,829

Solution 1

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.

Solution 2

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.

Solution 3

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();
});

Solution 4

Great approach. It fixed my problem for the most part. I improved on it by rewriting the CSS on orientation change.

<script type="text/javascript">
window.addEventListener("orientationchange", function() {
    // rewrite CSS when the user rotates the device                
    setFooterVisibility();
}, false);

$(document).ready(function(){
    // write CSS for the first time when the browser is ready
    setFooterVisibility();
});

function setFooterVisibility()
{
    var win     = $(window),
        height  = win.height(),
        width   = win.width();
    $('#styles').html("<style>#footer{visibility: hidden;}@media screen and (orientation: portrait) and (min-height: " + (Math.max(width, height) - 10) + "px){ #footer { visibility: visible; } }@media screen and (orientation: landscape) and (min-height: " + (Math.min(width, height) - 30) + "px){ #footer { visibility: visible; } }</style>");
}
</script>

<!-- put this line anywhere in the body -->
<div id='styles'></div>

Solution 5

A much better approach that I found was to detect when an input or textfield is focused only on iOS.

Try this JS:

if(/ipad|iphone|ipod/i.test(navigator.userAgent.toLowerCase()))
{
    $(document).on('focus', 'input, textarea', function() 
    {
        $(".ui-footer").hide();
    });

    $(document).on('blur', 'input, textarea', function() 
    {
        $(".ui-footer").show();
    });
}

View more solutions

11,829

Author by

user2996395

Updated on June 05, 2022

Comments

user2996395 about 2 years

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 -->

user2996395 over 10 years

It seem to be working fine in Safari on iPhone, but not with Chrome and not when the page has been added to the home screen as a link/app.
asgeo1 over 10 years

Great work! I don't think it will handle orientation changes, but I'm sure that can be easily accounted for.
Richard Kennard over 10 years

Orientation is a problem, yeah - but it fixes itself on a new page load/refresh. @user2996395 tested both Chrome on iOS (v31.0.1650.18) and home screen link/app: they work fine for me? I have noticed it can be hard to make iOS refresh its page cache at times. Perhaps you had an old version cached?
user2996395 over 10 years

This works perfectly if you dont change your view while using the site. Going from portrait to landscape, will make the footer disaper. I need to have the footer to show at all time, unless the keyboard is up... can you help?
Admin almost 9 years

hi neno your code works perfect for the virtual qwerty keypad when the number keyboard is up on orientation screen the footer is still visible need help on that
neno almost 9 years

Pauli, which device? I've tested this mostly on iPhone 5. Perhaps you could experiment with tweaking the constants in the (Math.max(width, height) - 10) expressions.
J-Alex over 5 years

Good answer should include some explanations.