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?

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?

• javascript
• jquery
• jquery-mobile

2 Answers 2

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 remended over .live() so do this:

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

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.