sliding left to right transition in jQuery Mobile

Question

I'm adding pages run time when swipeleft is happened. But when swiperight happened I can't return the previous page that I'm created with sliding from left to right.

I have added the data-direction="reverse" to the pages but it didn't create left-to-right effect.

Is there any way to do this?

score 12 · Answer 1 · answered Apr 08 '13 at 15:30

12

A maybe easier way using JQM would be:

<a href="page.html" data-transition="slide" data-direction="reverse">Link Text</a>

or also, within js as:

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

answered Apr 08 '13 at 15:30

Daniel

20,420
10
92
149

score 3 · Accepted Answer · answered Aug 26 '11 at 15:14

3

function ChangePage(pageId,iPageIndex) {
    var forward = iCurrCardIndex < iPageIndex;
    iCurrCardIndex = iPageIndex;

    $.mobile.changePage("#" + pageId, "slide", !forward, true);
}

answered Aug 26 '11 at 15:14

uzay95

16,052
31
116
182

score 1 · Answer 3 · answered Jun 10 '12 at 09:28

1

data-direction="reverse" does not belong on the page, you add it to the link:

<a href="page.html" data-direction="reverse">Link Text</a>

will send you to page.html with a reverse transition.

answered Jun 10 '12 at 09:28

ansorensen

1,276
1
14
29

score 0 · Answer 4 · answered Jul 14 '12 at 15:01

0

By using data-rel="back" jQuery Mobile will mimic the back button, see "Back linking" here: http://jquerymobile.com/demos/1.0b1/#/demos/1.0b1/docs/pages/docs-pages.html

answered Jul 14 '12 at 15:01

Andreas Bergström

13,891
5
59
53

score 0 · Answer 5 · answered Feb 20 '13 at 12:32

0

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

answered Feb 20 '13 at 12:32

Bluerain

477
5
9

This does show a blank page between the current page and the page you want to go to – Daniel Apr 08 '13 at 15:31

sliding left to right transition in jQuery Mobile

5 Answers5

Linked