Replicating the Swipe Gesture iPhone Gallery for mobile web – images linked to URL

Just a quick update. I have made little changes to the original demo so that now the images are clickable or rather tap-able. So when a user taps on an image he is redirected to a URL. You can specify separate URL’s of your choice for each image. The default behavior of the swipe gesture and replicating it is still there. I have just added the feature of linking the images to URL.

Try the demo in computer or mobile browser (webkit based browsers only): http://rialab.jbk404.site50.net/swipegesture/common/

Tap/Click on any image in the gallery to open a URL. Also you can swipe on the images.

What are the changes made?
On the HTML side, I added the URL’s to the <img /> element in the index.html file, I have added a custom attribute link.

<li>
<img src="img/1.jpg" width="100%" height="100%" link="http://www.google.com"/>
</li>
<li>
<img src="img/2.jpg" width="100%" height="100%" link="http://www.yahoo.com"/>
</li>

Similarly, all the other <img /> elements have a link attribute that specifies the URL to redirect when user taps on that particular image. Note that link is a custom attribute. You can add custom attributes to HTML elements.

On the script part
This is where a little understanding is required. In my previous posts – part1 and part2 I have discusses in details about the swipe gesture and how using touch events I have managed to achieve it. If you see the JavaScript code, I have registered touch events that listen to the user’s finger movements. So if you notice a swipe gesture is actually a combination of

Swipe Gesture = touch start + touch move + touch end

It is only in the touch end event listener that we manipulate the net distance moved and based on that we swipe the images. Now, since we also need a tap/click to URL feature for each image so if you directly add a redirection code in either touchstart or touchend event listeners then every time you try to swipe it will take to to a URL. And then even the swipe is affected. So as soon as you start to swipe it, it will redirect you to a URL, which is exactly what we do not want. Now, if you notice a tap event it is a combination of,

Image Tap (Tap to a URL) = touch start + touch end

So there is no touch move in a tap event for an image. So this is the concept that helps in making the Swipe as well as the Tap to URL work together. When a user swipes across the screen he is actually covering some net distance, so your start point is not same as the end point. But when you tap on an image your start point and end points are same before you release your finger. Hence in a tap the net distance is zero. So based on that I made changes to the event handler for touchend event in the script file,

swipey.wrapper.addEventListener("touchend", swipey.endHandler, false);

And then in the endHandler method I added this,

if(swipey.distanceX == 0) //if the intention is to tap on the image then open a link
{
  var link_url = event.target.getAttribute("link"); //read the link from <img /> element
  window.open(link_url,"_blank");
}

This checks if the net distance is zero. And if it is so, then it reads the link attribute value and then redirects the user to the URL specified by link.

To open links/URL in same window or page – use _self instead of _blank in window.open()

This is it, now the code is capable to handling both user swipes and user tap/click to URL. You can checkout the demo. To download the code follow the link given below.

Download code
You can download the source code here.

Updates/Other related posts
1) Creating a swipe gesture gallery – My initial post on the topic. You can start here.

2) 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.

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.

5) Auto scrolling swipe gesture gallery – Sometimes users may want a auto scrolling gallery along with the normal swipe gesture feature. I have a new post with a demo. Read it here.

Advertisements

Replicating the Swipe Gesture iPhone Gallery for mobile web– HTML5 – flickering issue fixed

The swipe gesture image gallery that we talked about in one of the earlier post had a strange flickering issue. There was a slight flickering of the image that was being swiped along with the movement of finger. I observed the flickering mostly in iOS devices – iPhone, iPod touch and iPad’s.
After a lot of head scratching and looking around in forums I finally got a solution. One of the guys (he is divine for me now) in StackOverflow suggested to add two lines of CSS to all the elements that moved using CSS3 transition. I tried it out and guess what, it worked!. I just added two lines to the CSS style for the images. This is what solved it,

#wrapper ul li img
{
  -webkit-backface-visibility: hidden;
  -webkit-perspective: 1000;
}

Add this style block to the CSS file and the issue will be a gonner. The link to the fixed demo is below (I have merged the fix with the original demo. So there is no separate demo). Check out in an iOS device’s browser. Note that the demo’s run in an Android browser as well. But I observed the flickering in iOS devices only.

http://jbk404.site50.net/html5/mobile/swipey/mobile_version/

Also try removing the above CSS lines and checking out the demo again. You will notice flickering.

Updates/Related posts

1) 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.

2) 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.

3) 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.

4) Auto scrolling gesture gallery – Sometimes users may want a auto scrolling gallery along with the normal swipe gesture feature. I have a new post with a demo. Read it here.

Coverflow animation using CSS3 3D Transformations – Part1

Update
1) Coverflow for iOS with touch gestures: Sneak Peak at the touch gesture enabled Coverflow for mobiles(iOS) is ready. Have a look at it here. There is a demo and download link.

Back to the actual post:
Recently I worked on the famous Coverflow animation using CSS3 3D Transformations, and I must tell you that the results were very impressive. I was actually working on a mobile web version of the Coverflow animation meant for iPhone,iPod, Ipad. Well, I am still working on it and finishing on adding touch gestures to the animation.

