CODEWITHSUNDEEP
jqueryjquery-mobilepositionfixed
Chris
Chris

Reputation: 261

True persistent footers/headers in jquerymobile

I've got persistent footers/headers in a jqm app I'm working on. They work pretty much as expected, except when you tapping in the "white space" anywhere inside the [data-role="content"], the header and footer scroll out of view. Tapping in the content where there are no links or buttons again slides the header and footer back into place.

Here is a prototype of the app I'm working on:

It's appropriate for pages where there is a long column of text. You get more screen real estate for reading the content. That's nice if it's what you expect.

But when you have a map page, it gets clunky - new users may see this as bug -- especially if they can't figure out how to get off the map page or another page with content.

Also when you're viewing a page with content that's shorter than the page length on a desktop, the footer actually climbs up into the page.

That's not what I expect.

How can I make data-position="fixed" really work the way I expect it to? enter image description here

Upvotes: 1

Views: 98

Answers (1)

ezanker
ezanker

Reputation: 24738

Try applying the data-tap-toggle="false" attribute to your header and footer, or in javascript:

$( ".selector" ).fixedtoolbar({ tapToggle: false });

Here is the API documentation: http://api.jquerymobile.com/fixedtoolbar/#option-tapToggle

Upvotes: 1

Related Questions