How to fix jQuery Mobile's fixed footer?
footer, iphone, javascript, jquery, mobile
Solution
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
Problem
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?