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 |
---|---|
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 |
---|---|
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 |
---|---|
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 |
---|---|
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:
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 |