Article
Billy writes for SitePoint.
Creating a Cross-Browser Scroller using DHTML
There's something about text moving across the screen that fascinates people. Since it was first possible to create moving text in a webpage using JavaScript, countless so-called scroller scripts have been created. Have you noticed, however, that most of them are limited to scrolling the text either inside a textbox, or status bar? Click here to see a scroller that scrolls text inside a textbox.
Not that there's anything wrong with textboxes or the status bar, but personally, I like my text scrolled all by itself, not wrapped inside any other element. In other words, a "true" text scroller. Is it possible? Apparently, yes. After a couple of weeks of searching, I finally found some working scrolling text examples on the web, and in the process, learned for myself how to create them. In this article, I wish to share that knowledge with you.
I'm going to teach you how to create a basic, side-scrolling scroller using the DHTML features of IE4+ and NS4+. Click here for a demo.
Whether you're using IE4 or NS4, the scroller works equally well. Two completely different concepts are involved in the realization of it. Let's see for ourselves how to create a text scroller!
Scrolling the text in IE4
In IE4, it's actually very simple to scroll any text, thanks to a default tag supported since IE3: the <marquee> tag. Just wrap any text you want to scroll inside it, and off it goes:
<marquee>This is scrolling text</marquee>
In IE4, however, it seems you can now also put in HTML tags, and they will interpreted as such:
<marquee><big>This is a BIG scrolling text</big></marquee>
So that's that for IE4. If you're only creating a text scroller for IE4, you already know all there is to know. However, like many other people, I use NS4 to browse the web, so whatever you have planned for IE4 users, I would appreciate seeing it as well. Let's move on to see how to make the scroller work in NS4 equally, which is a little more complex.