How to fix jQuery Mobile's fixed footer?

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?

Roi

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

Simon Vane

This is fixed in jQueryMobile 1.1 rc1. See here.

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

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

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.

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

I did very simple thing.Found solution with CSS just set proper "min-height" for the content.The will stop footer jumping on the content of the page.

I've had similar issue with the footer not being fixed on scroll either. My suggestion? Sencha and not jQueryMobile, its loaded with bugs and not ready for production.

The footer also highlights the selected page from URL /#page thing url affects the footer menu in my case.

Ary Wibowo

i use jquery mobile 1.3.1, and all that you said earlier doesn't work on my app. but i've a solution for this bug. check my other post JQueryMobile - fixed footer not fixed after input focus

$('div:jqmData(role="page")').on('pageinit',function(){
    $(document)
        .on('focus','input, select, textarea', function(){
            $('[data-role="footer"][data-position="fixed"]').hide();
        })
        .on('blur','input, select, textarea',function(){
            $('[data-role="footer"][data-position="fixed"]').show();
        });
});

Re: Footer isn't fixed, and hides some of the page content.

I struggled with this problem, too. Turned out that I had to move the ending content div tag to be BEFORE the start of the Footer. If the footer is inside the content div tag - and you turn on >>> data-position="fixed" <<<, then my footer isn't fixed.

I don't know about your other problem, "Footer toggles on a null click event" as I don't know how to re-create that in my app.

USING...