Disappointingly, Android device’s web-kit browser does not support CSS3 3D animations as of now so the coverflow that I am trying to build is not working on Android devices. However, I read it somewhere that the next version-Android 3.0 will have support for it. So till then I could support only iOS device’s web-kit browser.

In this post I am presenting a desktop version of the Coverflow (no touch gestures). Right now it runs only in Safari. I must tell you once again that the app I built is mainly meant for web-kit browsers (since iPhone’s and Android’s run web-kit browsers). I have the link to the demo app below,

Demo: http://jbk404.site50.net/css3/coverflow/ (See in Chrome or Safari for best results)

Click to see demo

The demo has only 7 images as of now and the code has pre-defined values in it but it is fully functional. I am working on making it more dynamic so that any number of images can be used. I am finishing up on some nuances of the app and refining the code further, and till then I am posting only the demo. I will talk about the code in details later (very soon). Also I will come up with a part2 of this tutorial series where I will talk about the mobile version with touch gestures.

For the full code you can view the source of the demo.

Here are some of the features of the desktop version of the demo,

  • Click on any image to bring it to the center.
  • Use the previous and next button to see other images.
  • Image Reflections using CSS3 reflections.
  • CSS3 3D Transforms as I have already mentioned. This gives 3D look and feel.
  • Smooth movement of images using CSS3 Transitions.
  • No third party library or plugins. I have used pure CSS3 and JavaScript.

You can use the code and build on top of that.

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 »

Cool modal Popup window with fade effect for mobile web – CSS3 and JavaScript

In this tutorial I will talk about creating a very cool modal popup window for iPhone and Android using CSS3 and Javascript. The modal popup window will display a message with fade-in and fade-out effect. It will also have drop shadows, rounded corners, gradient background which I will apply using the latest CSS3 techniques. I have a demo app already created. Click on the Launch PopUp button to open the modal window and then tap outside the modal window to close it.

Link to demo: http://jbk404.site50.net/css3/modalwindow/

The app is meant for mobile web and you can view it in iPhone/iPod or Android or even Blackberry mobile web browsers. But nevertheless you can check it out on Google Chrome and Safari which are web-kit based browsers, in your computer.

Modal PopUp window

Read More »

Replicating the Swipe Gesture iPhone Gallery for mobile web– HTML5 – Part 2

Updates

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.

5) Auto scrolling gesture gallery – Sometimes users may want a auto scrolling gallery along with the normal swipe gesture feature. I have a new post with a demo. Read it here.

6) Vertical swipe gesture – for a vertical swipe gesture gallery check out this post. It has a new demo and explanation on how to swipe the images in y-direction i.e up or down.

Now, back to the actual post – 

Gesture Interaction – The JavaScript code
By looking at the java scriptcode you might have a question in your mind that this time I have used a different way of writing my javascript code. What I have done is that I have created a self calling function and I have defined an object (swipey) inside the function and finally exposed the object to the window object (window.swipeyObj = swipey) so that I can call the properties and methods of the swipey object anywhere after including the javascript file to our library. Ofcourse there are several other ways to execute the same, but this way it maintains the scope of the properties and methods of the object.

Let’s go straight to the swipey object which follows a JSON pattern. Inside the swipey object we have defined a series of properties and the methods. Think of it as a Class, but there are slight differences between a JSON Object and a Class. We will not go into that at the moment. The basic structure of swipey object is shown below,

var swipey = {
                property1:value1,
               property2:value2,
               ……………
                method1:function(){},
                method2:function(){},
                ……………
};

To access a property we write swipey.property1 and to call a method swipey.method1().Ok, that’s quite a brief description of a JSON object.Also, at most places I have provided comments for understanding. Now, the initSwipey() method defines some basic operations which is simple enough to understand. window.scrollTo(0, 1); is for hiding the address bar of the browser to give the app a native look. I have already talked about it in details in my earlier post,  here. One thing to be noticed is the line below,

swipey.slideContainer.style.width = swipey.slides.length * swipey.preferredWidth + "px";

Read More »

Replicating the Swipe Gesture iPhone Gallery for mobile web– HTML5 – Part 1

Updates

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.

5) Auto scrolling gesture gallery – Sometimes users may want a auto scrolling gallery along with the normal swipe gesture feature. I have a new post with a demo. Read it here.

6) Vertical swipe gesture – for a vertical swipe gesture gallery check out this post. It has a new demo and explanation on how to swipe the images in y-direction i.e up or down.

Now, back to the actual post – 

In this tutorial we will talk about building up a Swipe Gesture photo gallery for iPhone, iPod using web technologies – HTML5, CSS3 and JavaScript. To begin with, you might have viewed pictures in your iPhone or iPod photo library and may remember how you used to swipe your finger across the screen of your device to view the next or the previous image in the gallery. The same thing we are going to replicate and make a mobile web app. Our app will run full screen on the mobile safari browser so this gives it a native look n feel. The features of this mobile web app replicate the iPhone photo library’s default behaviors,

  1. Gently swipe across the screen left or right to view the neighboring images.
  2. Flickering of images. Swipe across quickly to view neighboring images. I say it harsh swipe across the screen.
  3. Current Image comes back if you do not swipe it enough across the screen.
  4. When the beginning or end of the list is reached, no matter how much you swipe the image always comes back.

