Replicating the iPhone Swipe Gesture – common code for mobiles and computer browsers.

734 views

Published on

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/

Published in: Technology, News & Politics
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
734
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Replicating the iPhone Swipe Gesture – common code for mobiles and computer browsers.

  1. 1. Replicating the iPhone Swipe Gesture – common code for mobilesand 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 – Part1 and Part 2. In case you have missed out of the earlier tutorials and detailed explanation then you can have a lookat them first, before proceeding with this tutorial. What I have been able to achieve is that, I have replicated the nativeiPhone swipe gesture for the iPhone web-kit browser. So, throughout the series I have been able to create aHTML/JavaScript/CSS3 version of the swipe gesture. If in case, again you are not sure of the swipe gesture andswiping, 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 mobilebrowsers and computer browsers. Note that when I am saying browsers I mean web-kit browsers – Chrome & Safariin computers, and then the default web browsers in iOS and Android mobiles. The major changes are in thejavascript code, where I have automated the user event handling process. What this means is that for mobile devicestouch based events are registered and listened to and then for computer browsers mouse based events areregistered and handled by the script automatically. This way there is no need to hard code touch events for mobilesand 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 andcomputers): http://rialab.jbk404.site50.net/swipegesture/common/
  2. 2. Common implementation for mobiles and computersSo 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 madein the script.Detect device type and automatically assign eventsI 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 eventsisTouchSupported: ontouchstart in window.document,/*mapping touch events to mouse events. Automatic registration of eventbased on the device. If touch enabled then touch event is registered.
  3. 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 toour startEvent, moveEvent and endEvent properties of the swipey object. And if touch is not supported, it is acomputer browser and so mouse events are assigned to our swipey object’s custom properties. This creates anautomated event detection mechanism.Another automation has been done in the way the page co-ordinates are read when the user is interacting with theapp,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 toread 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. Downloadlink is given below. Again, I would recommend you to go through my previous post to fully get a hang of it.DownloadDownload the source here.

×