18

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?

Tomer Lichtash
  • 9,002
  • 16
  • 55
  • 71

9 Answers9

25

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
fzzylogic
  • 2,183
  • 1
  • 19
  • 25
Roi
  • 1,597
  • 16
  • 19
  • Thanks. This was posted on May 2011; guess things have changed in the meanwhile. – Tomer Lichtash Jan 25 '12 at 11:48
  • 1
    Could you link to the bit of documentation that describes that? It doesn't seem to work (the bar still fades and reappears). Besides, there may be more interesting information for others coming across this SO post. –  Feb 27 '12 at 02:07
  • 3
    As of today when I checked touchOverflowEnabled is no longer supported. You can see the official note using the documentation link above. – Luis Perez May 17 '12 at 18:40
14

This is fixed in jQueryMobile 1.1 rc1. See here.

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

swiftBoy
  • 35,607
  • 26
  • 136
  • 135
Simon Vane
  • 1,914
  • 3
  • 19
  • 23
2

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

neavilag
  • 609
  • 1
  • 8
  • 20
  • 2
    Working as desired?... Header and footer disappear on scroll (sometimes) then catch up and fade in. There seems to be no way (other than hacking of course) to create an iScroll like, really, truly fixed footer. This is not a scheduled feature for Beta either. Consider Wink or iScroll for a truly fixed header or footer. – genkilabs Apr 13 '11 at 22:54
  • 1
    Well, it is working as designed. It's just not a very popular design decision. See some solutions here http://stackoverflow.com/questions/5763619/jquery-mobile-fixed-toolbar-and-footer-bar-disappears – Eli Jun 07 '11 at 14:25
  • I would like to add that having the same data-id="foo" on my footer div included fixed my issue of the footer bar changing to inline positioning on a button press event. http://jquerymobile.com/demos/1.0rc2/docs/toolbars/footer-persist-a.html – kg. Nov 01 '11 at 19:22
2

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.

MGG
  • 21
  • 2
1

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.

Nikhil Patil
  • 11
  • 1
1

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

greencustard
  • 249
  • 1
  • 3
0

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();
        });
});
Community
  • 1
  • 1
Ary Wibowo
  • 529
  • 4
  • 10
0

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.

Alon Carmel
  • 660
  • 1
  • 6
  • 16
  • Sencha looks really good, thanks. I can't remember what it was, but I've heard there're *some* issues with it. – Tomer Lichtash Dec 07 '10 at 14:11
  • Anyway, rebuilding the whole thing with Sencha will take some time. If there's even a hack to solve this issue for the meanwhile, it'll be better. Thanks! – Tomer Lichtash Dec 07 '10 at 14:12
  • 1
    Have you looked at this? https://github.com/jquery/jquery-mobile/issuesearch?state=open&q=footer#issue/58 its a possible fix for the footer not being fixed. its a known bug. – Alon Carmel Dec 08 '10 at 11:36
0

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.
Sandi Laufenberg-Deku
  • 572
  • 5
  • 14