How to keep same header/footer across pages in jQueryMobile?

Question

Is there an easy method to keep the same header/footer while navigating jQueryMobile pages? The only solutions I came across so far relies on injecting it dynamicly on page-change, but this screws up the transitions, and just clones the elements, I need the original.

So is there an officially supported way? I find it strange that I seem the only one struggling with this problem?

Answer 1

The easiest way is to add a "data-id" attribute to the headers and footers on all pages. To make the header/footer "persistent", use the same data-id across all pages.

<div id="page1">
 <div data-role="header" data-id="main-header"></div>
 ...
 <div data-role="footer" data-id="main-footer"></div>
</div>

<div id="page2">
 <div data-role="header" data-id="main-header"></div>
 ...
 <div data-role="footer" data-id="main-footer"></div>
</div>

You'd also want to fix the headers and footers either with css or data-position="fixed".

Hope this helps.