CODEWITHSUNDEEP
jquery-mobile
Joe
Joe

Reputation: 419

jQuery mobile panel between header and footer

jQuery mobile panel usually convers part of the page from top to bottom:

<div data-role="panel">...</div>

The demos page has left table of content panel that is limited between the header and the footer - not from top to bottom: http://demos.jquerymobile.com/1.4.3/intro/

How to limit the panel between the header and the footer? How is it done in CSS?

Upvotes: 1

Views: 669

Answers (1)

Omar
Omar

Reputation: 31732

You need first to calculate height of viewport, header and footer. Subtract height of both toolbars from viewport's height will give you the height of space between both toolbars. Also, push the panel down by overriding top style of the panel.

    /* active page */
var activePage = $.mobile.pageContainer.pagecontainer("getActivePage"),
    /* viewport */
    screen = $.mobile.getScreenHeight(),
    /* header - whether it's fixed */
    header = $(".ui-header", activePage).hasClass("ui-header-fixed") ? $(".ui-header", activePage).outerHeight() - 1 : $(".ui-header", activePage).outerHeight(),
    /* footer - whether it's fixed */
    footer = $(".ui-footer", activePage).hasClass("ui-footer-fixed") ? $(".ui-footer", activePage).outerHeight() - 1 : $(".ui-footer", activePage).outerHeight(),
    /* math 101 */
    panelheight = screen - header - footer;
/* update "min-height" and "top" */
$('#panelID').css({
    'top': header,
        'min-height': panelheight
});

Demo

Upvotes: 1

Related Questions