CODEWITHSUNDEEP
jquerycssmobilejquery-mobile
Adam Gent
Adam Gent

Reputation: 49085

JQuery mobile bottom navbar aka sticky footer

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/

Upvotes: 0

Views: 10662

Answers (3)

ArcadeRenegade
ArcadeRenegade

Reputation: 893

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

Upvotes: 0

Sal B
Sal B

Reputation: 540

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>

Upvotes: 1

sbounmy
sbounmy

Reputation: 11

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

Upvotes: 1

Related Questions