【Slow or Stop Marquees】

Stopping & Starting HTML Marquees

This page contains code that allows you to stop and start HTML marquees with your mouse. Therefore, your website users can stop and start your HTML marquees with their mouse too.

CSS Marquees

The codes on this page are for HTML marquees. To stop a CSS marquee, see the following:

• Stop a CSS Marquee Automatically
• Pause a CSS Marquee on Hover

Clicking the Marquee

This example allows the user to stop the HTML marquee when they click the mouse (i.e. onmousedown). The marquee then continues when the user releases the mouse (i.e. onmouseup).

 Run

Stack editor Unstack editor

 Editor Preview

 

 

 

 

<marquee behavior="scroll" direction="left" onmousedown="this.stop();" onmouseup="this.start();">

Go on... click me (and hold the mouse down)!

</marquee>

 

Hovering over the Marquee

This example allows the user to stop the marquee when they hover over the marquee with their cursor (i.e. onmouseover). The marquee then continues when the user hovers away from the marquee (i.e. onmouseout).

 Run

Stack editor Unstack editor

 Editor Preview

 

 

 

<marquee behavior="scroll" direction="left" onmouseover="this.stop();" onmouseout="this.start();">

Go on... hover over me!

</marquee>

 

Start/Stop Buttons:

You can add "start" and "stop" buttons that enable the user to start and stop the marquee as required. To do this, simply add an "id" attribute to the marquee, then reference that from your buttons (created using the input tag).

 Run

Stack editor Unstack editor

 Editor Preview

 

 

 

<marquee behavior="scroll" direction="left" id="mymarquee">

<p>Go on... press the button!</p>

</marquee>

<input type="button" value="Stop Marquee" onClick="document.getElementById('mymarquee').stop();">

<input type="button" value="Start Marquee" onClick="document.getElementById('mymarquee').start();">

 

Stopping Multiple Marquees:

You can add "start" and "stop" buttons for as many marquees as you like. Just make sure you give each marquee a unique "id". For example, if you name your first marquee "marquee1", name the second marquee "marquee2" etc.

 Run

Stack editor Unstack editor

 Editor Preview

 

 

 

 

<marquee behavior="scroll" direction="right" scrollamount="20" id="marquee1">

<p>Marquee 1</p>

</marquee>

<marquee behavior="scroll" direction="left" scrollamount="20" id="marquee2">

<p>Marquee 2</p>

</marquee>

<input type="button" value="Stop Marquee 1" onClick="document.getElementById('marquee1').stop();">

<input type="button" value="Start Marquee 1" onClick="document.getElementById('marquee1').start();"><br />

<input type="button" value="Stop Marquee 2" onClick="document.getElementById('marquee2').stop();">

<input type="button" value="Start Marquee 2" onClick="document.getElementById('marquee2').start();">

 

Slowing Down Your Marquee

You can also make the marquee slow down instead of just stopping/starting. Here's the code to slow down & speed up your marquee.

 

---------

 

Slow Down Marquee

This page contains code that allows you to slow down your HTML marquee using your mouse. This means that your website visitors can slow down your HTML marquees with their mouse too.

Browser Compatibility

The marquees on this page use the non-standard <marquee> tag, as well as JavaScript to slow the marquee. If the following examples don't work for you it's likely that your browser doesn't support this functionality. For standards-compliant code, it is recommended that you use CSS marquees wherever possible.

Clicking the Marquee

This example allows the user to slow down the marquee when they click on it using their mouse (i.e. onmousedown). The marquee then returns to the regular speed when the user releases the mouse (i.e. onmouseup).

 Run

Stack editor Unstack editor

 Editor Preview

 

 

 

 

<marquee behavior="scroll" direction="left" scrollamount="12" onmousedown="this.setAttribute('scrollamount', 3, 0);" onmouseup="this.setAttribute('scrollamount', 12, 0);">

Go on... click me (and hold the mouse down)!

</marquee>

 

Hover Over the Marquee

This example allows the user to slow the marquee down when they hover over it (i.e. onmouseover). The marquee then continues when the user moves the cursor away from the marquee (i.e. onmouseout).

Using this example, the user doesn't need to click the mouse - they simply hover the cursor over the marquee.

 Run

Stack editor Unstack editor

 Editor Preview

 

 

 

<marquee behavior="scroll" direction="left" scrollamount="12" onmouseover="this.setAttribute('scrollamount', 3, 0);" onmouseout="this.setAttribute('scrollamount', 12, 0);">

Go on... hover over me!

</marquee>

 

Using Buttons:

You can add "Slower" and "Normal Speed" buttons that enable the user to slow down the marquee as required. To do this, simply add an "id" attribute to the marquee, then reference that from your buttons (created using the input tag).

 Run

Stack editor Unstack editor

 Editor Preview

 

 

 

<marquee behavior="scroll" direction="left" scrollamount="6" id="mymarquee">

<p>Go on... press the button!</p>

</marquee>

<input type="button" value="Slower" onClick="document.getElementById('mymarquee').setAttribute('scrollamount', 1, 0);">

<input type="button" value="Normal Speed" onClick="document.getElementById('mymarquee').setAttribute('scrollamount', 6, 0);">

<input type="button" value="Faster" onClick="document.getElementById('mymarquee').setAttribute('scrollamount', 12, 0);">

 

Stop Your Marquee

Here are two easy ways to stop your marquee:

• You can stop your marquee simply by setting the scrollamount to 0 (zero). For example, to stop the marquee on a mouseover, do this: onmouseover = "this.setAttribute('scrollamount', 0, 0);"
• You can also stop your marquee by using this.stop();. To see this code in action, see how to stop your marquee.