This is another update for the iPhone Swipe Gesture that I have created. This is the third update to the series – Part 1 and Part 2. In case you have missed out of the earlier tutorials and detailed explanation then you can have a look at them first, before proceeding with this tutorial. What I have been able to achieve is that, I have replicated the native iPhone swipe gesture for the iPhone web-kit browser. So, throughout the series I have been able to create a HTML/JavaScript/CSS3 version of the swipe gesture. If in case, again you are not sure of the swipe gesture and swiping, I would recommend to go through my previous tutorials – Part1 and Part2. For the full post download this file or visit the actual blog post link: http://jbkflex.wordpress.com/2012/07/21/replicating-the-iphone-swipe-gesture-common-code-for-mobiles-and-desktop-browsers/

1. Replicating the iPhone Swipe Gesture – common code for mobiles
and computer browsers.
Actual Blog post link: http://jbkflex.wordpress.com/2012/07/21/replicating-the-iphone-swipe-gesture-
common-code-for-mobiles-and-desktop-browsers/
This is another update for the iPhone Swipe Gesture that I have created. This is the third update to the series – Part
1 and Part 2. In case you have missed out of the earlier tutorials and detailed explanation then you can have a look
at them first, before proceeding with this tutorial. What I have been able to achieve is that, I have replicated the native
iPhone swipe gesture for the iPhone web-kit browser. So, throughout the series I have been able to create a
HTML/JavaScript/CSS3 version of the swipe gesture. If in case, again you are not sure of the swipe gesture and
swiping, I would recommend to go through my previous tutorials – Part1 and Part2.
Now, the update and the agenda of this tutorial is that – I have developed a common universal code for mobile
browsers and computer browsers. Note that when I am saying browsers I mean web-kit browsers – Chrome & Safari
in computers, and then the default web browsers in iOS and Android mobiles. The major changes are in the
javascript code, where I have automated the user event handling process. What this means is that for mobile devices
touch based events are registered and listened to and then for computer browsers mouse based events are
registered and handled by the script automatically. This way there is no need to hard code touch events for mobiles
and mouse events for computers. The same code works everywhere.
But, still to support different device screen sizes you will need to make changes to the CSS or the asset (images)
sizes. The demo that I have worked on, I have considered the iPhone resolution – 320 x 416.
Check out the demo (same link works in mobiles and
computers): http://rialab.jbk404.site50.net/swipegesture/common/

2. Common implementation for mobiles and computers
So this new updated demo is the latest one including all the previous updates. Following are the features,
 Fix – Flickering issue in iOS and Android – Read the post.
 Images linked to separate URL – Read the post.
 Common code. Write once run everywhere. Same demo works in mobiles and computers.
 Basic swiping feature – which I have developed in my previous tutorials – Start here.
I will not go into the details, you can check my previous posts for that. I will just update you with the changes I made
in the script.
Detect device type and automatically assign events
I have written a completely separate post for this. You can have a look at it. Just to give you a hint, this is what I did,
//detect touch and then automatically assign events
isTouchSupported: 'ontouchstart' in window.document,
/*mapping touch events to mouse events. Automatic registration of event
based on the device. If touch enabled then touch event is registered.

3. and if desktop browser then mouse event is registered.*/
swipey.startEvent = swipey.isTouchSupported ? 'touchstart' : 'mousedown',
swipey.moveEvent = swipey.isTouchSupported ? 'touchmove' : 'mousemove',
swipey.endEvent = swipey.isTouchSupported ? 'touchend' : 'mouseup',
This detects if the device browser window supports touch event. If yes, then javascript touch events are assigned to
our startEvent, moveEvent and endEvent properties of the swipey object. And if touch is not supported, it is a
computer browser and so mouse events are assigned to our swipey object’s custom properties. This creates an
automated event detection mechanism.
Another automation has been done in the way the page co-ordinates are read when the user is interacting with the
app,
var eventObj = swipey.isTouchSupported ? event.touches[0] : event;
You can find this inside the startHandler() and the moveHandler() – event listener functions. Then when we need to
read the page co-ordinates we do this,
swipey.distanceX = eventObj.pageX - swipey.startX;
This is it, these are some of the major changes in the code. You can download the source and try it out. Download
link is given below. Again, I would recommend you to go through my previous post to fully get a hang of it.
Download
Download the source here.