CSS trick mimics sideways-flicking behavior in MobileSafari

Ajaxian has posted a ridiculously simple way to enable web apps to mimic the iPhone's side-to-side flicking behavior using custom CSS supported by MobileSafari. If you're creating a web app specifically for iPhone and iPod touch users, you can get a similar feel to a native application with MobileSafari.

MobileSafari includes some CSS 3 support, including advanced DOM selectors and support for animations and transitions. Chances are, other browsers will have limited support for CSS 3 draft standards, and whatever you write probably will only work in MobileSafari and Safari 3 on the desktop.

The test application in this movie shows how it tracks finger movements across the screen, and performs actions based on the distance "swiped." Very nifty.

[Via Cameron.io.]

View Tags

Source: http://ajaxian.com/archives/iphone-safari-flick-navigation-b…

Categories

iPod Family Tips and tricks Developer iPhone

Ajaxian has posted a ridiculously simple way to enable web apps to mimic the iPhone's side-to-side flicking behavior using custom CSS...

Add a Comment

Sign in »

8 Comments

Filter by:

Matthew Congrove

Brandon - This is an upgrade to the iPhone's Mobile Safari that enables the WebKit CSS3 transitions and adds touch events to JS. Essentially it's an upgrade to all three. This is not currently supported by 'normal' Safari, as far as I know, but I don't think it would take a lot to implement. I also don't think that it's evidence enough for any rumors about touch-enabled laptops or tablets; the CSS transitions are coming out of WebKit (and have been for a long while), while the touch events are, well, because it's an iPhone ;)

August 14 2008 at 6:38 PM Report abuse Permalink rate up rate down Reply

Adam Wolf

This is bad-ass Robert, thanks for the post.

August 14 2008 at 12:10 PM Report abuse Permalink rate up rate down Reply

Brandon Rotkel

I know the mobile version of Digg (http://m.digg.com) has had animated transitions since they launched the site for the original iPhone almost a year ago, but I don't think I've seen any sites that made use of gestures like swiping. Is that part of the iPhone, CSS, or Safari 3; I'm a little unclear on that from the article? If it is a new part of Safari, that may be evidence of it being a built-in feature for new multi-touch enabled laptops or - gasp - an Apple Tablet PC!

August 14 2008 at 5:04 AM Report abuse Permalink rate up rate down Reply

Fritz Laurel

Pretty cool. Nice work!

August 14 2008 at 2:26 AM Report abuse Permalink rate up rate down Reply

Andy

Nice. A good addition would be the soft rebound you get when you reach the last item on the page, like if you try to scroll off the edge of a regular safari page.

Well done!

August 14 2008 at 2:01 AM Report abuse Permalink rate up rate down Reply

Matthew Congrove

Yes, this will only work for iPhones with firmware 2.0 or above. The CSS3 transitions, as well as the new Touch events, are both part of that upgrade.

I've been messing around with this script over the past week and have run into some issues that Apple didn't take care of very well; will be posting an update to the article tomorrow.

Thanks TUAW for posting this =]

August 13 2008 at 11:59 PM Report abuse Permalink rate up rate down Reply

Patrick

I'm not positive, but I think this will only work with the 2.0 update.

August 13 2008 at 11:45 PM Report abuse Permalink rate up rate down Reply

Ryan Imel

That looks pretty slick. I'll have to try it out.

August 13 2008 at 10:23 PM Report abuse Permalink rate up rate down Reply