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.
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:
Just put whatever you want scrolled inside the marquee, and it will be scrolled- in Internet Explorer only, of course!
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!
Recommended resources
|