slayeroffice - web experiments gone horribly awry

04.26.2004 - Scrolling & Expanding List

Another flash inspired project for you today, the Scrolling & Expanding List. I'm not able to point to anything specific, but I know I've seen this done in Flash before. Either that or I saw it done in DHTML and am subconsciously re-efforting someone else's work...but then this wouldn't be the first time.

At any rate, this project follows along with my new goal of applying interesting behavior to standard markup. This takes a regular list of twenty items, places them in a 60 pixel tall container element with a hidden overflow and allows for scrolling the data up and down in a sort of "bouncy" manner, as well as expanding the list in a fluid, animated motion.

In lesser browsers and web enabled devices such as my fancy new Nokia 6800 (which by the way is not nearly as shiny as those photos make it out to be) it renders as a normal list, though the phone does make a rather impressive effort at interpreting the CSS. If javascript is disabled, it renders the styled list fully expanded.

Tested and works in Netscape 6+, Opera 7+, MSIE6, MacIE 5.2, OmniWeb 4.5, Firefox, Mozilla and Safari. I'm only able to test in Safari 1.0 and it has issues with the expanding bit, as does OmniWeb, though I'd like to think that later versions have a better time with it. I've no idea how Konqueror feels about it as my video card in that box has apparently died.

Comments have been closed for this post.