Fix for Footer Shift in jQuery Mobile Toolbar

Mike BerrymanI was using the jQuery Mobile toolbar widget for iOS to create a tablet log-in page. I was using the “always show” feature of the jQuery toolbar in order to keep it locked in place on the screen (which makes the header and footer visible no matter where I scroll on the page).

keyboard1.jpg

When opening and closing the keyboard, the headers and footers kept shifting, but only in specific circumstances. When I closed the keyboard using the “close keyboard” or “Go” command, everything remained fine:

keyboard2.jpg keyboard1.jpg

However, when I tapped anywhere in the browser outside of the active field to close the keyboard, suddenly the footer thought the page was the size of the viewport when the keyboard was open and floated to that location instead of the bottom:

keyboard2.jpg keyboard3.jpg

Furthermore, creating additional pages in “always show” mode kept the footer at this middle-of-the-page location. Orientation change fixed the problem, but that was not an acceptable solution. The fix was a pain to figure out, but when I finally got to it, it ended up being quite simple:

$(document).on(“blur”, “input, textarea, select”, function () {

        setTimeout(function () {
            window.scrollTo(document.body.scrollLeft, document.body.scrollTop);
        }, 250);
    });
 

This snippet of javascript uses jQuery to attach an event on some elements that utilize the keyboard. The “blur” event is what happens when any of these elements lose focus – aka the user taps outside of the field to close the keyboard. It waits for a quarter of a second, then forces the browser to programmatically scroll to exactly where it already is. Truth be told, I’m not 100% sure why this works, but I believe it is because, by programmatically forcing the scroll, it’s forcing a screen repaint which, in turn, causes the browser to correctly position the footer at the true bottom of the screen when in “always show” mode.

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s