[JS] Scrollers

[p01]

Recently CLANKY asked about scroll texts in JavaScript. As this might be interesting for others, I figured this discussion deserves its own thread so the informations are easy to find.

The basic idea behind scroll texts using web standards relies in CSS.

First you need a container in non static position ( i.e.: in absolute, relative or fixed ) and overflow:hidden so that it will allow to position and clip the nested content. Which content is in position:absolute; Finally initiate the regular update of the position of the content using a setInterval( functionHandle, delay );

The offsetWidth and offsetLeft properties returns the width and left respectively of an element. Use them to place the content as you wish within its container.

Check out the attachement to see a Scrollers manager ( working in IE, Opera, FireFox and Safari ) able to handle any number of scroll texts with custom types of scroll. Notice it's one out of many ways to do that, also the code can be enhanced to allow certain tags ( e.g. img, strong, em, ... ), user interaction, callback when a certain position is reached, ... Candies, karma, credits and/or  a notice would be appreciated if someone uses this tiny Scrollers manager. 


Hope that helps,

[Shockwave]

Nicely written code there, thank you for posting it K+

[benny!]

Thanks for posting. Cool code as always. Thumb up !!!