CODEWITHSUNDEEP
ajaxjquery-mobilecordova
Henry8
Henry8

Reputation: 264

jQuery Mobile, Phonegap and persistant header

I'd like make a new mobile app using jqm and Phonegap; I don't understand how to get a fixed header that is not recreated at each change of page.

This is the classic code used by jqm for ajax calling; but in every cases the header is reloaded. 

<!-- Start of first page -->


<div data-role="header">
    <h1>First</h1>
</div><!-- /header -->

<div data-role="content">    
    <p>The content</p>        
    <p>View internal page called <a href="#second">second</a></p>    
</div><!-- /content -->

<div data-role="footer">
    <h4>Page Footer</h4>
</div><!-- /footer -->


<div data-role="header">
    <h1>Second</h1>
</div><!-- /header -->

<div data-role="content">    
    <p>I'm the second content</p>        
    <p><a href="#first">Back to first</a></p>    
</div><!-- /content -->

<div data-role="footer">
    <h4>Page Footer</h4>
</div><!-- /footer -->

I don't like transition effect; I'd like only the header fixed (simila with native app).

I saw some examples of apps maked with Phonegap with the header that don't reloads at the change of each page.

Can you help me?

Upvotes: 1

Views: 1407

Answers (2)

Keith Wolf
Keith Wolf

Reputation: 33

Dima Kuzmich is correct. To expand on what he said, a couple things are important for this to work.

  • The data-id attribute of the header must have the same value in every page for which persistence is needed.
  • data-position="fixed" is required on each persistent header.

Also, it appears that you can have a different theme for each of the pages' persistent headers and it will still persist without transition; it just changes the theme.

Upvotes: 2

Dima Kuzmich
Dima Kuzmich

Reputation: 1326

Check out next link http://jquerymobile.com/demos/1.3.0-rc.1/docs/demos/widgets/navbar/footer-persist-a.html

You just need to add data-id and data-position="fixed": 

<div data-role="header" data-id="my-header" data-position="fixed">

You can try it here: http://jsfiddle.net/dima_k/uwfHJ/

Upvotes: 2

Related Questions