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

June 22, 2011 6:45 AM

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)

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