Adam's Advanced HTML Guide- Marquee

A marquee is a cool HTML element that scrolls anything you put inside it, like one of those cool news tickers you see on TV. I'll first show you how to create a marquee using the marquee tag of Internet Explorer, then how to add a "cross-browser" marquee that works in both IE and NS (version 4 or above.

leaf.gif (1184 bytes) Creating a marquee using the <marquee tag>

The simplest way to add a marquee is to use the <marquee> tag. Unfortunately, this tag only works in IE. In any event, here's how to syntax goes:

<marquee>This is a marquee! The text inside it will scroll continuously from left to right, then start all over again</marquee>

Live Example:
This is a marquee! The text inside it will scroll continously from left to right, then start all over again

Just put whatever you want scrolled inside the marquee, and it will be scrolled- in Internet Explorer only, of course!

leaf.gif (1184 bytes) Implementing a cross-browser marquee

A marquee is only half useful if it only works in Internet Explorer. I recently found a script that creates a cross-browser marquee that works in BOTH IE 4 and NS 4. The script is from, a cool DHTML site. Here's the code, plus a live example:

<script language="JavaScript1.2">

Cross browser marquee script-
Dynamic Drive (
For full source code, installation instructions,
100's more DHTML scripts, and Terms Of
Use, visit

//Specify the marquee's width (in pixels)
var marqueewidth=330
//Specify the marquee's height (in pixels, pertains only to NS)
var marqueeheight=20
//Specify the marquee's scroll speed (larger is faster)
var speed=6
//Specify the marquee contents
var marqueecontents='<font face="Arial"><strong><big>Thank you for visiting <a href="">Dynamic Drive.</a> If you find this script useful, please consider linking to us by <a href="../link.htm">click here.</a> Enjoy your stay!</big></strong></font>'

if (document.all)
document.write('<marquee scrollAmount='+speed+' style="width:'+marqueewidth+'">'+marqueecontents+'</marquee>')

function regenerate(){
function regenerate2(){
if (document.layers){

function intializemarquee(){


function scrollit(){
if (document.cmarquee01.document.cmarquee02.left>=thelength*(-1)){


<ilayer width=&{marqueewidth}; height=&{marqueeheight}; name="cmarquee01">
<layer name="cmarquee02"></layer>

Live Example:

Just copy the entire code above, change the contents inside, and you instantly get a cross browser marquee for your site!


Back Home

Recommended resources