Simulate an MP3 Player Display with jQuery-AnimateOverflow


IMG_0008[1]I’ve been working on progressive enhancements to a web-controlled Pandora client called Pidora.  In the process of wrangling the code, I discovered that there was really no good way to display long song titles/artists/albums.  They either take up a varying amount of screen real estate, which throws off designs, or they get cut off, effecting readability.

To solve the problem, I decided to emulate the behavior of old MP3 players, and programs like WinAmp, by limiting the title to a single line, then scrolling it across the page.  I considered using marquee tags to accomplish this, but the results would have been horrifying, and would have affected all titles, whether they needed it or not.  Instead, I created a jQuery plugin that I call AnimateOverflow.

The plugin takes any group of block level elements, converts them to single line boxes, and, if the content is larger than the box, applies an animation to sweep through the content.  Currently the plugin supports the two most common animations from old MP3 Players: linear and ping pong.

Check it out:
Demo | Download

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>