4

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.

Community
  • 1
  • 1
MadNik
  • 7,713
  • 2
  • 37
  • 39

6 Answers6

7

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">
Krease
  • 15,805
  • 8
  • 54
  • 86
MinneapolChris
  • 203
  • 3
  • 7
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

Marvin Rabe
  • 4,141
  • 3
  • 25
  • 43
1

FYI
This is how it is done programatically with JQuery:

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

This will toggle from the default state set in the page container tag.

Buzzwilder
  • 39
  • 1
0

By default jquery mobile automatically counts page padding. So it seems that it's incorrect for your page, that's why content is under the header and it looks clipped.

You can disable auto update of page padding by JQM and set it by your own. Look at updatePagePadding property here: http://jquerymobile.com/test/docs/toolbars/bars-fixed-options.html

Also it's needed to make a fix, described here: https://github.com/jquery/jquery-mobile/issues/4223

Regards.

sleepwalker
  • 1,032
  • 1
  • 9
  • 15
0

If you call it on individual pages, this wont happen.

E.g

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

Using 1.2.0 JQM

Cory Tam
  • 106
  • 5
0

or just like this:

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

tested on jQuery Mobile 1.4.5

Maxim Lyubarets
  • 1