Menu
I am working on to create my own image gallery for a project. For that I need swipe event. So found the below code on jsfiddle. Inserted all the necessary files. It shows the list and all.. But still the swipe is not working.? Am I writing the jquery code in the right place? Or something wrong? Here`s 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>
540
Try with 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 Configuring Defaults
Because the jquery-mobile event is triggered immediately, you'll need to bind your event handler before jQuery Mobile is loaded. 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>
194
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
