With more users beginning to consume content on their iPads, it would be nice to offer native swipe functionality to our projects. The challenge comes with actually implementing the proper handling to respond to those events.
Luckily, Padilicious recently released a library that makes it trivial to support swipe functionality. Check it out…
Adding Finger-Swipe Support is easy. In order to use the library, the first thing to do is setup the head element of your HTML document for iPad:
[cc lang=”html”]
[/cc]
After that, include the actual Swipe Sensing script in the head of your page:
[cc lang=”html”]
[/cc]
After that, create a top-level page element giving it an ID that can be referenced throughout the rest of your code:
[cc lang=”html”]
[/cc]
As stated on the site, the four events triggered by the library (and that can be handled in your own source) are:
- Start occurs when the user touches the screen. The event also determines how many fingers touched the screen.
- Move fires when the finger is dragged across the screen.
- End fires when the finger is lifted from the screen.
- Cancel is fired when the script needs to be reset.
The project site provides a demo for how to get started writing your own event handling routine. For example:
[cc lang=”javascript”]
function processingRoutine() {
var swipedElement = document.getElementById(triggerElementID);
if ( swipeDirection == ‘left’ ) {
// REPLACE WITH YOUR ROUTINES
swipedElement.style.backgroundColor = ‘orange’;
} else if ( swipeDirection == ‘right’ ) {
// REPLACE WITH YOUR ROUTINES
swipedElement.style.backgroundColor = ‘green’;
} else if ( swipeDirection == ‘up’ ) {
// REPLACE WITH YOUR ROUTINES
swipedElement.style.backgroundColor = ‘maroon’;
} else if ( swipeDirection == ‘down’ ) {
// REPLACE WITH YOUR ROUTINES
swipedElement.style.backgroundColor = ‘purple’;
}
}
[/cc]
Check out the project and view the demo on your iPad.
sokkz says
I wonder if we’ll reach a state where mobile interactions become a little more standardized — i.e., when we can get past some of the sillier (and more poorly conceived) patents. It’d be pretty sweet to have an open library like this that is essentially “standardized for all touch-based devices.” Make sense?
In any case, this is a great resource — thanks for sharing!
Tom says
I think that mobile versions of browsers may ultimately provide the standard events for mobile applications, but I think the variation in operating systems and platforms will prevent a standard agreed upon by all vendors.
Justin says
Building iphone app:
http://74.220.219.65/~justinb2/iphone
I cannot find anything on search engines or apples developer site (mainly as I do not have access to much of it) to get the below code to do what I need. Presently the code replaces background color to orange when left swipe. I need it to move to previous image. Does anyone know the code to do this. To disable up and down would be good also.
Thanks
function processingRoutine() {
var swipedElement = document.getElementById(triggerElementID);
if ( swipeDirection == ‘left’ ) {
// REPLACE WITH YOUR ROUTINES
swipedElement.style.backgroundColor = ‘orange’;
} else if ( swipeDirection == ‘right’ ) {
// REPLACE WITH YOUR ROUTINES
swipedElement.style.backgroundColor = ‘green’;
} else if ( swipeDirection == ‘up’ ) {
// REPLACE WITH YOUR ROUTINES
swipedElement.style.backgroundColor = ‘maroon’;
} else if ( swipeDirection == ‘down’ ) {
// REPLACE WITH YOUR ROUTINES
swipedElement.style.backgroundColor = ‘purple’;
}
}