How to fix jQuery Mobile's fixed footer?

javascript iphone jquery mobile footer
Tomer Lichtash picture Tomer Lichtash · Dec 7, 2010 · Viewed 40.7k times · Source

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?

Answer

Roi picture Roi · Jan 25, 2012

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

Related questions

How to check browser for touchstart support using JS/jQuery?

In an attempt to follow best practices, we're trying to use the proper JavaScript/jQuery events according to what device you are using. For example, we're building a mobile site that has an tag that will have an onclick or …

Read More
iphone/ipad triggering unexpected resize events

I'm working on a mobile version of my site. I'm using media queries and CSS as much as possible, but I'm also using some javascript to, for example, turn my navigation into a collapse/expand list on smaller devices to …

Read More
$(document).click() not working correctly on iPhone. jquery

This function works perfectly on IE, Firefox and Chrome but when on the iPhone, it will only work when clicking on a <img>. Clicking on the page (anywhere but on a img) wont fire the event. $(document).ready(…

Read More