Introduction
jQuery is great for binding custom events to your standard HTML ones: click, hover, etc. However with the rise of mobile browsing, jQuery is yet to catch up with touch events being triggered in mobile Safari and the Android browser. I wrote a jQuery plugin that simplifies capturing the most common of the touch gestures, the flick/swipe. This motion easily lends itself to actions such as page navigation or scrolling through a list.
Get the Code
The plugin can be downloaded from jQuery's official plugin repository
here.
Use the Code
For starters, include the script (in addition to jQuery) in your HTML file.
<script src="jFlick.js" type="text/javascript"></script>
Now it's just a matter of calling the plugin's only method,
detectFlicks.
$('div#flickable').detectFlicks({axis: 'y', threshold: 60, flickEvent: function(d) { alert('flick detected: ' + d.direction);} });
What I just did was:
- Use jQuery to grab my div with id
flickable.
- Tell jQuery to detect flicks in the 'y' axis that are 60 pixels or greater, and then do my custom event
- When
flickEvent gets called, it will have the direction variable available to it. In this case, I just want to send that direction to an alert box.
Parameters
By default you don't have to pass any parameters to
detectFlicks, but without a
flickEvent nothing noticeable will happen. Flicks in the 'x' axis at a threshold of 15 pixels are also defaults. 15 pixels will capture almost everything except a tap as a flick event.
threshold: a positive number representing pixels
flickEvent: some function to evaluate in event of a flick
Notes
It's important to note that the flicks are only detected if they begin within the space allocated to this element. Also you can bind different flick events and parameters to each element on your page.
See Also
jQTouch is a jQuery plugin that helps you design an entire site with the look and feel of an iPhone app. For custom mobile websites however, my plugin should help in making it feel more like a native application rather than redesigning the whole thing.
