Stop Marquee

This page contains code for stopping an HTML marquee. It demonstrates how to programatically stop a marquee using HTML combined with JavaScript. Feel free to copy and paste the "stop marquee" code into your own website, blog, or other HTML document. And feel free to modify the code as you wish.

Also, please consider keeping the link back to this website - if you do it will be very much appreciated!

Note for MySpace users: If you have a MySpace page, you won't be able to stop your marquee using this code. This is because MySpace doesn't allow JavaScript codes. You can still use the HTML marquee code, just not the "stop marquee" code.

Stop & Start Marquee with Cursor

In the first couple of examples, we stop the marquee by hovering or clicking the marquee with the cursor (i.e. with our mouse). To stop the marquee, we use this.stop(); and to start it again, we use this.start();. The rest of the code is the basic HTML for creating a marquee (the marquee is defined using the HTML marquee tag).

Stop Marquee on Hover

Here, the user can stop the marquee by hovering over it. The marquee starts again when we move the cursor away from the marquee. Go on, hover over the marquee now!

We acheive this by using the onmouseover event. More specifically, we use onmouseover="this.stop();". To start it again, we use the onmouseout event (i.e. onmouseout="this.start();").

Source CodeResult
Go on... STOP ME!

Stop & Start Marquee on Click

In this example, the user can stop the marquee by clicking it. Specifically, the marquee stops when the mouse is pressed. The marquee starts again when the mouse button is released.

We acheive this by using the onmousedown event (i.e. onmousedown="this.stop();"). To restart it, we use the onmouseup event (i.e. onmouseup="this.start();"). By the way, this example uses a bouncing marquee but you can use any type of marquee you like.

Source CodeResult
Catch me if you can!

Stop Marquee with Buttons

You also can stop and start a marquee using buttons. To do this, we use onClick="document.getElementById('mymarquee').stop();" in the Stop button, and onClick="document.getElementById('mymarquee').start();" in the Start button. We also add id="mymarquee" to the marquee element (as you can see, the "stop/start" code references "mymarquee").

Source CodeResult

See how fast I am!

Stop Marquee with Images

The above example uses basic HTML input buttons. You could go a step further and create Stop/Start buttons. All other code remains the same - just replace the input tag with an img tag.

Source CodeResult

See how fast I am!

Stop button Start button

Change Marquee Speed

As well as stopping/starting marquees, you can also change their speed. In fact, you can even combine stopping/starting with slowing down/speeding up the marquee. Like this:

Hover over me, then click!

To find out more, check out the article on changing marquee speed.

Marquee Attributes

The <marquee> tag accepts a number of attributes (some of which are included in the above examples). Feel free to experiment with these settings to see the effect they have on your scrolling text. The full list of attributes are:

widthSets the width of the marqueescrollamountHow far to jump as it moves
heightSets the height of the marqueeloopHow many times it should loop
directionSets the direction of the marqueebgcolorSets the background color of the marquee
behaviorWhether to slide, bounce, or scrollhspaceSets the amount of horizontal space around the marquee
scrolldelayHow long the marquee should wait before each jumpvspaceSets the amount of vertical space around the marquee