Geek Answers Handbook

JQuery Mobile swipe not working

I am working on creating my own image gallery for the project. To do this, I need to host a swipe event. So found below code on jsfiddle. Paste all the necessary files. It shows a list and that’s it. But still the napkin does not work.? Am I writing jquery code in the right place? Or is something wrong? Here is my code:

<html> <head> <meta charset="utf-8" /> <title>Home</title> <!-- Meta viewport tag is to adjust to all Mobile screen Resolutions--> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" /> <link rel="stylesheet" type="text/css" href="Css/style.css" /> <link rel="stylesheet" type="text/css" href="Css/Jstyle.css" /> <link rel="stylesheet" type="text/css" href="Css/jquery.mobile.theme-1.2.0.css" /> <link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.css" /> <script type="text/javascript" src="Javascript/jquery1.js"></script> <script type="text/javascript" src="Javascript/jquery2.js"></script> <script type="text/javascript" src="css/jq1.6.2.js"></script> <script type="text/javascript"> $("#listitem").swiperight(function() { $.mobile.changePage("#page1"); }); </script> </head> <body> <div data-role="page" id="home"> <div data-role="content"> <ul data-role="listview" data-inset="true"> <li id="listitem"> Swipe Right to view Page 1</a></li> </ul> </div> </div> <div data-role="page" id="page1"> <div data-role="content"> <ul data-role="listview" data-inset="true" data-theme="c"> <li id="listitem">Navigation</li> </ul> <p> Page 1 </p> </div> </div> </body>
+7
source share
2 answers

Try it with the pageinit handler for jQuery mobile:

 $(document).on('pageinit', function(event){ $("#listitem").swiperight(function() { $.mobile.changePage("#page1"); }); });

Docs for pageinit @jquery mobile.

From the docs:

Take a look at the default settings

Since the jquery-mobile event is fired immediately, you need to bind an event handler before loading jQuery Mobile. Link to your JavaScript files in the following order:

 <script src="jquery.js"></script> <script src="custom-scripting.js"></script> <script src="jquery-mobile.js"></script>
+12
source

It turned me on too ... I didn't need to use .on ('pageinit'), as suggested in a previous post. Turns out my syntax was correct in my jQuery, but CASE SENSITIVTY was my problem. "swiperight" did not work, but "swipeRight" did! The following code worked for me and also fixed a Swipe problem preventing the document from scrolling up and down in mobile browsers. Be sure to specify the swipeRight and swipeLeft methods separately, and not one common "swipe" class, and you're good to go! * Pay attention to the Exclude Elements line below, noticing that I took a "span" from the list to allow scrolling on a commonly used span element.

 $(function() { $('.yourclassname').swipe( { swipeLeft:function(event, direction, distance, duration, fingerCount) { // do your swipe left actions in here, animations, fading, etc.. alert(direction); }, swipeRight:function(event, direction, distance, duration, fingerCount) { // do your swipe right actions in here, animations, fading, etc.. alert(direction); }, threshold:4, // set your swipe threshold above excludedElements:"button, input, select, textarea" // notice span isn't in the above list }); });
-2
source

More articles:


All Articles