Code » Javascript » DOM Marquee
The <marquee> tag is not part of the HTML specification, it was invented by Microsoft and gradually over time support for displaying it has been built in to newer browsers. But if you want to scroll content on your webpage and use the marquee tag, the page wont validate. The solution is to use javascript. For browsers that dont support javascript or the DOM the page will remain static.
Usage
First you need to put this in the <head> of the document,
<script type="text/javascript" src="/scripts/scroller.js"></script>
where /scripts/ is replaced with the location of the file on your server. The basic method of creating a scroller is to create a script with the following form
<script type="text/javascript">
Scroller.init("scroller", 200, 250, "up");
</script>
This creates a scroller with width of 200px, height of 250px and scrolls it upwards. The first parameter "scroller" is the id of the element to turn into a scroller. It can also be a reference to an object, for example
<script type="text/javascript">
Scroller.init(document.getElementById("leftscroller"), 500, 50, "left");
</script>
or
<script type="text/javascript">
Scroller.init(document.getElementsByTagName("p")[0], 200, 250, "down");
Scroller.init(document.getElementById("slide"), 250, 250, "up");
</script>
The last parameter is the direction and can be one of "up", "down", "left" or "right".
Each scroller is also given a unique ID so you shouldn't have any trouble styling them to fit your page.
Details
The script works with Firefox, Internet Explorer 6
and Opera 7 on Windows but it should degrade gracefully display static html on any non script enabled or older browser.
Demo
If you want to view a live demo of the script, view it here, scroller demo .
Download
posted by Chris
8 July 2006