CODEWITHSUNDEEP
javascriptiphonejquerymobilefooter
Tomer Lichtash
Tomer Lichtash

Reputation: 9262

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:

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?

Upvotes: 18

Views: 41012

Answers (9)

Sandi Laufenberg-Deku
Sandi Laufenberg-Deku

Reputation: 582

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...

  • JQuery Mobile 1.3.2
  • Cordova
  • The footer has a navbar and an advertising banner inside it.

Upvotes: 0

Roi
Roi

Reputation: 1647

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

Upvotes: 25

Ary Wibowo
Ary Wibowo

Reputation: 539

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();
        });
});

Upvotes: 0

Simon Vane
Simon Vane

Reputation: 2014

This is fixed in jQueryMobile 1.1 rc1. See here.

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

Upvotes: 14

Nikhil Patil
Nikhil Patil

Reputation: 11

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.

Upvotes: 1

MGG
MGG

Reputation: 21

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.

Upvotes: 2

greencustard
greencustard

Reputation: 249

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

Upvotes: 1

neavilag
neavilag

Reputation: 609

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

Upvotes: 2

Alon Carmel
Alon Carmel

Reputation: 710

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.

Upvotes: 0

Related Questions