Geek Answers Handbook

Swipe between web pages for webapp

I want to create a webapp (to avoid having to individually program for iPhone, Android, BB, etc.), and I'm looking for a swipe effect. Is there HTML5 or webkit just saying “swipe to next / previous page”? (I know that it will be a more detailed code than that, but the essence of what I want)

+7
source share
3 answers

you can use the div to scroll, but not the whole page in a web browser. i, you can only load pages in a div after swiping and do not move the entire page.

only works in chrome, safari.

Here is the code if you are using jquery mobile.

$('body').live('swipeleft swiperight',function(event){ if (event.type == "swiperight") { alert("swipped right side"); } if (event.type == "swipeleft") { alert("swipped left side"); } event.preventDefault(); });

see here wire detection

+6
source

@sree got most of the way from me, but here the code I hit used

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>jQuery Mobile: Demos and Documentation</title> <link rel="stylesheet" href="css/themes/default/jquery.mobile-1.1.0.css" /> <link rel="stylesheet" href="docs/_assets/css/jqm-docs.css" /> <script src="js/jquery.js"></script> <script src="docs/_assets/js/jqm-docs.js"></script> <script src="js/jquery.mobile-1.1.0.js"></script> </head> <body> <p>random page to test on</p> <p>Swipe1 </p> <script type="text/javascript"> $('body').live('swipeleft swiperight',function(event){ if (event.type == "swiperight") { jQuery.mobile.changePage("page2.html",{transition:'slide'}); } if (event.type == "swipeleft") { jQuery.mobile.changePage("page1.html",{transition:'slide'}); } event.preventDefault(); }); </script> </body> </html>

... and I downloaded the jquery mobile kit and saved the CSS / JS files with the same file structure

+3
source

I did https://github.com/caktux/swipy just for that. I would like to receive feedback from other developers and, possibly, make it a plugin for “responsive websites like webapps” if you have interest.

0
source

More articles:


All Articles