CINXE.COM
Stopping & Starting HTML Marquees
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="keywords" content="stop marquee, html code for stopping marquees, how to stop marquee with mouse, onmouseover, onmousedown, start, codes, scroll, scrolling text, upward, vertically, vertical, downward, up, down, top, bottom, left, right, horizontally, horizontal. image, pic, picture, speed, help, effect, affect"> <meta name="Description" content="Stop/start a scrolling marquee with your mouse using this HTML marquee code."> <link rel="canonical" href="https://www.quackit.com/html/codes/stop_marquee.cfm"> <title>Stopping & Starting HTML Marquees</title> <script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <link rel="shortcut icon" href="/pix/favicon96.png"> <link rel="apple-touch-icon" href="/pix/apple-touch-icon.png"> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet"> <link href="/common/css/master.45.min.css" rel="stylesheet"> <script async src="https://cdn.fuseplatform.net/publift/tags/2/3499/fuse.js"></script> <!-- Global site tag (gtag.js) - Google Analytics --> <script async src="https://www.googletagmanager.com/gtag/js?id=G-Q3H025ZKLN"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-Q3H025ZKLN'); </script> </head> <body> <header class="site-header"> <div class="site-header-base"> <div class="site-logo"> <a title="Quackit Homepage" target="_top" href="/"><img src="/pix/quackit_logo_watermark.png" width="87" height="33" alt="Quackit Logo"></a> </div> <button id="site-nav-toggler" class="site-nav-toggler" aria-expanded="false" aria-controls="site-nav"> <span class="sr-only">Toggle navigation</span> ☰ </button> </div> <nav id="site-nav" class="site-nav"> <div class="site-links"> <ul> <li><a href="/"><i class="fa fa-home"></i> <span class="sr-only">Home</span></a></li> <li><a href="/html/">HTML</a></li> <li><a href="/css/">CSS</a></li> <li><a href="/scripting/">Scripting</a></li> <li><a href="/database/">Database</a></li> </ul> </div> <div class="site-search-top"> <form action="/search/" id="cse-search-box-bottom" class="site-search"> <div> <input type="hidden" name="cx" value="partner-pub-6331358926293806:98x0fk-bbgi"> <input type="hidden" name="cof" value="FORID:10"> <input type="hidden" name="ie" value="ISO-8859-1"> <input type="text" name="q" size="20" class="site-search-input"> <button type="submit" name="sa" class="site-search-button"><i class="fa fa-search"></i></button> </div> </form> </div> </nav> </header> <div class="main"> <article class="content"> <h1 class="page-title">Stopping & Starting HTML Marquees</h1> <div class="ad ad-top"> <!-- GAM 71161633/QCKIT_quackit/article_header --> <div data-fuse="23059883623"></div> </div> <p>This page contains code that allows you to stop and start <a href="/html/codes/html_marquee_code.cfm">HTML marquees</a> with your mouse. Therefore, your website users can stop and start your HTML marquees with their mouse too.</p> <div class="tip"> <h4>CSS Marquees</h4> <p>The codes on this page are for HTML marquees. To stop a CSS marquee, see the following:</p> <ul> <li><a href="/css/codes/marquees/how_to_stop_a_marquee_automatically.cfm">Stop a CSS Marquee Automatically</a></li> <li><a href="/css/codes/marquees/how_to_pause_a_marquee_on_hover.cfm">Pause a CSS Marquee on Hover</a></li> </ul> </div> <div class="ad"> <!-- GAM 71161633/QCKIT_quackit/article_incontent_1 --> <div data-fuse="23059883629"></div> </div> <h2>Clicking the Marquee</h2> <p>This example allows the user to stop the HTML marquee when they click the mouse (i.e. <i>onmousedown</i>). The marquee then continues when the user releases the mouse (i.e. <i>onmouseup</i>).</p> <script src="/common/js/codemirror/lib/codemirror.js"></script> <script src="/common/js/codemirror/mode/htmlmixed/htmlmixed.js"></script> <script src="/common/js/codemirror/mode/css/css.js"></script> <script src="/common/js/codemirror/mode/javascript/javascript.js"></script> <script src="/common/js/codemirror/mode/xml/xml.js"></script> <div class="code-only"> <textarea id="example1" autocomplete="off" spellcheck="false"><marquee behavior="scroll" direction="left" onmousedown="this.stop();" onmouseup="this.start();">
Go on... click me (and hold the mouse down)!
</marquee></textarea> <p> <a class="btn btn-default" href="/html/html_editors/scratchpad/?example=/html/codes/stop_marquee_onclick" target="_blank" title="Full-page editor. Opens this example in the full-page editor."><i class="fa fa-pencil-square-o"></i> View Output</i></a> </p> </div> <script> var exampleCode1 = CodeMirror.fromTextArea(document.getElementById("example1"), { mode: "htmlmixed", tabMode: "indent", styleActiveLine: false, lineNumbers: false, lineWrapping: true, theme: "q-dark" }); </script> <h2>Hovering over the Marquee</h2> <p>This example allows the user to stop the marquee when they hover over the marquee with their cursor (i.e. <i>onmouseover</i>). The marquee then continues when the user hovers away from the marquee (i.e. <i>onmouseout</i>).</p> <script src="/common/js/codemirror/mode/htmlmixed/htmlmixed.js"></script> <div class="code-only"> <textarea id="example2" autocomplete="off" spellcheck="false"><marquee behavior="scroll" direction="left" onmouseover="this.stop();" onmouseout="this.start();">
Go on... hover over me!
</marquee></textarea> <p> <a class="btn btn-default" href="/html/html_editors/scratchpad/?example=/html/codes/stop_marquee_on_hover" target="_blank" title="Full-page editor. Opens this example in the full-page editor."><i class="fa fa-pencil-square-o"></i> View Output</i></a> </p> </div> <script> var exampleCode2 = CodeMirror.fromTextArea(document.getElementById("example2"), { mode: "htmlmixed", tabMode: "indent", styleActiveLine: false, lineNumbers: false, lineWrapping: true, theme: "q-dark" }); </script> <h2>Start/Stop Buttons:</h2> <p>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 <a href="/html/tags/html_input_tag.cfm">input</a> tag).</p> <div class="code-only"> <textarea id="example3" autocomplete="off" spellcheck="false"><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();"></textarea> <p> <a class="btn btn-default" href="/html/html_editors/scratchpad/?example=/html/codes/stop_marquee_stop_start_buttons" target="_blank" title="Full-page editor. Opens this example in the full-page editor."><i class="fa fa-pencil-square-o"></i> View Output</i></a> </p> </div> <script> var exampleCode3 = CodeMirror.fromTextArea(document.getElementById("example3"), { mode: "htmlmixed", tabMode: "indent", styleActiveLine: false, lineNumbers: false, lineWrapping: true, theme: "q-dark" }); </script> <h2>Stopping Multiple Marquees:</h2> <p>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.</p> <div class="code-only"> <textarea id="example4" autocomplete="off" spellcheck="false"><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();"></textarea> <p> <a class="btn btn-default" href="/html/html_editors/scratchpad/?example=/html/codes/stop_marquee_stopping_multiple_marquees" target="_blank" title="Full-page editor. Opens this example in the full-page editor."><i class="fa fa-pencil-square-o"></i> View Output</i></a> </p> </div> <script> var exampleCode4 = CodeMirror.fromTextArea(document.getElementById("example4"), { mode: "htmlmixed", tabMode: "indent", styleActiveLine: false, lineNumbers: false, lineWrapping: true, theme: "q-dark" }); </script> <h2>Slowing Down Your Marquee</h2> <p>You can also make the marquee slow down instead of just stopping/starting. Here's the code to <a href="/html/codes/slow_down_marquee.cfm">slow down & speed up your marquee</a>.</p> </article> <div class="sidebar"> <div class="relatedLinks"> <h4>Related</h4> <ul> <li><a href="/css/codes/marquees/how_to_stop_a_marquee_automatically.cfm" title="">Stop a Marquee Automatically (CSS)</a></li> <li><a href="/css/codes/marquees/how_to_pause_a_marquee_on_hover.cfm" title="">Stop a Marquee on Hover (CSS)</a></li> <li><a href="/css/codes/marquees/" title="Same effect as HTML marquees, but using CSS">CSS Marquees</a></li> <li><a href="/css/codes/marquees/create_fly-in_text_in_css.cfm" title="AKA slide-in text">Create Fly-In Text (using CSS)</a></li> <li><a href="/html/codes/slow_down_marquee.cfm" title="">Slowing Down an HTML Marquee</a></li> <li><a href="/html/html_generators/html_marquee_generator.cfm" title="Generate your marquee codes automatically.">Marquee Generator</a></li> </ul> </div> <nav> <ul> <li> <h3><a href="/html/codes/">HTML Codes</a></h3> <ul> <li><a href="/html/codes/html_background_codes.cfm" title="Set background properties on any HTML element.">HTML Background Code</a></li> <li><a href="/html/codes/bold/" title="Specify bold text in your HTML code.">HTML Bold</a></li> <li><a href="/html/codes/color/" title="Add color to your HTML code.">HTML Color</a></li> <li><a href="/html/html_color_codes.cfm" title="Hexadecimal color codes">HTML Color Codes</a></li> <li><a href="/html/codes/comment_box_code.cfm" title="Create a comment box within your HTML codes.">HTML Comment Box Code</a></li> <li><a href="/html/codes/html_scroll_box.cfm" title="Create a scroll box within your HTML codes.">HTML Scrollbox Code</a></li> <li><a href="/html/codes/tables/" title="Add an HTML table to your web page or blog.">HTML Tables</a></li> <li><a href="/html/codes/text/" title="Specify font family, size, color and more within your HTML code.">HTML Text Code</a></li> <li><a href="/html/codes/html_picture_codes.cfm" title="Embed pictures within your HTML code.">HTML Image Code</a></li> <li><a href="/html/codes/link/" title="Create hyperlinks between web pages and other documents.">HTML Link Code</a></li> <li><a href="/html/codes/html_marquee_code.cfm">HTML Marquee Code</a></li> <li><a href="/html/html_music_code.cfm">HTML Music Code</a></li> <li><a href="/html/codes/html_video_codes.cfm">HTML Video Code</a></li> <li><a href="/html/codes/html_form_code.cfm">HTML Form Code</a></li> <li><a href="/html/codes/html_frames_code.cfm">HTML Frames Code</a></li> <li><a href="/html/html_special_characters.cfm" title="ISO-8859-1">HTML Entities</a></li> <li><a href="/html/examples/" title="Copy/paste examples">HTML Examples</a></li> <li><a href="/html/html_help.cfm" title="HTML help with tables, forms, fonts, color, image maps, hyperlinks and more.">HTML Help/Cheat Sheet</a></li> <li><a href="/html/templates/" title="Thousands of pre-built websites">HTML Templates</a></li> <li><a style="padding-left:60px;font-style:italic;" href="/html/codes/">More Codes...</a></li> </ul> </li> <li> <h3><a href="/html/">HTML Reference</a></h3> <ul> <li><a href="/html/tags/" title="Alphabetical list of all HTML tags">HTML Tags</a></li> <li><a href="/html/codes/" title="">HTML Codes</a></li> <li><a href="/html/templates/" title="">HTML Templates</a></li> <li><a href="/html/html_editors/">HTML Editors</a></li> <li><a href="/html/tutorial/" title="">HTML Tutorial</a></li> <li><a href="/create-a-website/" title="">Create a Website</a></li> <li><a href="/character_sets/">Character Set Reference</a></li> </ul> </li> </ul> </nav> <div class="ad ad-left"> <!-- GAM 71161633/QCKIT_quackit/article_vrec_2 --> <div data-fuse="23059511712"></div> </div> </div> <div class="ads"> <div class="ad ad-right"> <!-- GAM 71161633/QCKIT_quackit/article_vrec_1 --> <div data-fuse="23059883626"></div> </div> </div> </div> <div class="searchbox-bottom"> <form action="/search/" id="cse-search-box-bottom" class="site-search"> <div> <input type="hidden" name="cx" value="partner-pub-6331358926293806:npmuvy-i8kk"> <input type="hidden" name="cof" value="FORID:10"> <input type="hidden" name="ie" value="ISO-8859-1"> <input type="text" name="q" size="30" class="site-search-input"> <button type="submit" name="sa" class="site-search-button"><i class="fa fa-search"></i></button> </div> </form> <script src="//cse.google.com/cse/brand?form=cse-search-box-bottom&lang=en"></script> </div> <footer> <p class="about"><a href="/"><i class="fa fa-home"></i> Home</a> | <a href="/about.cfm" rel="nofollow">About</a> | <a href="/contact.cfm" rel="nofollow">Contact</a> | <a href="/terms_of_use.cfm" rel="nofollow">Terms of Use</a> | <a href="/privacy_policy.cfm" rel="nofollow">Privacy Policy</a></p> <p>© Copyright 2000 - 2025 Quackit.com </p> </footer> <script src="/common/js/spectrum/spectrum.js"></script> <script src="/common/js/lightbox2-master/dist/js/lightbox.min.js" charset="utf-8"></script> <script> $(document).ready(function(){ $( "#site-nav-toggler" ).click(function() { $( "#site-nav" ).toggle( "slow" ); }); }); </script> <script> $(function(){var a=window.location.href;$(".sidebar nav a").each(function(){a==this.href&&$(this).closest("li").addClass("selected")})}); </script> </body> </html>