Changing jQuery Mobile transition directions

Question

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.

Answer 1

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.