Why does my jQuery Mobile footer appear and then disappear when a user clicks the background?

Question

I have a footer in my jQuery Mobile website.

<div data-role="footer" data-position="fixed">
    <div data-role="navbar">
        <ul>
            <li><a href="/page1">Page 1</a></li>
            <li><a href="/logout">Logout</a></li>
        </ul>
    </div>
</div>

In Google Chrome, when a user clicks on the background, the footer disappears. When the user clicks on the background again, the footer appears. Why? Is this an intentional feature?

Answer 1

By default this is enabled. Here is some code to disable it in JQM v 1.1-RC1

$(document).on('pageinit','[data-role=page]', function(){
    $('[data-position=fixed]').fixedtoolbar({ tapToggle:false});
});

I like to bind it to the taphold event. It makes more sense to me. Here is how to do that:

$(document).on('taphold', '[data-role=page]', function(){
    $('[data-position=fixed]').fixedtoolbar('toggle');
});

If your using JQM v 1.0.1 then you can't use the .on() method. The on method is new as of jquery 1.7. Using .delegate() is recommended over .live() so do this:

$(document).delegate('[data-role=page]','pageinit', function(){
    $.mobile.fixedToolbars.setTouchToggleEnabled(false);
});

Answer 2

The simple solution is to add the following attribute to your header:

data-tap-toggle="false"

...and the framework will take care of it for you.

See the Toolbar Widget's tapToggle option for more information.