0

JQuery Mobile offers two choices for sticky footer navbars. "Inline" which will just put in the page where ever its declared and "Fixed" which will kind of make it sticky if you don't scroll. Once you scroll it disappears. I have found this behavior to be very flaky.

Apparently the Khan academy has figured it out but for some reason I can't actually visit their mobile site with openapp mkt: http://www.jqmgallery.com/2011/03/07/khan-academy/

I know others have asked this but jQuery Mobile is now different: jQuery Mobile: Stick footer to bottom of page

Later I might just try messing with layout CSS (which I have tried to avoid so as not to break jquery mobile) http://ryanfait.com/sticky-footer/

Community
  • 1
  • 1
Adam Gent
  • 47,843
  • 23
  • 153
  • 203
  • This looks promising: https://github.com/neave/touch-scroll – Adam Gent Aug 07 '11 at 15:07
  • You can take a look at this answer here: http://stackoverflow.com/questions/6861764/jquery-mobile-stick-footer-to-bottom-of-page/7885385#7885385 – Philip Feb 24 '12 at 06:22
  • As far as I can understand you do not want footer/navbar to disappear, right? I've answered a similar [question](http://stackoverflow.com/questions/6925246/in-jquery-mobile-header-and-footers-are-always-hiding-when-clicking-inside-the) yesterday. Hope it helps. – LeftyX Aug 04 '11 at 12:09
  • your a champion of life. I was going to do it the CSS way but this looks like the jQuery Mobile way to do it. Just what I wanted! – Adam Gent Aug 04 '11 at 12:39
  • Ahh crap I thought this worked. I thought it did but it appears the header and footer still disappear when I scroll. I don't know why JQM thought that was a good default behavior. See also http://stackoverflow.com/questions/6962961/jquery-mobile-static-footer-navbar – Adam Gent Aug 07 '11 at 13:44
  • @Adam Gent: Well, it doesn't bother me until it comes back when I've finished to scroll. – LeftyX Aug 07 '11 at 15:12

3 Answers3

1

http://jquerymobile.com/demos/1.2.0/docs/toolbars/bars-fixed.html

In browsers that support CSS position: fixed (most desktop browsers, iOS5+, Android 2.2+, BlackBerry 6, and others), toolbars that use the "fixedtoolbar" plugin will be fixed to the top or bottom of the viewport, while the page content scrolls freely in between. In browsers that don't support fixed positioning, the toolbars will remain positioned in flow, at the top or bottom of the page.

To enable this behavior on a header or footer, add the data-position="fixed" attribute to a jQuery Mobile header or footer element.

Fixed header markup example:

<div data-role="header" data-position="fixed">
    <h1>Fixed Header!</h1>
</div>

Fixed footer markup example:

<div data-role="footer" data-position="fixed">
    <h1>Fixed Footer!</h1>
</div>
Sal B
  • 540
  • 1
  • 5
  • 20
1

for IOS5 device this is working : http://jquerymobile.com/test/docs/config/touchOverflow.html with this fix : https://github.com/jquery/jquery-mobile/pull/3165

sbounmy
  • 11
  • 1
0

This isn't a fixed position footer. The footer will be offscreen if the page content is taller than the screen. I think it looks better this way.

The body and .ui-page min-height and height are necessary to prevent the footer from jumping up and down during transitions.

Works with the latest JQM version as of now, 1.4.0

body,
.ui-page {
    min-height:100% !important;
    height:auto !important;
}

.ui-content {
    margin-bottom:42px; /* HEIGHT OF YOUR FOOTER */
}

.ui-footer {
    position:absolute !important;
    width:100%;
    bottom:0;
}
ArcadeRenegade
  • 804
  • 9
  • 14