JQuery mobile: disable fixed header and footer "tap to togle"

Question

I disabled the toggle switch in jquery mobile as follows.

$(function(){ $('[data-role=header],[data-role=footer]').fixedtoolbar({ tapToggle:false }); });

After Q in jQuery mobile: disable "tap to toggle" fixed header and footer

Now my content is trimmed by header.Looking for the solution.

Answer 1

By default, jquery mobile automatically calculates page fill. So it seems like this is not true for your page, so the content is under the heading and looks cropped.

You can disable the automatic refresh of the JQM page fill and install it yourself. Take a look at the updatePagePadding property here: http://jquerymobile.com/test/docs/toolbars/bars-fixed-options.html

You also need to make the fix described here: https://github.com/jquery/jquery-mobile/issues/4223

Sincerely.

Answer 2

I ran into the same problem you encountered when I tried to programmatically disable taptoggle using fixedtoolbar ({tapToggle: false});

I got lucky using the data-tap-toggle = "false" tag in my headers instead of completely disabling taptoggle. Although it might take another job adding data-tap-toggle = "false", at least it works!

I found this question, trying to figure it out myself, and decided to try it. I found the information here: http://jquerymobile.com/test/docs/toolbars/bars-fixed-options.html

The documentation says this in the switch section: this option also appears as a data attribute: data-tap-toggle = "true". I decided to set it to false and it solved my problem. No more taptouch and no longer overlapping! Most of my headers now look something like this:

 <div data-role="header" data-id="jqmheader" data-position="fixed" data-tap-toggle="false"> 

Answer 3

To change it programmatically, you need to do the following:

 $.mobile.toolbar.prototype.options.updatePagePadding = false; $.mobile.toolbar.prototype.options.hideDuringFocus = ""; $.mobile.toolbar.prototype.options.tapToggle = false; 

Tried it using jQuery Mobile 1.4.0

Answer 4

Fyi

Here's how to do it programmatically using jQuery:

 $("[data-role=header], [data-role=footer]").fixedtoolbar({ tapToggle: true }); 

This will switch from the default state in the page container tag.

Answer 5

If you call it on separate pages, this will not happen.

eg

$ ("# pageA, #pageB, #pageC"). bind ('pageinit', function () {$ (this) .find ("[data-role = header], [data-role = footer]"). fixedtoolbar ({tapToggle: false});});

Using 1.2.0 JQM

Answer 6

or just like that:

 <div data-role="page" ... data-hide-during-focus="" ... >...</div> 

tested on jQuery Mobile 1.4.5