iTunes Store Album Browser Window function in HTML

Ok so I had a hard time figuring what to call this entry, so if I confuse many of you I apologize, but I did warn before that I am not a great writer. The reason for this entry is for a feature I was asked to do not to long ago and failed miserably at. The feature was to create a scroll area that was similar to iTunes album browse interface (pictured below).

Basically you have a content area that displays a certain amount of items and when you click on either the left or right arrow all the contents shift to show the new ones. This is easy to do in Flash, but I needed an HTML equivalent of it as this site was not in Flash. So first I set out to define the divs that would encompass this feature (picture below).

So what exactly is this above? Let me explain. The entire viewable area is what I defined as "frame" this will hold all the child elements such as the left and right buttons, the scrollable area ("scroller") and the content area ("scrollcontent"). Once this was set up I decided to use my favorite animation library (script.aculo.us) and javascript framework (prototype).

My first attempt I used was with the "Photoshop Masking" mentality. Basically, the scroller div would be a defined width div with overflow set as hidden and the content area would be wider child div displaying the content. The scroller div would act as the mask as I move the content area x position. This first attempt worked great on all browsers expect for GUESS WHO!? Yeap, IE. Every time I would call the animation the child div would go to the top level and the masking of the parent div would no longer be active. This only happened in IE and at the time I could not figure out why so I decided to go with another way to display the data. Of course, this drove me crazy and I needed to make it work, so eventually I ran into the "Panic - Coda" website, where they had implemented this exact feature. I needed to know how they did this, so I decided to inspect their javascript files.

I am not going to explain exactly how they did it all, instead I decided to take it to the simplest form. The example I created will allow you to go left and right with the arrows until you reach the beginning or end of which at that point the arrow that represents further scrolling will disappear (this is not available in theirs). Inspecting their files taught me the following.

• ScrollLeft: gets or sets the number of pixels that an element's content is scrolled to the left. This is what makes this possible as it can be used in divs where there is an overflow, even if it is set to hidden. There is also a ScrollTop property if you want to scroll vertically.
• The use of Robert Penner's Easing Equations, the source is in actionScript but is easily implemented as JavaScript functions/
• The use of setInterval in javascript - I had no clue, just like actionScript

Compared to my first draft, this new one actually never moves the position of the scroll content div, instead it changes the scroll position of the scroller div. This now works in all browsers! Yeah!

In the end I created 2 examples, one implemented by using part of Panic's Coda Website javascript functions (again simplified) and the second one using the Yahoo UI Library. I know I said I favored script.aculo.us but in the end I am a Coldfusion Developer and by what I heard some of the new ajax functions are using this library, so why not take it for a spin. I have to say the Yahoo UI Library is pretty freaking slick. Anyways, click below to view the example, the source files do good of explaining how everything works but if anyone needs help understanding just let me know and I will clarify.

Click to view Examples

Until next time ...