Use jQuery To Capture Flick Events

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.

• axis: 'x' or 'y'
• 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.