There are jQuery plugins for every type of interaction we have with the browser and they are much appreciated, but one thing that has been lacking when it comes to interactions is the type of interaction we have with our mobile devices.
We can now create full blown mobile apps using only HTML, CSS and JavaScript but in order to make a fully functional app we need to be able to listen for the swipes and pinches of the user, and that’s where touchSwipe comes in.
Using the plugin
The first we need to do in order to use touchSwipe is to add jQuery to our page and then include the touchSwipe plugin.
After we have done this we can begin to write our code to handle the swipe effect. We’ll start by creating our HTML that will consist of 2 divs, one’s contents will be shown when the page loads and after the swipe those contents will be swiped for the second div’s content.
<div id="swipe">
<h1>Swipe Me</h1>
</div>
<div id="html">
<h2>You have just swiped</h2>
<p>And it was a <span class="direction"></span> swipe for <span class="distance">px</span>!</p>
<p>Now here's a cat</p>
<img src="http://placekitten.com/150/150"/>
</div>As you can imagine the swipe div will be the one that will appear when the page loads. Now we need to create the JavaScript:
$("#swipe").swipe( {
swipe:function(event, direction, distance, duration, fingerCount) {
var content = $('#html').html()
$(this).html(content);
},
threshold:50
});What we did was firstly call the swipe method on the div that was receiving the swipe and then started the swipe function and this function takes 5 parameters which will hold values we can later use, like the direction of the swipe, how many pixels the user has swiped, the time it took, and also how many fingers the user used.
We then retrieved the content of the #html div and placed that inside our div so that the content changes right when the user swipes.
In the final line we set the threshold and this value determines how many pixels the user has to swipe before it is considered a swipe, so in my case I set it to 50 and if the user only swipes for 49px or less nothing happens.
The final touch in this swipe is to apply the values of the direction and distance into the appropriate spans and for that we just need to retrieve the parameters in the swipe function and insert that as the text of the respective span:
$('.direction').text(direction);
$('.distance').text(distance);Just place this two line of code before the content swapping and these values will show the direction and distance of your swipe.
In this case we allow swipes in any direction but if you want this to only occur if the user swipes in a certain direction you can use swipeLeft, swipeRight, swipeUp, swipeDown when calling the function.
A demo of this example can be seen here (please test it on your mobile devices).
Listening for pinch events
When using mobile devices we do a lot of pinching to zoom in and out of places, this is also something we can listen for using touchSwipe. In this example I will just make the div bigger when we pinch in and smaller when we do the opposite, like so:
$("#pinch").swipe( {
pinchIn:function(event, direction, distance, duration, fingerCount, pinchZoom)
{
$( this ).css({
"width": 300 + distance,
"height": 300 + distance
});
},
pinchOut:function(event, direction, distance, duration, fingerCount, pinchZoom)
{
$( this ).css({
"width": 300 - distance,
"height": 300 - distance
});
},
fingers:2,
pinchThreshold:50
});As you can see in this case we have two functions , one for when the user pinches in and in this one I set the width and height of our div equal to initial 300px plus the number of pixels the user has pinched in. We also have a second function for the user has pinched out and I do the same thing but instead of adding to the 300px, I subtract. You can see a demo here.
If you look at the touchSwipe website you will see that there is so much more you can do with this plugin, many more options and event listeners you need to try out.
Final thoughts
A plugin that listens to these events is something we have really been missing, this plugin is a great solution if you are planning to create mobile apps with HTML, CSS and JavaScript. Especially if you’re already using the jQuery library.
