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 »

Sliding touch photo gallery for iPhone – HTML5, CSS3

This tutorial speaks about a simple sliding touch photo gallery for iPhone. The app is meant to run on the mobile safari web browser. We start off by looking at a demo first and then talk about the code in details. Note that the same logic and implementation will work even on Android devices, you just need to correct the dimensions/positions and place the elements according to screen resolution.

Demo Link: http://jbk404.site50.net/css3/slidinggallery/ (open in your iPhone/iPod or Android device’s web browser)

Gallery with the thumbnail images

The images used in the demo are not of great quality or appeal as I am not a Photoshop expert. Once you have cool assets you are good to go.

The demo is all about having two panels, one with the thumbnail images and the other panel with the corresponding bigger image of the thumbnail selected in the first panel. The two panels have been placed side by side – horizontally and they slide in and out of the viewport to give a sliding effect. The sliding of panels uses the same concept (using CSS3 transitions and transformations) that I discussed in one of my earlier post. Here in this tutorial I will not go into the details of how to create sliding touch panels. You can refer my previous post.Read More »

Controlling SVG Pie Chart with a slider control

I have already talked about creating a simple HTML5 – SVG pie chart in one of my earlier post. This time, I thought of adding some interactivity to the pie chart and came up with controlling the number of pie slices on the fly with a slider control. This tutorial will describe how to increase or decrease the number of pie slices/sectors in the pie chart by scrolling a slider control. I do not know why I tried this but this example might come to your rescue someday and then do not forget to thank me. Check out the demo,

Demo: http://jbk404.site50.net/html5/svgpie/

In Mozilla Firefox the slider control is not displayed, instead a text input is displayed. It works though, you can enter the value and press Enter to see the changes in the pie chart. Google Chrome and Safari works fine. This is how it looks in Chrome,

There is nothing much to describe here other than the code. You must have seen the demo till now. Let’s dive into the code.

Read More »

Sliding touch panels for mobile web – HTML5, CSS3

Update: Before you move further, if you are looking for a more responsive sliding panel, so when changing to landscape or re-sizing the browser window, the panels automatically respond without a browser refresh then you might want to look at it here (I have a separate post regarding this)

In this tutorial I will discuss about creating a sliding touch panel meant for mobile web apps. You must have seen, that in iPhone or iPod settings when you tap on a menu item the whole panel slides out and a detailed panel slides in. I am going to talk exactly on how to create something similar for iPhones and Android devices using CSS3 transitions and a little bit of java script. Even those who have worked with mobile web apps using Sencha Touch must be aware of sliding touch panels. Before moving on check out the demo on an iPhone or Android device,

Demo: http://jbk404.site50.net/css3/slidingtouchpanel/

You can check the demo in a desktop browser also – Google Chrome or Safari.

The concept
The concept is to have two equally sized panels horizontally laid out inside a wrapper container. The wrapper occupies the dimensions of the mobile device. The size of each panel is same as the wrapper. Now, the wrapper has overflow as hidden so you only see one panel at a time. Now that the basic set up is done, we just need to move the two panels left and right. The image below visualizes the things that I have spoken above.

Read More »

HTML5 – SVG Demographic Map Dashboard Example

The previous month I was busy with experimenting a dashboard which had choropleth/thematic maps, charts, interactivity, also dynamic data reading. Here is what I came up with. This one is a HTML5 based dashboard. Looks like a Flex application isn’t it? The map is of United States and the demographic data are just demo data although they are read from XML files. What’s good is that this application can scale, in the sense that the data can be fed to it by services running on remote servers and the map can display that. Also the data distribution has two categories a) Equal Distribution b) Quantiles method. Had to look up the statistic book again for these two. Play with the application and let me know if you like it.

The application is meant for computer browsers that support HTML5 Canvas and Inline SVG. You can best view it in Chrome, FF and Safari.

Click on the link or the image below to see the live http://jsphkhan.github.io/html5_svgmap/.


Note: The script code needs a bit of re-factoring. I am working on it partially due to time constraints. Once you have the code, you can modify it as per your needs.

FOr the source code you can grab it from the Git repo: https://github.com/jsphkhan/jsphkhan.github.io/tree/master/html5_svgmap