360 degree car rotation – common code for mobiles and computer browsers

I had been updating my examples and tutorials off  lately and trying to create a more general approach to application development – Write a single app that runs in mobile browsers as well as computer browsers. Following the same approach, this time I am updating one of my previous tutorials – 360 Degree Car/Product rotation for iPhones. So, I worked on a 36o degree car rotation code that runs in both mobile and desktop browsers.

This tutorial is an update to my previous one, I also present a new demo. I will not go into the details, which I have talked about in my previous tutorial. Have a look at the demo, open it in either an iOS browser or a computer web-kit browser.

Link: http://jbk404.site50.net/360DegreeView/mobile/common.html

360 degree car rotation in mobile safari

What are the changes?

All the changes are in the javascript code. I have introduced a device detection mechanism and then automatically assign either touch events (for mobiles) or mouse events (for computer browsers). These are the same changes that I have recently talked of in my last post – Replicating the iPhone Swipe Gesture — common code for mobiles and computer browsers. That should help you out.

Other than that just try the example link in a computer web-kit browser – Chrome/Safari or an iOS device browser which is also a web-kit browser. Android devices need some changes and the same code might not work. I have talked on this in my previous post.

For the code, right click to view the source.

A look at iScroll – native way of scrolling content in mobile webkit

Mobile web kit browsers do not allow you to scroll content inside a fixed size container or a div element. If you are a mobile web developer developing apps for iPhone and Android, you must have faced this problem before. If you use overflow:auto or overflow:scroll and expect to scroll the overflown content then you would rather see your entire web page being scrolled vertically. This happens because it is the default behavior of DOM touch events to scroll the page.

Just to overcome this problem I recently came across a javascript library iScroll which allows native way of scrolling content inside a fixed width/height element for mobile web kit browsers. So using iScroll you can have a fixed header/footer with position:absolute and a scrolling central content area.

iScroll uses hardware accelerated CSS3 transitions and transformations to scroll the content and it behaves exactly like the native way of scrolling in iPhone apps. iScroll is very easy to use – download the iscroll javascript library (which is available for download in the home page) and call it in your html page. Then set up your HTML and CSS and you are good to go. Latest version of iScroll at the time of writing this post was iScroll4, so you can download the library and use that. iScroll4 also supports a whole lot of other features like pinch-to-zoom, pull-to-refresh e.t.c to make mobile web development easier. I will not go into the details of iScroll as the site has all the necessary information and is very well documented. I believe you will find everything there to get you started in 5 mins.