Categories:
Partners

Scripting the marquee

The thing to realize when it comes to scripting the <marquee> is simply that all of it's attributes are read/write, ready to change at a moment's notice from JavaScript. However, since only IE 4+ recognize these attributes as JavaScript properties, remember to add browser detection code when accessing them. Ok, to conclude this tutorial, here are a couple of examples illustrating the interaction between <marquee> and JavaScript.

-Marquee that slows down when the mouse is over

Here's a regular marquee with a useful twist- it slows down for the user to better interact when the mouse is over it:

Scrolling text here. Scrolling text here. Scrolling text here.

Source Code:

<marquee onMouseover="this.scrollAmount=3" onMouseout="this.scrollAmount=6">Scrolling text here. Scrolling text here</marquee>

The scrollAmount property is used here to manipulate the marquee's speed, depending on where the mouse is.

-Marquee with start/stop button

Why not give your visitors the ability to determine for themselves when the marquee should scroll and not scroll?

Two wrongs don’t make a right. -Cheales

A bird in the hand is worth two in the bush. -Heywood

The opposite of love is indifference. -Erin

All is well that ends well. -Shakespeare


Start | Stop

Source Code:

<marquee id="scroller" direction=up width=150 height=150 style="background-color:lightyellow;border:1px solid black">Marquee contents here. Marquee contents here...</marquee><br>
<a href="javascript:scroller.start()">Start</a> | <a href="javascript:scroller.stop()">Stop</a>

<script>
if (document.all)
scroller.stop()
</script>

The start/stop button above are constructed using the marquee's default start() and stop() methods. Also, the later method is accessed directly to halt the initial scrolling of it.

Now run along and revive that old <marquee> on your site!