Adding Touch to A Web Site Using the jQuery SwipeTouch Plugin
Lately I have been spending a lot of time learning about browser touch support. First I read through the Touch API draft so I would be familiar with the touch events browsers are now supporting. My first instinct was to see if binding touch event handlers like any other event in jQuery was the way to go or not.
Before I tried on my own I decided to studying the jQuery Mobile and Sencha Touch source code to see how they were handling touch. Seeing how each of these frameworks manage the touch API allowed me to see it would be much more than just binding event handlers. One thing in particular the Touch API does not have swipe specific events. So at this point you are left to programmatically determine when a user performs a swipe gesture.
To me, a swipe is when a user moves their finger across the screen in a designated direction to invoke a desired client response. Typically they will be moving rapidly to the left, right, up or down to cause the page to 'scroll' in that direction. Think of this as paging up or down. I also use it to switch panels in a panorama effect (more on this in a future post).
Being a heavy jQuery user I next started looking for existing plugin solutions. I found the TouchSwipe plugin. As you should infer from the name it aids in determining when a user swipes their finger across the screen. Instead of providing a set of swipe events, like jQuery Mobile uses, you define callback methods to be invoked when a directional swipe is performed.
swipeLeft : $.fn.panorama.swipeLeft,
swipeRight : $.fn.panorama.swipeRight,
$(target.selector).swipe( swipeOptions );
Here I set the triggerOnTouchEnd property to true. This means the touch event is triggered when the user picks up their finger, swipes off the screen or passes beyond the element's boundary. If this value is set to false the touch event will only fire if the number of touch points is equal or greater than the threshold value.
The threshold property is the minimum number of touch points the gesture must generate to be considered a swipe. The default value is 75 points, but as you can see from the code snippet I chose 20.
The allowPageScroll property designates how the plugin will pass along the touch event to the browser. The default value is auto, meaning any unhandled touch event will cause the browser to scroll the page as it normally would. Because my solution needed to response to left and right swipes I chose to only allow vertical scrolling. You can also designate horizontal and none.
Finally the swipeLeft and swipeRight properties. These properties are null values unless you supply a function to be executed when the user swipes in the targeted direction. Here I have defined functions to handle when the user swipes left or right across the element. You can also supply functions for swipeUp, swipeDown and just swipe.
At first I thought not binding event handlers to some custom swipe event would be problematic. But I was pleasantly surprised at how effective this plugin operates. It took about 15 minutes for me to review the samples and apply the TouchSwipe plugin to my application and test. You can visit the TouchSwipe plugin's home page for links to some good demonstrations.
Hopefully next week I will start sharing the mobile movie site I have demonstrated at several code camps the past few months. Despite being a working W3C draft the touch events API is one of the most important pieces of the modern web. Doing math on the most recently available numbers, 450,000 Android and 260,000 iOS devices being activated daily, supporting touch in your web sites is extremely important when striving for rich user interfaces. The jQuery TouchSwipe plugin makes this process very easy even for the newest AJAX developer.