Use swipe to change URL, plus have control over data-direction

Question

So I'm using the following jQuery to allow the user to swipe left or right to navigate to different pages within the same document.

$('#main').bind('swiperight', function(){
    window.location = '#menu';
});
$('#main').bind('swipeleft', function(){
    window.location = '#showcase';
});
$('#showcase').bind('swiperight', function(){
    window.location = '#main';
});

The problem is I don't have any control over the data-direction. It would make sense that when the user swipes to the right, that the content moves from left to right and vice-versa.

Any ideas?

Thanks!

I dont get the problem. If you can trigger the swiperight, why not just slide it from left to right? — AgnosticMantis, Feb 12 '12 at 23:15

score 1 · Answer 1 · edited May 23 '17 at 12:11

1

Instead of using window.location, could you use this:

// swiperight function
$.mobile.changePage("#menu", "slide", true, true);

// swipeleft function
$.mobile.changePage("#showcase", "slide", false, true);

The boolean after the string "slide" dictates the direction (forward or back).

The docs on the changePage function: http://jquerymobile.com/test/docs/api/methods.html

I found part of this solution on this post: sliding left to right transition in jQuery Mobile

edited May 23 '17 at 12:11

Community

1
1

answered Feb 13 '12 at 02:20

shanabus

12,989
6
52
78

Thanks for the info @shanabus. This effectively does the same as I already have, so I still have the same issue. I've uploaded the files to http://voyced.com/mobile. The problem is when the page first loads and you swipe right, the direction goes left. After you go back to the main page and swipe right again, it works correctly. Weird!? – DanV Feb 13 '12 at 18:47

score 0 · Answer 2 · answered Jul 17 '12 at 08:38

Try this:

$('#main').bind('swiperight', function(){
    $.mobile.changePage("#menu",{
        reverse: true,
        transition: "slide"
});
});

$('#main').bind('swipeleft', function(){
    $.mobile.changePage("#showcase",{
        transition: "slide"
});
});
$('#showcase').bind('swiperight', function(){
    $.mobile.changePage("#main",{
        reverse: true,
        transition: "slide"
});
});

This works for me! :)

Use swipe to change URL, plus have control over data-direction

2 Answers2