True persistent footers/headers in jquerymobile

Chris Published at Dev

Chris

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

ezanker

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

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at2021-02-4

Comments

0 comments

From Dev

Related Related

Article

True persistent footers/headers in jquerymobile

True persistent footers/headers in jquerymobile

IOS ObjectContext not saving to persistent store despite returning True

Why do some consider 2nd-order (aka persistent) XSS to not be true XSS?

Popup/tooltip position in JQueryMobile

Phonegap jQueryMobile Theme on android

jQueryMobile ListView Text Wrap

JQueryMobile filtering a XMLhttprequest

jQueryMobile - Scroll to a position onLoad

Create jQueryMobile Spinbox Dynamically

jQueryMobile Tap to Stop Scrolling

Auto populate in jQueryMobile select

JqueryMobile - Device Orientation changes

Jquerymobile Slider range +

Customize jquerymobile button

jquerymobile 1.4.2 - Animate collapsible

Popup/tooltip position in JQueryMobile

jquerymobile - selectable list item

Prevent application of a class in jquerymobile

jQueryMobile Tap to Stop Scrolling

pagecontainer #change - JqueryMobile - Phonegap

Persistent memory

Persistent connections

Persistent iptables

Horizontal scrolling and vertical scrolling in JqueryMobile

css - display a flat button in jquerymobile

Jquerymobile Styling the dynamically created List

Date Changed Event for JQueryMobile datepicker

Select Value not Init in AngularJs and JQueryMobile

jquerymobile panel on swipe not closed properly

jqueryMobile change background color on swipe