CODEWITHSUNDEEP
javascriptjquerymobilejquery-mobile
Sallar
Sallar

Reputation: 730

Changing jQuery Mobile transition directions

I'm working on a web app, which I decided to use jQuery Mobile for it. The problem is my website is in Persian language which is a Right-to-Left language. I've created an rtl.css stylesheet which reverses everything, but I need to also reverse default slide transitions, meaning that it should slide from left to right and when adding data-reverse or back button it should slide right to left.

Can you please help me with this?
Thanks.

Upvotes: 17

Views: 26735

Answers (3)

Zakaria
Zakaria

Reputation: 15070

You can check the documentation here.

In your case, you should put this : 

$.mobile.changePage( "nextPage.html", {
    transition: "slide",
    reverse: true
});

There is another method: You can use the data-direction attribute in the link.

Exemple : 

<a href="nextPage.html" data-transition="slide", data-direction: "reverse">Next page</a>

I think that you can set it globally in that way : you can find the following statement in the jQuery Mobile JS : 

a.mobile.changePage.defaults

At that line, you can change reverse:false to reverse:true.

Upvotes: 32

leojh
leojh

Reputation: 7712

For markup, this seems to provide for a better slide effect and also more in-line with what jQuery Mobile does in their docs.

<a href="#main" data-transition="slide" data-direction="reverse">

Upvotes: 14

Phill Pafford
Phill Pafford

Reputation: 85378

I don't think there is a Global option but you could iterate through all the page and add the attribute

data-direction="reverse"

jQM Docs:

but @Zakaria is also a valid response

Upvotes: 6

Related Questions