jquery mobile static footer navbar

Question

Found this answer In Jquery mobile, Header and footers are always hiding, when clicking inside the page?

The only difference that I have is I do NOT have data-fullscreen="true" but have a data-cache="never".

footer bar keeps fading in and out. Just want footer navbar to be on bottom of screen without fades.

<div data-role="page" data-cache="never" id="mainPage">
<script>
$('#mainPage').live('pagecreate', function (event) {

    $.fixedToolbars.setTouchToggleEnabled(false);

});
</script>
....header stuff
<div data-role="content" id="mainContent">
....
</div>
<div data-role="footer" data-theme="a" data-position="fixed">
  <div data-role="navbar">
    <ul>
      ... 4 li's
    </ul>
  </div>
</div>
</div>

EDIT

Here we go. How is this done? http://jquerymobile.com/test/experiments/scrollview/#../../docs/toolbars/footer-persist-a.html

Header loads immediately but not footer. Would like for my footer to act like the header of that page.

http://stackoverflow.com/questions/6927504/jquery-mobile-bottom-navbar-aka-sticky-footer Yeah I can't figure this out either. Its really annoying. — Adam Gent, Aug 07 '11 at 13:44

Simon Vane · Accepted Answer · 2012-03-14T11:25:40.050

10

This is fixed in jQueryMobile 1.1 rc1. See this link

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

edited Mar 14 '12 at 11:25

answered Mar 06 '12 at 10:38

Simon Vane

1,914
3
19
23

score 0 · Answer 2 · answered Aug 07 '11 at 15:50

0

It should work.
There's just one problems when you're scrolling a list: the navbar disappears but it reappers as soon as you stop scrolling. You can see a fiddle here.

answered Aug 07 '11 at 15:50

LeftyX

35,328
21
132
193

Yes, the footer does stick "actually better" with it, but looking for more native feel where fades in / out DO NOT happen. – pcasa Aug 07 '11 at 16:36

score 0 · Answer 3 · answered Jan 11 '12 at 14:22

        $(document).bind("mobileinit", function() {
             $.support.touchOverflow = true;

              $.mobile.touchOverflowEnabled = true;
              $.mobile.fixedToolbars.setTouchToggleEnabled(false);

        });

This works. Tested in Android 2.3

jquery mobile static footer navbar

EDIT

3 Answers3

Linked