Article
Creating a Cross-Browser Scroller using DHTML
The entire scrolling text code
Putting the bits and pieces together, along with some added code, here is the entire script that renders the scroller you saw in the beginning of this article. I'll list it first, then explain any parts of it that might need clarification:
<script language="JavaScript1.2">
/* Script by Billy Pete (http://members.xoom.com/billypete/) */
/* Idea based on scroller found at http://dynamicdrive.com */
/* Specify the marquee's scroll speed (larger is faster) */
var speed=6;
/* Specify the marquee contents */
var marqueecontents = '<font face="Arial"><strong>This is is scrolling text script. This is a scrolling text script. This is a scrolling text script.</strong></font>';
if (document.all)
document.write( '<marquee scrollAmount=' + speed + ' style="width:300">' + marqueecontents + '</marquee>' );
function intializemarquee(){
if (document.layers){
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 = 300;
scrollit();
}
}
window.onload=intializemarquee;
</script>
<ilayer width=300 height=20 name="cmarquee01">
<layer name="cmarquee02"></layer>
</ilayer>
I use document.write() to dynamically write out the <marquee> tag for IE (instead of simply directly embedding it on the page). This is to avoid future potential problems with NS when and if NS eventually does support the <marquee>; the code was written exclusively for IE in this respect! Function initializemarquee() is what's used to fill the scroller with the desired text for NS. It first accesses the <ilayer>, then <layer> tag, and finally, it's document.write() method to accomplish this.
So there you have it! A cool, cross browser scroller you can use on your webpage. Finally, I leave you with a few additional examples on the web regarding DHTML scrollers:
Take a peek into their source code... that's how you learn!