SlideShare una empresa de Scribd logo
1 de 5
Replicating the iPhone Swipe Gesture
– auto scrolling feature
For 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 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.
Code implementation
I will quickly walk through the changes that I have made to the code. I have picked up
the code from my last post, so this code is the looping/circular gallery code and I have
built on top of it. Let’s start.
Firstly, I have introduced some customization variables at the top of the script as shown
below,
intervalObj:null,
autoInterval:3, //1-1000ms, 2-2000ms , customize as per your need


autoPlay:true,


autoDirection:"l", //l- left, r-right


pauseAutoPlayOnInteraction:true,


The variable names itself reveal their purpose and should be fairly easy for you to
understand. But nevertheless let me start with the first one. intervalObj is the instance
of the timer that I have used. I will talk about it later. autoInterval is the time interval
between 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 it
loads. autoDirection specifies the direction of scroll. Only two have been possible for
me till now. And then we have pauseAutoPlayOnInteraction which specifies
whether we should stop the auto play when a user interacts with the gallery. A value of
false for it does the opposite.
Now let’s see what other changes have been made. I have introduced a function that
does the implementation logic.
auto: function() {


  if(swipey.autoPlay)


  {


      if(swipey.autoDirection)


      {


          switch(swipey.autoDirection)


          {
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 object
format where I have all my logic inside a custom object, mainly to prevent conflicting
with other objects. You can see my previous post to find out more. Now coming back to
the function, the logic implemented is very simple. I first check if autoPlay is true, and
then check if autoDirection is defined and then based on the direction I create a time
interval which calls the moveLeft() or the moveRight() functions periodically. This keeps
on 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 in
this post. So, you can set whether to stop the auto play after user interacts. I did
introduce a variable for that - pauseAutoPlayOnInteraction . If this is set to true then
when the user interacts with the image gallery it stops the autoplay. So this is
implemented in the startHandler() event handler method. The following lines take
care 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 and
begin: 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 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) Common code and example for mobiles and computer browsers - 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.
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 about
a circular swipeable gallery. So the images keep on looping. The tutorial also includes a
new demo. Read it here.

Más contenido relacionado

Más de Joseph Khan

Más de Joseph Khan (6)

BackboneJS Training - Giving Backbone to your applications
BackboneJS Training - Giving Backbone to your applicationsBackboneJS Training - Giving Backbone to your applications
BackboneJS Training - Giving Backbone to your applications
 
Creating dynamic SVG elements in JavaScript
Creating dynamic SVG elements in JavaScriptCreating dynamic SVG elements in JavaScript
Creating dynamic SVG elements in JavaScript
 
Replicating the Swipe Gesture iPhone Gallery for mobile web– HTML5 – Part 2
Replicating the Swipe Gesture iPhone Gallery for mobile web– HTML5 – Part 2Replicating the Swipe Gesture iPhone Gallery for mobile web– HTML5 – Part 2
Replicating the Swipe Gesture iPhone Gallery for mobile web– HTML5 – Part 2
 
Customizing the list control - Sencha Touch mobile web application
Customizing the list control - Sencha Touch mobile web applicationCustomizing the list control - Sencha Touch mobile web application
Customizing the list control - Sencha Touch mobile web application
 
Introduction to Adobe Flex - Zaloni
Introduction to Adobe Flex - ZaloniIntroduction to Adobe Flex - Zaloni
Introduction to Adobe Flex - Zaloni
 
Building Cool apps with flex
Building Cool apps with flexBuilding Cool apps with flex
Building Cool apps with flex
 

Último

Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
panagenda
 

Último (20)

ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
 
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
 
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonData Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt Robison
 
A Beginners Guide to Building a RAG App Using Open Source Milvus
A Beginners Guide to Building a RAG App Using Open Source MilvusA Beginners Guide to Building a RAG App Using Open Source Milvus
A Beginners Guide to Building a RAG App Using Open Source Milvus
 
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost SavingRepurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
 
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...
 
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin WoodPolkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
 
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a FresherStrategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a Fresher
 
MS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectorsMS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectors
 
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
 
AWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of TerraformAWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of Terraform
 
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, AdobeApidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
 
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
 
MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024
 
Artificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : UncertaintyArtificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : Uncertainty
 
DBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor PresentationDBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor Presentation
 
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone ProcessorsExploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processors
 
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
 
AXA XL - Insurer Innovation Award Americas 2024
AXA XL - Insurer Innovation Award Americas 2024AXA XL - Insurer Innovation Award Americas 2024
AXA XL - Insurer Innovation Award Americas 2024
 

Replicating the iPhone Swipe Gesture – auto scrolling feature

  • 1. Replicating the iPhone Swipe Gesture – auto scrolling feature For 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 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. Code implementation I will quickly walk through the changes that I have made to the code. I have picked up the code from my last post, so this code is the looping/circular gallery code and I have built on top of it. Let’s start. Firstly, I have introduced some customization variables at the top of the script as shown below, intervalObj:null,
  • 2. autoInterval:3, //1-1000ms, 2-2000ms , customize as per your need autoPlay:true, autoDirection:"l", //l- left, r-right pauseAutoPlayOnInteraction:true, The variable names itself reveal their purpose and should be fairly easy for you to understand. But nevertheless let me start with the first one. intervalObj is the instance of the timer that I have used. I will talk about it later. autoInterval is the time interval between 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 it loads. autoDirection specifies the direction of scroll. Only two have been possible for me till now. And then we have pauseAutoPlayOnInteraction which specifies whether we should stop the auto play when a user interacts with the gallery. A value of false for it does the opposite. Now let’s see what other changes have been made. I have introduced a function that does the implementation logic. auto: function() { if(swipey.autoPlay) { if(swipey.autoDirection) { switch(swipey.autoDirection) {
  • 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 object format where I have all my logic inside a custom object, mainly to prevent conflicting with other objects. You can see my previous post to find out more. Now coming back to the function, the logic implemented is very simple. I first check if autoPlay is true, and then check if autoDirection is defined and then based on the direction I create a time
  • 4. interval which calls the moveLeft() or the moveRight() functions periodically. This keeps on 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 in this post. So, you can set whether to stop the auto play after user interacts. I did introduce a variable for that - pauseAutoPlayOnInteraction . If this is set to true then when the user interacts with the image gallery it stops the autoplay. So this is implemented in the startHandler() event handler method. The following lines take care 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 and begin: 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 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
  • 5. 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) Common code and example for mobiles and computer browsers - 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. 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 about a circular swipeable gallery. So the images keep on looping. The tutorial also includes a new demo. Read it here.