Wednesday, April 28, 2010

Simple horizontal text scrolling with Ext Core 3 (marquee replacement)

For one of my projects I needed to implement a line of scrolling text at the top or at the bottom of the browser window. One of the options was to use the non-standard marquee HTML element, which I rejected for obvious reasons. Plus, it didn't work very well - the motion was not smooth and there were too few options to customize its behaviour. So I decided to implement the text scrolling using Javascript.

 There are plenty of code examples on the web. In fact, it's fairly easy, you just need to update the text position using CSS properties. Since I'm used to the ExtJS framework i wrote a simple class using the Ext Core 3 library. Actually I didn't need the high-level features of ExtJS, but I wanted to take advantage of the cross-borswer support, that's why I used the low-level library Ext Core.