CODEWITHSUNDEEP
javascriptjquery-mobile
Timo Ernst
Timo Ernst

Reputation: 15973

Defining a return-transition between page changes

I am using jQueryMobile's $.mobile.changePage(...) method to switch to a different page within my project.

$.mobile.changePage("#foo", {
 transition:"slide"
});

When I run that method, the transition works perfectly but when I hit the browser's return button I see no reverse transition.

I played around with some of the parameters described in http://jquerymobile.com/test/docs/api/methods.html but had no luck.

Especially setting reverse:true just reversed the transition when moving forward to the target page but there is still no transition when I hit the back button.

Update: It seems like seeing data-rel="back" does the trick for "orginary links" defined via the <a>-tag BUT what I need is the JavaScript equivalent when calling the $.mobile.changePage() function.

Upvotes: 7

Views: 355

Answers (3)

Timo Ernst
Timo Ernst

Reputation: 15973

Found it.

One of our developers turned off all return transitions globally, so no wonder that it didn't work.

This is what he used. Removing that line did the trick.

$.mobile.changePage.defaults.transition = "none";

Upvotes: 0

Phill Pafford
Phill Pafford

Reputation: 85298

For the links you want to have the reverse transition on you can use data-direction="reverse" with data-rel="back"

Example:

<div data-role="page" >
    <div data-role="header"><h3> Header </h3> </div>
    <div data-role="content" >    
        <a href="#page2" data-role="button" data-transition="slide">Page 2</a>
    </div>
</div>

<div data-role="page" id="page2">
    <div data-role="header"><h3> Header </h3> </div>
    <div data-role="content" >    
        <a href="#" data-rel="back" data-role="button" data-direction="reverse" >Back</a>
    </div>
</div>​

jsFiddle:

Docs:

UPDATE

From your comment 

"Yeah, but how do I do that with the JavaScript function $.mobile.changePage()?"

Docs:

Quote:

Properties:
     reverse (boolean,  default:    false) Decides what direction the transition will run when showing the page.

Upvotes: 2

Nachiket
Nachiket

Reputation: 6177

Have a look at this page, http://jsfiddle.net/nachiket/mDTK2/show/light/
Works fine with me.

Click (on page 1) shows transition from Left to right, & Back button (on page 2) shows transition from right to left.

Source: http://jsfiddle.net/nachiket/mDTK2/
If it is not working fine, than please share your browse and other details.
If example is working fine, but not your code, make a jsfiddle highlighting your problem, so I can check and update code/answer.

Upvotes: 2

Related Questions