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 Dynamicdrive.com, a cool DHTML site. Here's the code, plus a live example:

<script language="JavaScript1.2">

/*
Cross browser marquee script-
Dynamic Drive (www.dynamicdrive.com)
For full source code, installation instructions,
100's more DHTML scripts, and Terms Of
Use, visit dynamicdrive.com
*/


//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="http://dynamicdrive.com">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(){
window.location.reload()
}
function regenerate2(){
if (document.layers){
setTimeout("window.onresize=regenerate",450)
intializemarquee()
}
}

function intializemarquee(){
document.cmarquee01.document.cmarquee02.document.write

('<nobr>'+marqueecontents+'</nobr>')
document.cmarquee01.document.cmarquee02.document.close()
thelength=document.cmarquee01.document.cmarquee02.document.width
scrollit()
}

function scrollit(){
if (document.cmarquee01.document.cmarquee02.left>=thelength*(-1)){
document.cmarquee01.document.cmarquee02.left-=speed
setTimeout("scrollit()",100)
}
else{
document.cmarquee01.document.cmarquee02.left=marqueewidth
scrollit()
}
}

window.onload=regenerate2
</script>


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

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