CODEWITHSUNDEEP
jquery-mobile
MadNik
MadNik

Reputation: 7793

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

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.

Upvotes: 4

Views: 9279

Answers (6)

Maxim Lyubarets
Maxim Lyubarets

Reputation: 1

or just like this:

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

tested on jQuery Mobile 1.4.5

Upvotes: 0

Marvin Rabe
Marvin Rabe

Reputation: 4241

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

Upvotes: 2

Buzzwilder
Buzzwilder

Reputation: 39

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.

Upvotes: 1

MinneapolChris
MinneapolChris

Reputation: 203

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">

Upvotes: 7

Cory Tam
Cory Tam

Reputation: 106

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

Upvotes: 0

sleepwalker
sleepwalker

Reputation: 1032

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.

Upvotes: 0

Related Questions