Replicating the iPhone Swipe Gesture – Vertical swiping

For those who wanted a vertical swiping feature to the the swipe gesture gallery that I created earlier, this post has a new demo and minimal explanation about a vertical swipe gesture gallery. Now you can swipe the images up or down.
I will not go through the basics once again as I have explained them in details in my previous posts. You can refer them once again in these two tutorials – post 1, post 2. Check out the demo below. Open the link in a webkit browser in either your mobile device or your computer.

Demo link: http://rialab.jbk404.site50.net/swipegesture/vertical/

Below is a screenshot of the gallery in action. You can see that the images are being moved vertically.

Screenshot of vertical swiping through images
Screenshot of vertical swiping through images

Read More »

Advertisements

Replicating the iPhone Swipe Gesture – auto scrolling feature

This is an update to the Replicating touch swipe gesture javascript implementation series that I have been writing for some time now and this time I have tried out the auto scrolling feature. Sometimes users may want a auto scrolling along with the normal swipe gesture feature. This post will talk about it and the changes to code that were made to make it auto scroll. First let’s check out the demo, the demo runs in both computer webkit browsers and mobile webkit browsers.

Demo link: http://rialab.jbk404.site50.net/swipegesture/auto_scrolling/

Now, let’s talk on the implementation,
First the features of this demo-

  • Auto scrolling – the gallery slides change automatically at periodical times. Based on the requirement specify whether auto scroll stops on user interaction or continues.
  • Looping – the gallery loops and is circular.
  • Direction – supports two direction – left or right. Specify which direction the gallery should auto scroll.
  • Click/Tap to URL – click or tap to open URL’s.
  • Swipe gesture – and then the touch based swipe gesture for mobiles is available as well.

Read More »

Circular swipe gesture gallery – looping through images

This is another update to the regular swipe gesture gallery that I created in two of my earlier post – post1, post2. This time I have implemented the looping feature for the images. The gallery never ends, instead you swipe it in a circular motion. So, whenever you reach the end of the list, swipe again from right to left across your device’s screen to see the first image and also when you reach the beginning of the list you swipe from left to right of your device’s screen to see the last image again. Try out the demo first and you will get a feel of it. Check out the demo in a webkit desktop browser (Chrome, Safari) or an iOS/Android device’s browser. Click on any image to open a URL as well. So, click/tap to open URL is included.

Demo link: http://rialab.jbk404.site50.net/swipegesture/circular/

An instance of the demo application – with reduced opacity and exposed images, the darker one being the one currently displayed and is inside the wrapper div.

Read More »

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

Read More »

JavaScript Touch event or Mouse event – detect and handle according to device

You might have faced this issue before or even might have wondered – How to write a single piece of code that establishes correct event in the device i.e touch events for mobile web browsers and mouse events for desktop browsers. You need not hard code the events for your app code. Once you detect and handle those events, you can run your app everywhere – mobiles and computer browsers. Normally when we develop an app for mobile browsers we test it in a desktop browser, so if you have touch events hard-coded into your script then it is a pain to change the script and make it work for computer browsers(replacing touch events with mouse events) and then change it back again to touch for mobiles. So, here is a small script/trick to universally handle the event and need not worry about devices,

var isTouchSupported = 'ontouchstart' in window;
var startEvent = isTouchSupported ? 'touchstart' : 'mousedown';
var moveEvent = isTouchSupported ? 'touchmove' : 'mousemove';
var endEvent = isTouchSupported ? 'touchend' : 'mouseup';

If you see the first line of the script, it detects if ontouchstart property is available in the global window object. It it is available or it is a part of the window object, then it returns true else it returns false. Note that ontouchstart is a standard javascript touch event attribute. Now, if you are making this check in a computer browser (for e.g FF, Chrome or IE) then ontouchstart is not a property of the window object. So isTouchSupported will be set to false. Had it been a mobile browser (e.g iOS, Android) then ontouchstart would have been automatically a part of the window object and correspondingly isTouchSupported variable will set to true. This is all we need to detect. The next three lines establish a common platform for the touch vs mouse events i.e I am mapping the touch events to its corresponding mouse events.

Now, all you need is to register the event listener to your element so that some action is performed when the event is triggered on the element. Here is an example, (where myButton is the ID of my imaginary button)

document.getElementById("myButton").addEventListener(startEvent,function(){},false);

The startEvent variable acts as a placeholder. It will be replaced by mousedown for computer browsers and touchstart for mobile browsers. Similarly the other two events can be used. This way a single app can run everywhere.

Here is a good example with the usage (make sure you look at the javascript script code) – https://jbkflex.wordpress.com/2012/07/21/replicating-the-iphone-swipe-gesture-common-code-for-mobiles-and-desktop-browsers/

Here is another one – https://jbkflex.wordpress.com/2012/07/25/360-degree-car-rotation-common-code-for-mobiles-and-computer-browsers/

Please do suggest me if there are any better methods of mapping touch v/s mouse events.