How to Create a Continuous Text Marquee in JavaScript

Send a scroll of continuous text across your web page

This JavaScript code will move a single text string that contains any text you choose through a horizontal marquee space without breaks. It does this by adding a copy of the text string to the beginning of the scroll as soon as it disappears out of the end of the marquee space. The script automatically works out how many copies of the content it needs to create to ensure that you never run out of text in your marquee.

This script does have a couple of limitations though so we'll cover those first so that you know exactly what you are getting.

  • The only interaction the marquee offers is the ability to stop the text scroll when the mouse hovers over the marquee. It starts moving again when the mouse is moved away. You can include links in your text, and the action of stopping the text scroll makes clicking these links easier for users.
  • You can have multiple marquees on the same page with this script and can specify different text for each. The marquees all run at the same rate, though, which means that a mouseover that stops the scrolling of one marquee causes all marquees on the page to cease scrolling.
  • The text in each marquee must be all on one line. You can use inline HTML tags to style the text, but block tags and <br> tags will break the code.

JavaScript Code for the Text Marquee 

The first thing you need to do to be able to use my continuous text marquee script is to copy the following JavaScript and save it as marquee.js.

This includes the code from my examples, which adds two new mq objects containing the information on what to display in those two marquees. You may delete one of those and change the other to display one continuous marquee on your page, or repeat those statements to add even more marquees. The mqRotate function must be called passing mqr after the marquees are defined as that will handle the rotations.

function start() {
   new mq('m1');
   new mq('m2');
   mqRotate(mqr); // must come last
}
window.onload = start;

// Continuous Text Marquee
// copyright 30th September 2009by Stephen Chapman
// http://javascript.about.com
// permission to use this Javascript on your web page is granted
// provided that all of the code below in this script (including these
// comments) is used without any alteration
function objWidth(obj) {if(obj.offsetWidth) return  obj.offsetWidth;
if (obj.clip) return obj.clip.width; return 0;} var mqr = []; function
mq(id){this.mqo=document.getElementById(id); var wid =
objWidth(this.mqo.getElementsByTagName('span')[0])+ 5; var fulwid =
objWidth(this.mqo); var txt =
this.mqo.getElementsByTagName('span')[0].innerHTML; this.mqo.innerHTML
= ''; var heit = this.mqo.style.height; this.mqo.onmouseout=function()
{mqRotate(mqr);}; this.mqo.onmouseover=function()
{clearTimeout(mqr[0].TO);}; this.mqo.ary=[]; var maxw =
Math.ceil(fulwid/wid)+1; for (var i=0;i <
maxw;i++){this.mqo.ary[i]=document.createElement('div');
this.mqo.ary[i].innerHTML = txt; this.mqo.ary[i].style.position =
'absolute'; this.mqo.ary[i].style.left = (wid*i)+'px';
this.mqo.ary[i].style.width = wid+'px'; this.mqo.ary[i].style.height =
heit; this.mqo.appendChild(this.mqo.ary[i]);} mqr.push(this.mqo);}
function mqRotate(mqr){if (!mqr) return; for (var j=mqr.length - 1; j
> -1; j--) {maxa = mqr[j].ary.length; for (var i=0;i<maxa;i++){var x =
mqr[j].ary[i].style;  x.left=(parseInt(x.left,10)-1)+'px';} var y =
mqr[j].ary[0].style; if (parseInt(y.left,10)+parseInt(y.width,10)<0)
{var z = mqr[j].ary.shift(); z.style.left = (parseInt(z.style.left) +
parseInt(z.style.width)*maxa) + 'px'; mqr[j].ary.push(z);}}
mqr[0].TO=setTimeout('mqRotate(mqr)',10);}

You next insert the script into your web page by adding the following code into the head section of your page:

<script type="text/javascript" src="marquee.js">
</script>

Add a Style Sheet Command

We need to add a style sheet command to define how each of our marquees will look.

Here's the code I used for the ones on my example page:

.marquee {position:relative;
     overflow:hidden;
     width:500px;
     height:22px;
     border:solid black 1px;
     }
.marquee span {white-space:nowrap;}

You can either place it in your external style sheet if you have one or enclose it between <style type="text/css"> </style> tags in the head of your page.

You can change any of these properties for your marquee; however, it must remain position:relative

Place the Marquee on Your Web Page

The next step is to define a div in your web page where you are going to place the continuous text marquee.

The first of my example marquees used this code:

<div id="m1" class="marquee"><span>The quick brown fox jumped over the lazy dog. She sells sea shells by the sea shore.</span></div>

The class associates this with the stylesheet code. The id is what we will use in the new mq() call to attach the marquee of images.

The actual text content for the marquee goes inside the div in a span tag. The span tag's width is what will be used as the width of each iteration of the content in the marquee (plus 5 pixels just to space them apart from each other).

Finally, make sure that your JavaScript code to add the mq object after the page loads contains the right values.

Here's what one of my example statements looks like:

new mq('m1');

The m1 is the id of our div tag so that we can identify the div that is to display the marquee.

Adding More Marquees to a Page

To add additional marquees, you can set up additional divs in the HTML, giving each its own text content inside a span; set up additional classes if you want to style the marquees differently; and add as many new mq() statements as you have marquees. Make sure that the mqRotate() call follows them to operate the marquees for us.