Search jQuery

jQuery Forum

Swipe to a different url?

in jQuery Mobile • 12 years ago

Hi folks,

Just starting out on JQM, and I can't seem to find any documentation on what I'm trying to do. I'm trying to create a series of pages with swipe navigation. Not virtual pages, but actual pages. I found a good example of how to do it with the hidden divs, but nothing on how to go to a different url with a swipe. Can someone provide me with a quick example? Like swipe right to load "about.htm" and swipe left to go to "contact.htm"?

Replies(17)

tobias.s

Re: Swipe to a different url?

12 years ago

Hi tactics2,

you can call the function changePage manually to open another page. Just fill the attributes appropriatly (for transitioning, enable back button history etc.)

Example:

jQuery('div').live('swiperight', function(event, ui){
jQuery.mobile.changePage( '/site/about.html', true, true, true, true );
});

efexen

Re: Swipe to a different url?

12 years ago

If all of your separate pages have IDs for them you can do something like this:

$("#mobilePage").bind('swipeleft', function (event, ui) {

$.mobile.changePage('newsiteurl');

})

tactics2

Re: Swipe to a different url?

12 years ago

Thanks folks. Yes, all of my pages will have separate ID's like:

<body>

<body>

tactics2

Re: Swipe to a different url?

12 years ago

OK, I tried the following, but it doesn't seem to work. It slides when you click the link, but it doesn't swipe:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>Slide and Swipe Demo</title>

</head>

<body>

<div>

</div>

<p><a href="effects.htm?id=slide" data-transition="slide">Slide</a></p>

</div>

$("#home").bind('swipeleft', function (event, ui) {

$.mobile.changePage('effects.htm');

});

</script>

</body>

</html>

efexen

Re: Swipe to a different url?

12 years ago

Which version of JQM are you running as we are on a4 and it works brilliantly even swiping with a mouse in a browser.

tactics2

Re: Re: Swipe to a different url?

12 years ago

I updated the code above as follows:

still no swipe on either Safari or iphone.

tobias.s

Re: Swipe to a different url?

12 years ago

Maybe you have to move the <script> inside the <div data-role="page" id="home">.
If this page isn't your starting page, the script outside the page-div will be ignored.

tactics2

Re: Re: Swipe to a different url?

12 years ago

OK, I'm almost there, but I think there's a bug in the script. Here's a link:

http://bushidodesigns.net/jq

1. when the page loads, swipe left and you will arrive at the "effects.htm" page

2. swipe right, and you will end up back on the "index.htm" page

3. try to swipe left again (nothing happens)

So it only works the first time on the home page.

tobias.s

Re: Swipe to a different url?

12 years ago

I don't know why, but after swiping to the left and swiping to the right there are two div-containers with id='home' in DOM tree. Try changing bind() with live() in your script:

jQuery("#home").live('swipeleft', function (event, ui) {

jQuery.mobile.changePage('effects.htm');

});

tactics2

Re: Swipe to a different url?

12 years ago

Bingo! Thanks tobias, that did the trick.

michaeltr..

Re: Swipe to a different url?

12 years ago

hi
Is it possible to swipe to an external url

stefan.ge..

Re: Swipe to a different url?

12 years ago

Ho michaeltryl

Try:

jQuery("#home").live('swipeleft', function (event, ui) {

window.location = "http://www.google.com";

});

drupalnin..

Re: Swipe to a different url?

12 years ago

Ive got this demo: http://bushidodesigns.net/jq - working in my chrome browser using a mouse swipe gesture which is great! I can't get the swipe to work on my android galaxy s phone. Can anyone confirm whether that is supposed to work or not?

Raniel

Re: Swipe to a different url?

5 years ago

hi sir..

tobias.s and stefan

is there possible to adopt this on any slider plugin? like flexslider or slick slider plss

response thnx

watusiware

Re: Swipe to a different url?

5 years ago

I wouldn't expect a response after 6 years!

Start a new question for your new problem.

I don't know what your question is. You can use some slider plugins with JQM. I have used flexslider.

If you are asking about swiping on some slider that you use in a project that doesn't use JQM, you are asking in the wrong place. There are a number of libraries and plugins, though, for recognizing touch gestures in non-JQM projects.

Please start a new thread. If it has something to do with JQM, ask it in this forum. If you are asking about touch gesture plugins, ask in the plugins forum section.

Raniel