Click here to Skip to main content
Click here to Skip to main content
Go to top

Use jQuery To Capture Flick Events

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

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.

License

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

Share

About the Author

steve_gough

United States United States
No Biography provided

Comments and Discussions

 
QuestionDemo? PinmemberAaron T Grogg11-Jun-10 4:49 

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

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

| Advertise | Privacy | Mobile
Web03 | 2.8.140926.1 | Last Updated 18 May 2010
Article Copyright 2010 by steve_gough
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid