Swiping in Cordova with Jquery and jgestures
There are lots of topics in Stackoverflow when it comes to swiping using jQuery/jQuery mobile. However, none of them seem to work in the manner I want. The following is the structure of my index page of my phonegap app. As this topic recommended, I tried jgestures plugin.
<html>
<head>
<title>App</title>
<script type="text/javascript" src="lib/cordova-2.2.0.js"></script>
<script type="text/javascript" src="lib/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="lib/jgestures.js"></script>
</head>
<body>
<div id="home">
<div id="headersec">
<!-- some elements like images here-->
</div>
<div id="screen1">
<!-- three 80x80 images go here -->
</div>
<div id="screen2">
<!-- three other 80x80 images go here-->
</div>
</div>
</body>
</html>
All I want to do in my deviceready event is this
document.addEventListener("deviceready",onDeviceReady,false);
function onDeviceReady() {
$('#screen1').bind('swipeleft',showNext); //show next hides screen1, shows screen2
$('#screen2').bind('swiperight',showPrev);//show prev hides screen2, shows screen1
}
But this does not work with any of the sample code I've tried.. Can anyone tell what am I doing wrong?
Answer
Looks like this question had a similar issue. The solution was do something like this:
document.addEventListener("deviceready", function(){
$('#screen1').bind('swipeleft',showNext); //show next hides screen1, shows screen2
$('#screen2').bind('swiperight',showPrev);//show prev hides screen2, shows screen1
},false);
Or perhaps you simply need to define the function onDeviceReady BEFORE you call the event listener.