Wednesday, February 10, 2010

Extensions to jQTouch

A few months back I discovered jQTouch by Dave Kaneda, which is a pretty amazing framework for building mobile WebKit based web apps. It's still in beta, but the animations are very robust, and it is easily extended. And so I set out to write a few extensions that would make jQTouch act more like a native iPhone app.

My initial goal was to write an extension that would enable the same type of horizontal scrolling of images that you see in Apple's App Store. But all I could find on the internet was a vertical scrolling div example by Matteo Spinelli (he has since updated the class to include multi-directional scrolling, sort of a drag feature). This appeared to emulate the 'flick-to-scroll' that makes iPhone apps so useful for mobile computing (IMHO), and had the added benefit of allowing the simulation of a fixed position toolbar. I integrated Matteo's scrolling div into an extension of jQTouch so that the functionality would appear seamless, and allow a designer/developer to simply add a few classes to their creation in order to implement the functionality.

But vertical scrolling wasn't what I was looking for, so I started fiddling with Matteo's script to see how it worked, and how I could alter it to enable horizontal scrolling/sliding. So, after figuring out that Matteo was using WebKit's -webkit-transform CSS property and the translate3d function to animate the changes expressed by a touchmove event, I figured, 'Why can't I just change that to use the translateX function instead?' And after hours of tinkering, I finally got that working too after adjusting the acceleration part of the scrolling divs touchend event.

While I was working on this however, I realized that Apple didn't just scroll right and left, they slid. So I created a different version of the same script that implemented a 'snapTo' method to find the next slide frame in the horizontal or vertical scrolling container. I also added a scaling gesture extension in hopes to one day implement a more robust photo gallery like the native iPhone photo gallery.

One day I will find the time to improve these extensions further, but for now you can find the source code and a few examples at the Google code project that I set up for them, I call it jqextensions.

1 comment: