Stopping & Starting HTML Marquees

Related:
• Marquee Codes
• Marquee Generator
• Falling-Text Effect
• More HTML Codes
• HTML Help/Cheat Sheet
• HTML Tutorial

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

These codes use JavaScript, and therefore, will not work on your MySpace page. You can still use marquee codes on your MySpace page though, you just won't be able to stop/start them with JavaScript.

Clicking the Marquee

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

<!-- HTML codes by Quackit.com -->
<marquee behavior="scroll" direction="left" onmousedown="this.stop();" onmouseup="this.start();">Go on... click me (and hold the mouse down)!</marquee>

This code results in:

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

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).

<!-- HTML codes by Quackit.com -->
<marquee behavior="scroll" direction="left" onmouseover="this.stop();" onmouseout="this.start();">Go on... hover over me!</marquee>

This code results in:

Go on... hover over me!

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).

<!-- HTML codes by Quackit.com -->
<marquee behavior="scroll" direction="left" id="mymarquee">
<p>Go on... press the button!</p>
</marquee>
<input type="button" value="Stop Marquee" onClick="mymarquee.stop();">
<input type="button" value="Start Marquee" onClick="mymarquee.start();">

This code results in:

Go on... press the button!

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.

<!-- HTML codes by Quackit.com -->
<marquee behavior="alternate" scrollamount="20" id="marquee1">
<p>Marquee 1</p>
</marquee>
<marquee behavior="scroll" direction="left" scrollamount="10" id="marquee2">
<p>Marquee 2</p>
</marquee>
<input type="button" value="Stop Marquee 1" onClick="marquee1.stop();">
<input type="button" value="Start Marquee 1" onClick="marquee1.start();"><br />
<input type="button" value="Stop Marquee 2" onClick="marquee2.stop();">
<input type="button" value="Start Marquee 2" onClick="marquee2.start();">

This code results in:

Marquee 1

Marquee 2

MySpace Users

Unfortunately, you can't use the above examples in your MySpace profile. This is because MySpace doesn't allow you to put JavaScript in your profile (these examples use JavaScript to stop and start the marquee).

You can however, use the examples on the HTML Marquee Codes page.

More Marquee Tricks

Here are more tricks you can use with your marquees:

Enjoy this website?

Link to this page (copy/paste into your own website or blog):
<a href="http://www.quackit.com/html/codes/stop_marquee.cfm">Stopping & Starting HTML Marquees</a> from Quackit.com
Add this page to your favorite social bookmarks sites:
Add this page to your Favorites