How to fix jQuery Mobile's fixed footer?

Question

Using jQueryMobile, I've included data-role="footer" data-position="fixed" in the markup, but two bugs persist:

• Footer toggles on a null click event.
• Footer isn't fixed, and hides some of the page content.

I'm testing with iPhone 3g. Any ideas?

Thanks in advance.

UPDATE: It seems that the click event modifies the current page's footer, and changes ui-fixed-overlay to ui-fixed-inline, which of course is styled display:none to prevent the other pages' footers from appearing.

How can I prevent this modification?

Solution 1

If using 1.1 or later, add data-tap-toggle="false" to your header and footer, as documented here.

If you're using a version of jQuery Mobile prior to 1.1, place the following before loading jQuery Mobile:

$(document).bind("mobileinit", function(){
  $.mobile.touchOverflowEnabled = true;
}); // remove

Solution 2

This is fixed in jQueryMobile 1.1 rc1. See here.

Use data-tap-toggle="false" on your footer.

Solution 3

With jquery.mobile-1.0a4 adding the data-position="fixed" to the footer section is working as desired in Iphone, Android and Chrome

Solution 4

The current "answer" may be a bit misguided. Using touchOverflow may help you in the short-term, but that will soon be going away. If anyone were to read the jQuery mobile blog, they would notice this blurb posted on Jan. 10:

Heads up: touchOverflow to be deprecated in 1.1 – When we first introduced the touchOverflow feature, we saw it as a good way to leverage the native overflow support in iOS to bring true fixed toolbars and smoother transitions, even if it was for a fairly narrow set of devices at the time. Now with the significant changes to fixed headers and transition planned for 1.1, these will improve the experience in an almost identical way as touchOverflow, except it will work on a lot more platforms and with less complexity so we’ve decided to retire this feature. It will be deprecated at 1.1 and removed at 1.2. We do have future plans for addressing overflow regions with internal scrolling so a lot of the work we’ve done on touchOverflow will be re-purposed.

Apologies for posting this as an answer, but I am unable to comment at this point.

Solution 5

We had this problem and used a combination of iScroll (v3) and a nice jquery mobile wrapper for iScroll. It works perfectly. See all the details here:

http://yappo.github.com/projects/jquery.mobile.iscroll/livedemo.html

View more solutions