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 »

Advertisements

Adobe Shadow is now Adobe Edge Inspect

In a major move on the 24th of September, Adobe has renamed Shadow to Adobe Edge Inspect and now it has become a part of the Adobe Edge Tools and Services : http://html.adobe.com/edge/
Shadow had been a great success for mobile web developers and designers to remotely debug applications on the mobile device in real time. I had been using the preview version of Shadow for quite a time and has found it really useful, the last one being the Shadow Labs Release 4. So now the preview period of Shadow is ending on the 31st of October and after that Shadow will be invalid. Instead you have to download Edge Inspect and start using it.
You can get Edge Inspect by signing up for a free Creative Cloud membership subscription or a paid subscription. Get a account for yourself at: https://creative.adobe.com/join/starter. The free version allows only one device to be paired with your computer while the paid full version allows multiple devices to be paired simultaneously with your computer. Here’s a video demonstration on the new Edge Inspect release

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 »

WEINRE – Web Inspector Remote Video by Patrick Mueller

Patrick Mueller is the man behind the Weinre tool – remotely inspect and debug mobile web applications. Here is a video of him talking about Weinre at PhoneGap Day US 2012.

If you would like to know more about Weinre and how to debug mobile web applications I have a few post on it. You can start from here.

And if you do not like setting up Weinre and working with servers you can have a look at Adobe Shadow which is a tool developed by Adobe on top of Weinre, functions similarly but you do not have to set up the dirty part. You can start from here.