Click here to Skip to main content
13,596,981 members
Click here to Skip to main content
Add your own
alternative version


7 bookmarked
Posted 19 Apr 2010
Licenced CPOL

Use jQuery To Capture Flick Events

, 18 May 2010
Rate this:
Please Sign up or sign in to vote.


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.


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


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.


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

United States United States
This member doesn't quite have enough reputation to be able to display their biography and homepage.

You may also be interested in...


Comments and Discussions

QuestionDemo? Pin
Aaron T Grogg11-Jun-10 4:49
memberAaron T Grogg11-Jun-10 4:49 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Cookies | Terms of Use | Mobile
Web02-2016 | 2.8.180621.3 | Last Updated 18 May 2010
Article Copyright 2010 by steve_gough
Everything else Copyright © CodeProject, 1999-2018
Layout: fixed | fluid