The biggest shortcoming of my flip-counter script is the difficulty in modifying the appearance of the counter; any styling change requires altering 70 different sprite states. The best way to make the counter's appearance easily customizable is to get rid of the images entirely, and that was the goal of this experiment.
My first step when thinking of ways to create scrollable content was a Google search that lead me to a (now dead) post outlining how to use jQueryUI Slider to scroll a div. This solution required altering the jQueryUI source, which I felt was unnecessary, so I came up with a simple solution.
I noticed yesterday that Apple has a new product nav menu that replaced their old horizontal scroller with some new animated candy. I was impressed to see that all transitions and animations are CSS-based. Unfortunately, it will take some time before all major browsers even support this cool new CSS wizardry. Never fear—you can create a similar menu with jQuery that works in every browser, even IE6.
My original post detailing how I recreated Apple's flip-style counter is a popular one, and I get many questions about how to properly implement it. It didn't take long before I saw some shortcomings to the original technique I used, so I thought it was time to revisit the counter and make some improvements.
I'm a big fan of using sprites for navigation menus. While they don't offer the flexibility of a solely HTML & CSS menu due to the fact that you have to create a new graphic every time you want to change a menu item, sprites do offer you infinite styling possibilities. Apple's website is a well-known example of sprite-driven navigation, so I'll use that as the inspiration and walk through how to create something similar.
I've been in the position of having to take an unnormalized database that had virtually no data validation or standardization in place, and migrating it to a normalized schema. I used regex to help me through the process.