Persistent header in jQuery Mobile

Question

Couldn\'t figure out a way to put a bounty on my old question, so I\'m reposting it because maybe it was a bug.

Short version: I want a persistent header in a PhoneG

Answer 1

Check this example, under Making footers and headers persistent.

Answer 2

I've been banging my head against this problem for several days, and for once Google was no help. I finally came up with the following solution. It copies the header HTML onto a new page before the transition begins, then removes the code from the previous page once the transition completes. The header and footer will still move with the page transition, but they will persist even while navigating nested lists.

// dynamically move the header and footer between pages on load events
$('div.ui-page').live('pagebeforeshow', function(event, ui) {
    // avoid duplicating the header on the first page load
    if (ui.prevPage.length == 0) return;

    // remove the jQuery Mobile-generated header
    $('.ui-header').addClass('to-remove-now');
    $('#header').removeClass('to-remove-now');
    $('.to-remove-now').remove();

    // grab the code from the current header and footer
    header = $('#header')[0].outerHTML;
    footer = $('#footer')[0].outerHTML;

    // mark the existing header and footer for deletion
    $('#header').addClass('to-remove');
    $('#footer').addClass('to-remove');

    // prepend the header and append the footer to the generated HTML
    event.currentTarget.innerHTML = header + event.currentTarget.innerHTML + footer;
});

// remove header from previous page 
$('div.ui-page').live('pagehide', function(event, ui) {
    $('.to-remove').remove();
});

Then just add id="header" to the header div and id="footer" to the footer, and place them as you normally would in your content.

Answer 3

I try to look into jquery mobile source , the magic of persistent footer happen here , i think.

$( document ).delegate( ".ui-page", "pagebeforeshow", function( event, ui ) {
            var page = $( event.target ),
                footer = page.find( ":jqmData(role='footer')" ),
                id = footer.data( "id" ),
                prevPage = ui.prevPage,
                prevFooter = prevPage && prevPage.find( ":jqmData(role='footer')" ),
                prevFooterMatches = prevFooter.length && prevFooter.jqmData( "id" ) === id;

            if ( id && prevFooterMatches ) {
                stickyFooter = footer;
                setTop( stickyFooter.removeClass( "fade in out" ).appendTo( $.mobile.pageContainer ) );
            }
        })
        .delegate( ".ui-page", "pageshow", function( event, ui ) {
            var $this = $( this );

            if ( stickyFooter && stickyFooter.length ) {
                setTimeout(function() {
                    setTop( stickyFooter.appendTo( $this ).addClass( "fade" ) );
                    stickyFooter = null;
                }, 500);
            }

            $.mobile.fixedToolbars.show( true, this );
        });

I am thinking of adding

setTop( page.find( ":jqmData(role='header')").removeClass( "fade in out" ).appendTo( $.mobile.pageContainer ) );

to it. Wish me luck ...

Answer 4

I think this is added to JQM recently. http://view.jquerymobile.com/1.3.2/dist/demos/widgets/fixed-toolbars/footer-persist-a.html

This link says clearly that you can add the data-id attribute to BOTH. Header AND FOOTER. But that doesn´t work for me.

EDIT: I noticed, that you have to turn on page transitions for the persistent header. But transitions slows down the app too much...

Answer 5

If you can get by with one single shared header, you can supply the header in your main page: (note: NO jQuery involved, sorry "just use jQuery" guys :-p)

<div class="header">
    <div class="logo"></div>
    <div class="menu"></div>
</div>
<div data-role="page" class="page" id="loading">
    <div data-role="content">
        <h1>Your Page</h1>
    </div>
</div>

Then use CSS to push the top of each page down:

.ui-page{
    top:64px !important;
}

I'm not happy with that !important in there, but the rules jQueryM is using in CSS have the highest specificity w/o using an ID. If you know all of your IDs, you can probably do without it... Feel free to suggest other rules that are better.. I've beat my head against this too long to care any longer.

Answer 6

Hi it might be late but this worked for me.

[data-role=page]
{
    min-height: 100%;
    height: auto !important;
    height: 100%;
    overflow: scroll;
    margin: 0 auto -40px;
}
.footerPlaceHolder
{
    height: 40px;
}
[data-role=footer]{height:40px; bottom:0; position:fixed !important; top: auto !important; width:100%; z-index: 9999;}

Your html

<div data-role="page">
    ....Your content....
    <div class="footerPlaceHolder"></div>
    <div data-role="footer"> 
        <a href="#" data-icon="arrow-l" class="ui-btn-left">Back</a>
        <a href="#" onclick="settingsClicked(this);" data-icon="gear" class="ui-btn-right">Settings</a> 
    </div>
</div>

P.S. Please note I am not good at this things especially css. All comments will be greatly appreciated.

Thanks.