Replicating the iPhone Swipe Gesture – common code for mobiles and computer 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://jsphkhan.github.io/swipe_gesture_common/

An image/slide showing up in portrait mode
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 – Touch vs Mouse 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,

/*mapping touch events to mouse events. Automatic registration of event
based on the device. If touch enabled then touch event is registered.
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’s window object 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. 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.

Source: https://github.com/jsphkhan/jsphkhan.github.io/tree/master/swipe_gesture_common

Updates/Related posts

1)  Flickering issue in iPhone/iPod solved.
After the swipey demo was done I was observing a strange flickering issue of the images. If you see the demo link in an iPhone or iPod’s mobile safari browser you would notice it. Test case – swipe the images to the left and you would notice a black flicker on the right side of the browser for a brief moment. This is happening when you swipe all the image for the first time. Second time on wards it is not being seen. Finally I could solve the issue and made a small post on it with the new fixed demo. You can find it here.

2) Images linked to URL – Now you can click or tap on the images to go to a URL. I have made a new post which describes the changes made. This was requested by one of the reader. I felt the importance of having the ability to link the images to URL so came up with an extension of this post. You can fine the post here. There is a demo and also a download link.

3) Circular swipe gesture gallery – I have a new tutorial where I have talked about a circular swipeable gallery. So the images keep on looping. The tutorial also includes a new demo. Read it here.

4) Auto scrolling swipe gesture gallery – Sometimes users may want a auto scrolling gallery along with the normal swipe gesture feature. I have a new post with a demo. Read it here.

16 thoughts on “Replicating the iPhone Swipe Gesture – common code for mobiles and computer browsers.

  1. it is possible to duplicate the Warpper and slideContainer ?
    for example to have, 10 slides in the same html file.
    ??

    tahnks.

    • Jared,
      Yes you can. The code is very flexible. Add these two lines in the javascript file before the comments (search for the comment) – //display the ul container now,
      swipey.currentDistance = -swipey.preferredWidth;
      swipey.slideContainer.style.webkitTransform = “translate3d(” + swipey.currentDistance + “px, 0,0)”;

      • That worked great. I added some simple left and right buttons that trigger the move functions. Do you know a way I can detect the -webkit-transform translate3d value so that it won’t go past the first and last slide? I have tried several different ways, but it keeps coming back as undefined.

  2. Joseph,
    I have been trying to create an html5 document which has 5 different section elements each containing their own slide show. I have been different ways to do this for several weeks now with no luck. Do you have any ideas if it is possible to get more than one slide show on a page and have each of them swipe independently? If so, would you be kind enough to help me out?
    Thanks for your time.
    Cory

    • Hi Cory,

      Yes, you can use it multiple times. The code that I developed is meant to be used only once since I used id’s to grab elements. So this is what you need to do, since you will need to run the code 5 times, so use different id’s for the elements. Wherever you find document.getElementById(“wrapper”); or similar code, put a new id for the corresponding element in the html page and also use the same id in the javascript code. Also you can call the swipey in a function, so that you can use it multiple times. This should help you out.
      Let me know if you have any problems.
      Thanks.

      Joseph

  3. Hey Joseph, this is great code – thanks for publishing your tutorial!

    I’ve one question, though: the event listeners prevent use of the pinch and zoom gestures as they’re interpreted as an attempt to swipe. Is there a simple way of re-enabling this?

    • Hi Morgan,

      In that case it will be difficult to swipe at the same time, will not be a good user experience. So, you have to let go some of the features.

      Thanks.

  4. Hi! Awesome work! I just have a question. I use it in adobe dps (digital publishing suite) to make an interactive magazine. They dont offer a swipe effect like yours, so I had to implement it. My goal is to have a full screen swipe gesture. It works perfect, but i need somehow to get out of it. This means i need to swipe up or down to get to the next page. Can i implement this feature by changing some code?

    Klaus

    • Hi Klaus,
      Yes you can do that. In the code you have to make changes to the X co-ordinate calculations that I have done. So make all the current X co-ordinate calculations into Y co-ordinates. Here is a smile example,
      Convert swipey.startX to swipey.startY like this,
      swipey.startY = event.touches[0].pageY;
      Similarly,
      swipey.distanceY = event.touches[0].pageY – swipey.startY;

      So in this was go on making changes. Since you want to move the images top-bottom i.e vertical direction so you have to move along the Y direction.
      Also take into consideration the width and height, since I have used them in the calculations.
      Thanks.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s