How to detect the orientation of device at page load – iPhone

This is one situation which baffles me sometimes and I face this one regularly while developing mobile web apps – I want to know whether the device is held in portrait or landscape mode when the page first loads and then based on the result I change the look n feel. Remember landscape mode of the device is more wider and the screen width increases, so does the viewport width so you have to adjust your page layout accordingly.

Read More »

Return multiple values from a function using a JSON Object

Quick example of how a function can return multiple values using a JSON object.
Sometimes even a good developer gives a second thought on how to return multiple values from within a function to a script that’s calling the function. Let’s go behind the scenes and very briefly reveal the secrets.

JavaScript Object – JSON object – What is that?
A JSON object has a key-value pair structure. It is this feature that helps store multiple values in multiple corresponding keys within the JSON object. Not only that you can store multiple data types within one JSON object. Let’s see an example,

var json_object = {
  key1: "value1", //stores a string value
  key2: value2, //stores a number data type value
  key3:true //stores a boolean type value
}

Since you can store multiple values within one object so if you return this JSON object variable then you are also returning multiple values at once isn’t it. Let’s see how to do it.

Return a JSON Object

function func1() {
  var myObj = returnValues(2, "string");
  alert("Value1 returned: " + myObj.a);
  alert("Value2 returned: " + myObj.b);
}

function returnValues(value1, value2) {
  var newValue1 = value1 * 2;
  var newValue2 = "returned " + value2
  var return_object = {
    a:newValue1,
    b:newValue2
  };
  return return_object;
}

I have an example code above where the function returnValues() returns a JSON object to the function – func1(). Within func1() I am calling the function returnValues() and passing two parameters – value1 which is a number and value2 which is a string value. Inside returnValues() function I just manipulate the parameters passed to it and create two new values out of it. The two new values (newValue1, newValue2) are then assigned to two keys of our JSON object –  return_object. Finally the JSON object is returned by the function. This way I am passing a number and a string- multiple values and multiple types.
Now within func1() we can access the values passed to it by the accessing the object keys using the DOT operator. This is how to do it.

alert("Value1 returned: " + myObj.a);
alert("Value2 returned: " + myObj.b);

This way you can return as many values as you want.

360 degree Car/Product view for mobile web – iPhone

I thought of writing this post due to increasing number of search queries that I found out on my site stats. A 360 degree product view for mobile web is important now as lot of manufacturers are starting to move towards mobile web apps for displaying their products.
In two of my earlier posts I have already talked about a 360 degree product view for desktop browsers with examples – post 1, post2. For the 360 degree to run on a mobile browser I had to make some adjustments – make the sprite much smaller in size, add touch gestures. The rest of the concept is same. So, in this post I will talk on how to make the 360 degree for iOS devices (iPhone,iPod and iPads).
I have already discussed about the core concept of changing the position of the background image (sprite image) with the movement of the mouse in my earlier posts. And how it detects the distance moved and the direction of movement and based on that the car is rotated. So I will not go into it once again. You can refer my earlier tutorial. I will just talk a little on the touch gestures and how to convert the already developed example (from my earlier post) so that now it listens to finger gestures on the mobile device.
Before moving further you deserve a demo, open the following link in your iOS device browser and drag your finger over the car.

Demo link: http://jbk404.site50.net/360DegreeView/mobile/

360 degree car rotation in mobile safari

Read More »

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.

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 »