Join 3,425 readers in helping fund MetaFilter (Hide)


How can I code an animation that goes through different parts of an iPad-optimized web page?
June 22, 2011 6:45 AM   Subscribe

How can I code an animation that goes through different parts of an iPad-optimized web page?

I'm building an iPad-optimized web page with a grid of products and features like this:
                -----------------------------------------------------
    Product 1:  |   Feature 1.1   |   Feature 1.2 |   Feature 1.3   |
                -----------------------------------------------------
    Product 2:  |   Feature 2.1   |   Feature 2.2 |   Feature 2.3   |
                -----------------------------------------------------
    Product 3:  |   Feature 3.1   |   Feature 3.2 |   Feature 3.3   |
                -----------------------------------------------------
Only one feature should be visible at a time.

I need to swipe vertically to switch between products, and swipe horizontally to switch between features. I'm pretty sure I can use jQuery Mobile to do that. Ideally swiping vertically would go to the same feature in the next product.

I also need to have an autoplay feature that starts at Feature 1.1, goes to 1.2 -> 1.3 -> 2.1, and so on until it gets to 3.3 and loops back to 1.1. What's the best way to do that? Maybe jQuery.ScrollTo?
posted by kirkaracha to Computers & Internet (2 answers total) 1 user marked this as a favorite
 
I am just starting research for a similar project, so I haven't tried it myself yet, but iScroll seems like it should work for the touch navigation.
posted by firefleet at 9:06 AM on June 22, 2011


I ended up using jQuery.ScrollTo, which worked out pretty well.
posted by kirkaracha at 3:19 PM on July 29, 2011


« Older I need to take notes in a movi...   |  This is the thread where you t... Newer »
This thread is closed to new comments.