Override jQuery Mobile's default Addressbar hiding behavior

Override jQuery Mobile's default Addressbar hiding behavior

jQuery Mobile (jQM) by default hides the address bar in your mobile site. But sometimes you might not want that to happen automatically, as you may be using a App banner to promote your app.

In that case automatically hiding the address bar will hide the app banner as well, which is part of the address bar, undermining the purpose of its usage. As far as I looked around, there isn’t a way to stop this from jQM settings. So, I was pushed to do it in a hack, I didn’t want to change it in jQM source itself so had to workaround that

As for hiding the address bar jQM is using window.scrollTo in this method

    // Scroll page vertically: scroll to 0 to hide iOS address bar, or pass a Y value
        silentScroll: function( ypos ) {
            if ( $.type( ypos ) !== "number" ) {
                ypos = $.mobile.defaultHomeScroll;

            // prevent scrollstart and scrollstop events
            $.event.special.scrollstart.enabled = false;

            setTimeout( function() {
                window.scrollTo( 0, ypos );
                $.mobile.document.trigger( "silentscroll", { x: 0, y: ypos });
            }, 20 );

            setTimeout( function() {
                $.event.special.scrollstart.enabled = true;
            }, 150 );

to stop this I have overridden the default function

//Add this before jquery mobile script
window.scrollRef = window.scrollTo;
window.scrollTo = function(){return false;};

Add this before jquery mobile script it will stop the hiding behavior. As it doesn’t have access to the actual function of scrollTo.

So after jqM script is loaded you can restore the reference.

window.scrollTo = window.scrollRef

so that you can handle the address bar hiding functionality gracefully using h5mbp solution. In helper.js it uses a rather good approach to solve this problem in MBP.hideUrlBarOnLoad method.


Vetrichelvan Jeyapalpandy

12 years of experience in web development. Javascript enthusiast. Performance is an important trait of any website, so trying to improve that wherever possible.

View Comments
Next Post

ReactJS 101 - Basics

Previous Post

Underscore.js 101 - _.filter and _.contains