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 Code	Result
<!-- Codes by HTMLcodes.me --> <marquee behavior="scroll" direction="right" onmouseover="this.stop();" onmouseout="this.start();">Go on... STOP ME!</marquee> <p><a style="font-size:11px;color:#999;" href="http://www.htmlcodes.me/marquees/stop-marquee.cfm">Pause marquee</a></p>	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 Code	Result
<!-- Codes by HTMLcodes.me --> <marquee behavior="alternate" scrollamount="30" onmousedown="this.stop();" onmouseup="this.start();">Catch me if you can!</marquee> <p><a style="font-size:11px;color:#999;" href="http://www.htmlcodes.me/marquees/stop-marquee.cfm">Pause marquee</a></p>	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 Code

Result

<!-- Codes by HTMLcodes.me -->
            <marquee behavior="scroll" direction="left" scrollamount="50" id="mymarquee">
            <p>See how fast I am!</p>
            </marquee>
            <input type="button" value="Stop Marquee" onClick="document.getElementById('mymarquee').stop();">
            <input type="button" value="Start Marquee" onClick="document.getElementById('mymarquee').start();">
            <p><a  style="font-size:11px;color:#999;" href="http://www.htmlcodes.me/marquees/stop-marquee.cfm">Pause marquee</a></p>

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 Code

Result

<!-- Codes by HTMLcodes.me -->
            <marquee behavior="scroll" direction="right" scrollamount="50" id="mymarquee2">
            <p>See how fast I am!</p>
            </marquee>
            <img src="http://www.htmlcodes.me/images/marquees/stop_marquee.png" width="100" height="100" alt="Stop button" onClick="document.getElementById('mymarquee2').stop();" />
            <img src="http://www.htmlcodes.me/images/marquees/start_marquee.png" width="100" height="100" alt="Start button" onClick="document.getElementById('mymarquee2').start();" />
            <p><a  style="font-size:11px;color:#999;" href="http://www.htmlcodes.me/marquees/stop-marquee.cfm">Pause marquee</a></p>

See how fast I am!

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:

`width`	Sets the width of the marquee	`scrollamount`	How far to jump as it moves
`height`	Sets the height of the marquee	`loop`	How many times it should loop
`direction`	Sets the direction of the marquee	`bgcolor`	Sets the background color of the marquee
`behavior`	Whether to slide, bounce, or scroll	`hspace`	Sets the amount of horizontal space around the marquee
`scrolldelay`	How long the marquee should wait before each jump	`vspace`	Sets the amount of vertical space around the marquee