Although the title might imply that this is a blog dedicated to Mazda's 'Zoom zoom' campaign, I'm sorry to inform you, it is nowhere close. In fact, the only campaign this geek has been heading up is the 'why can't all browsers do the same thing' campaign. Heard of it?

I'll tell you what, my new saying for web development is '3 browsers and 12 hours later'. I've been working on this new little feature that emulates the iTunes Music Store's 'New Releases' section. Basically, it displays a few albums and you can click left or right to display more of them. There is this soothingly smooth scroll across the screen that I thought would be nothing more than some fiddling with the Prototype javascript library. Riiggght...easier said than done! First I gave Ajax a shot and had it working in about 2 hours in both Firefox and Safari. I didn't even have my clunky Windows desktop powered up yet. The first version of this effect displayed 4 albums and when you clicked 'next', those scrolled off to the left side of the screen and then 4 more scrolled on. Not too bad for a few lines of code and several dozen choice words aimed towards inanimate objects and browser developers.

After getting the 'next' functionality, I wanted it to scroll backwards just like on the iTunes store. Well, take the code, flip it and reverse it, and baam, there ya go...20 minutes of additional work.

Since it was somewhat still early, I instant messaged two of my buddies, Jason and Brad, who always seem to be kind enough to test my coding inventions. Well, Brad was trying it in Firefox...worked, well, sorta, like a charm. Then came Jason, Jason likes to use IE for some ungodly reason. Not only did it not work in IE, but the pictures didn't display, the albums didn't scroll, the whole thing just did a belly flop of mass proportion in IE. Seriously, it's like IE has this devious mind of it's own when it comes to trying to get under my skin.

Nonetheless, it was only 1:00am and I wasn't going to bed until I won the holy war with the infamous browser. Ten minutes go by, thirty more, how about 2 hours later I finally debugged the issue and it all came down to about 3-4 lines of CSS code. Let's just say that position: relative is your friend.

So around 3-4am, I finally hit the sack. Today, I've taken a different approach to this functionality and ditched Ajax, it wasn't worth it and was more confusing than useful from a user's perspective. Think about it, you are navigating through the albums and I'm playing songs...all of the sudden, you page through and albums just start changing, WTF. Instead, I decided to just have all the albums included on the page, but just hidden from the user except for 4 at a time. Still has the iTunes look and feel to it, and the same concepts apply.

Next up, ajax updating of recent tracks when I be jamming!

Current Rating: 5.0 rating from 1 vote

  • Current rating is 5
  •  
  •  
  •  
  •  
  •  

No Responses to "Music Go Zoom Zoom"

Comments are Closed

Name: (Required)
Website:
Comment:
Remember my info