First, view a desktop version of the demo to get a feel, drag your mouse over the picture left or right to view other images and try out the features that I have just talked about (View in web-kit browsers – Chrome or Safari): http://jbk404.site50.net/html5/mobile/swipey/

The same thing we are going to replicate for the mobile device. Now, our app is targeted for mobile web kit browsers so it will run even on Android browsers.  That’s the good thing about a mobile web app, write once run everywhere.

Below we have two images of the app running in my iPod Touch,

An image/slide showing up in portrait mode
An image/slide showing up in portrait mode
Changing of slides
Change of slides when swiping

Read More »

Announcing my HTML5 Mobile Portfolio Website

I am happy to announce that I have completed  my mobile web portfolio site. Let me call it my personal mobile web app. The  app is meant for iOS devices (iPhone and iPod) and Android device. It is built purely with HTML5, CSS3 and JavaScript and is targeted for the mobile web-kit browsers. Some of the main features and highlights of the app are listed below.

Link to the mobile app: http://jbk404.site50.net/joseph/mobile/. Remember to open it in your mobile browser.

Features:

  1. Built using HTML5, CSS3 and plain JavaScript.
  2. No Sencha Touch. Have not used it for my app.
  3. Full Screen App. So URL bar is hidden
  4. Both portrait and landscape mode supported. I have used simple CSS and JavaScript techniques for it.
  5. Hardware accelerated CSS3 transitions used for navigation
  6. Ajax Data Loading.
  7. iPhone look and feel.
  8. Remote domain data load by using PHP and Ajax.
  9. Percentage widths used for auto adjust.

Below are some of the screenshots of the app from my iPod touch,

The home page in portrait mode
The home page in portrait mode
Blog Posts in portrait mode
Blog Posts in portrait mode
About page in landscape mode
About page in landscape mode

The app will even run fine on desktop web-kit browsers such as Chrome and Safari.

Here is the link to the app: http://jbk404.site50.net/joseph/mobile/ . Try opening it in your iPhone/iPod or Android smart phone’s web browser.  If you do not have one try it out here http://www.iphonetester.com/.

Writing a full screen mobile web app for mobile devices

Here I talk about writing a full screen mobile web app for iPhones/iPods (320 x 480). But similar concepts can be applied to any mobile device out there. Read the post below,

This is one particular post that I was trying to pen down for some time now. I believe for beginners who are stepping into mobile web development, creating a full screen mobile web app and hiding the address or the URL bar of the mobile browser can be a little irritating and kind of mystified at times. In this tutorial I will discuss how to build a full screen mobile web app using pure javascript. I will not be using Sencha Touch or any other mobile web frameworks here. Before reading through, check out the demo app  in an iPod or an iPhone and notice how the URL bar gets hidden to reveal more of the viewport.

The Viewport
The main idea behind a full screen mobile web app is to hide the Address/URL bar so that the app looks like a native app and occupies the most of the space available within the browser window. Note that we are talking about a mobile web app and your app will run in the browser of your touch device.

Now, what is a viewport? Seems like a word that you might have heard before. Well, the actual visible area to the user that is available for the app is the viewport. Below is an image of my iPod’s mobile safari browser window in portrait mode. I have pointed out the labels and the sizes of each of the components. The dimensions are same for the iPhone as well. In portrait mode the resolution is 320 x 480 pixels. You can see from the image that in portrait mode the viewport is only 356px in height. The Status bar and the Button bar cannot be hidden from the user and will always be displayed. So, at the best we can hide the URL bar from the user to make the app look like a full screen app and give it a native feel.

Dimensions in portrait mode - 320 x 480
Image1: Dimensions in portrait mode

Read More »

CSS3 Expandable-Collapsible Panel for iPhone

Many of you might have worked upon or have used a collapsible panel in one of your projects before reading this post. And the best chances were that the collapsible panel core logic was developed using traditional methods of animating HTML objects using the setTimeout() or the setInterval() methods. Here I have listed down a quick example of building a collapsible/expandable panel using the latest CSS3 technique of transitions. Of course, you have to use a little bit of java script for handling the style elements dynamically. This example is mainly focused on iPhone (iOS) and Android touch devices and targets the mobile web kit browsers. You can also use the same code for desktop web kit browsers such as Chrome and Safari, and a little generalization of the code would let you use the application for all the other browsers supporting the newer CSS3 style rules (e.g. latest version of Firefox). Check out the images below, of the application in portrait and landscape mode of my iPod. And here is the link to the demo app, check in Safari or Chrome.

http://jbk404.site50.net/html5/mobile/collapsiblepanel/

Portrait
Expanded in portrait mode
Collapsed in portrait mode
Landscape mode

Read More »