Recently in my surf across the web I came across this and this is actually quite awesome. Seeing iPads are becoming such a common device to use I thought it would be great to be able to include the swipe gestures functionality into your site or maybe into the ipad version of your site.
jQuery makes this so easy to integrate and use that I couldn’t help but fool around with it.
Here is a quick tutorial on using it.
First off all make sure you have the latest jQuery library included in your site. You can download this from here or include it directly from the site like this:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
Second step, download the TouchWipe library from the author website : TouchWipe
For this example I am just going to bind the Touchwipe to the <body>.
Include the touchwipe library before the tag. ex:
<script type="text/javascript" src="jquery.touchwipe.1.1.1.js"></script>
Next initialise TouchWipe on to the body tag, and give the gestures the chosen action to perform, for this example I just used alerts
$(document).ready(function(){
$('body').touchwipe({
wipeLeft: function(){ alert('You swiped left!') },
wipeRight: function(){ alert('You swiped right!') },
wipeUp: function(){ alert('You swiped up!') },
wipeDown: function(){ alert('You swiped down!') }
})
})
Touchwipe can be added to a specific div aswell rather than the body tag.
And that is it. You could add that to any html page to add swipe Gestures. I didn’t put much meat into this post as there is so much you could do with it.
Check out the demo on your ipad here
If anyone wants examples, feel free to leave a reply.
Update :
Refer from adding this directly to your body tag, as this will affect your whole site then. Also if you are only going to use left and right swipes and want it to use normal scrolling on up and down swipes. A parameter can be added in your javascript.
You can add “preventDefaultEvents: false” after you swipe functions to prevent the plugin from overwriting your normal events.
Thanks for sharing. I will try this
Pleasure! 🙂
Thanks for that!
But if I remove wipeUp and wipeDown from the script I cannot scroll the page. It seems like it overwrite default guestures on iPhone.
Do you know how to solve this please?
HI Martin. Yes. in your parameters add the following :
so in effect your code will now look like this:
$(document).ready(function(){ $('#holder').touchwipe({ wipeLeft: function(){ alert('You swiped left!') }, wipeRight: function(){ alert('You swiped right!') }, preventDefaultEvents: false }) });Janes, you are a star! It works! Thanks a milion;)