Jquery mobile: Disable “tap to toggle” fixed header and footer

Question

I disabled tap toggle in jquery mobile as follows.

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

Following the Q at Jquery mobile: Disable "tap to toggle" fixed header and footer

Now My content is clipped by header.Looking for a solution.

Answer 1

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

I've had luck with using the data-tap-toggle="false" tag in my headers, instead of disabling taptoggle altogether. While it might be some more work to add the data-tap-toggle="false", at least it works!

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

The documentation says this under the tap-toggle section: This option is also exposed 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 more 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 2

To change it programmatically you need to do this:

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

Tried it with jQuery Mobile 1.4.0