CODEWITHSUNDEEP
javascriptjquery-mobile
sarfarazsajjad
sarfarazsajjad

Reputation: 1238

JqueryMobile Div Transition

I have a header and nav bar on top of the page, I want to add 3 different pages below the nav bar so, when clicked on a button of nav bar the respective page should appear with transition.

I am trying to do this but page transitions are applied to the whole page including the header and nav bar.

Is it possible to do with jquery mobile, or Is there any workaround for this problem ?

here is my code

    <div data-role="header" data-theme="b">
    <h1>title</h1>
    <a href="#" data-icon="gear" class="ui-btn-right">Logout</a>
</div>
<div data-role="navbar" >
    <ul>
        <li><a  href="#" class="ui-btn-active">One</a></li>
        <li><a  href="#">Two</a></li>
        <li><a  href="#">Three</a></li>
    </ul>
</div><!-- /navbar -->

Upvotes: 3

Views: 1761

Answers (1)

Jonah
Jonah

Reputation: 16202

<div data-role="header" data-theme="b" data-position="fixed">

You just need the data-position attribute. More info here:

http://jquerymobile.com/demos/1.2.1/docs/toolbars/bars-fixed.html

EDIT

Okay, the trick is that you also have to give the headers on all the pages the same data-id. Here's a working example:

http://jsbin.com/ibukoz/1/

Upvotes: 1

Related Questions