Replicating the iPhone Swipe Gesture – auto scrolling feature

926 views

Published on

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.
For the full post download this file or visit the actual blog post link: http://jbkflex.wordpress.com/2012/09/29/replicating-the-iphone-swipe-gesture-auto-scrolling-feature/

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

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

No notes for slide

Replicating the iPhone Swipe Gesture – auto scrolling feature

  1. 1. Replicating the iPhone Swipe Gesture– auto scrolling featureFor the full post visit this link: http://jbkflex.wordpress.com/2012/09/29/replicating-the-iphone-swipe-gesture-auto-scrolling-feature/This is an update to the Replicating touch swipe gesture javascript implementationseries that I have been writing for some time now and this time I have tried out the autoscrolling feature. Sometimes users may want a auto scrolling along with the normalswipe gesture feature. This post will talk about it and the changes to code that weremade to make it auto scroll. First let’s check out the demo, the demo runs in bothcomputer 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 orcontinues.• Looping – the gallery loops and is circular.• Direction – supports two direction – left or right. Specify which direction thegallery 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 isavailable as well.Code implementationI will quickly walk through the changes that I have made to the code. I have picked upthe code from my last post, so this code is the looping/circular gallery code and I havebuilt on top of it. Let’s start.Firstly, I have introduced some customization variables at the top of the script as shownbelow,intervalObj:null,
  2. 2. autoInterval:3, //1-1000ms, 2-2000ms , customize as per your needautoPlay:true,autoDirection:"l", //l- left, r-rightpauseAutoPlayOnInteraction:true,The variable names itself reveal their purpose and should be fairly easy for you tounderstand. But nevertheless let me start with the first one. intervalObj is the instanceof the timer that I have used. I will talk about it later. autoInterval is the time intervalbetween slide movement. I have comments against it, so should be self explanatory.Then I have autoPlay which determines whether the gallery should auto play when itloads. autoDirection specifies the direction of scroll. Only two have been possible forme till now. And then we have pauseAutoPlayOnInteraction which specifieswhether we should stop the auto play when a user interacts with the gallery. A value offalse for it does the opposite.Now let’s see what other changes have been made. I have introduced a function thatdoes the implementation logic.auto: function() { if(swipey.autoPlay) { if(swipey.autoDirection) { switch(swipey.autoDirection) {
  3. 3. case "l": swipey.intervalObj = setInterval(function(){ swipey.moveLeft(); },swipey.autoInterval*1000); break; case "r": swipey.intervalObj = setInterval(function(){ swipey.moveRight(); },swipey.autoInterval*1000); break; } } }},Note that the format that I have been using for writing my script follows the json objectformat where I have all my logic inside a custom object, mainly to prevent conflictingwith other objects. You can see my previous post to find out more. Now coming back tothe function, the logic implemented is very simple. I first check if autoPlay is true, andthen check if autoDirection is defined and then based on the direction I create a time
  4. 4. interval which calls the moveLeft() or the moveRight() functions periodically. This keepson moving the slides. The script could have been written a little better than what I have.I will try to update when I refine it. But anyways, you can refine and use it.Finally I have one more change. I have one more feature that I have talked of earlier inthis post. So, you can set whether to stop the auto play after user interacts. I didintroduce a variable for that - pauseAutoPlayOnInteraction . If this is set to true thenwhen the user interacts with the image gallery it stops the autoplay. So this isimplemented in the startHandler() event handler method. The following lines takecare of it.if(swipey.pauseAutoPlayOnInteraction){ clearInterval(swipey.intervalObj); swipey.intervalObj = 0;}This is it, these many changes are enough to make the already swipeable gallery auto-play. I will definitely appreciate any suggestion for the implementation.And here is where you can start with the swipe gesture series andbegin: http://jbkflex.wordpress.com/2012/01/09/replicating-the-swipe-gesture-iphone-gallery-for-mobile-web-html5-part-1/I will soon post the code in my Google code SVN base.Updates/Related posts1) Flickering issue in iPhone/iPod solved.After the swipey demo was done I was observing a strange flickering issue of theimages. If you see the demo link in an iPhone or iPod’s mobile safari browser you wouldnotice it. Test case – swipe the images to the left and you would notice a black flicker onthe right side of the browser for a brief moment. This is happening when you swipe all
  5. 5. the image for the first time. Second time on wards it is not being seen. Finally I couldsolve the issue and made a small post on it with the new fixed demo. You can findit here.2) Images linked to URL - Now you can click or tap on the images to go to a URL. Ihave made a new post which describes the changes made. This was requested by oneof the reader. I felt the importance of having the ability to link the images to URL socame up with an extension of this post. You can fine the post here. There is a demo andalso a download link.3) Common code and example for mobiles and computer browsers - I havedeveloped a common universal code for mobile browsers and computer browsers. Notethat when I am saying browsers I mean web-kit browsers – Chrome & Safari incomputers, and then the default web browsers in iOS and Android mobiles. The majorchanges are in the javascript code, where I have automated the user event handlingprocess. What this means is that for mobile devices touch based events are registeredand listened to and then for computer browsers mouse based events are registered andhandled by the script automatically. This way there is no need to hard code touchevents for mobiles and mouse events for computers. The same code works everywhere.Find the post here. There is a demo and also a download link.4) Circular swipe gesture gallery – I have a new tutorial where I have talked abouta circular swipeable gallery. So the images keep on looping. The tutorial also includes anew demo. Read it here.

×