Marquee Replacement - Horizontal Scroll
You
can
"put"
HTML
in
here
.
Instructions:
1: Copy and paste the following script in the HEAD section of your page:
Select all...
<script language="javascript"> //ENTER CONTENT TO SCROLL BELOW. var content='You <s>can</s> "put" <b>HTML</b> <font color="red">in</font> <i>here</i>.'; var boxheight=25; //BACKGROUND BOX HEIGHT IN PIXELS. var boxwidth=350; //BACKGROUND BOX WIDTH IN PIXELS. var elementwidth=230; //**MIN** WIDTH OF SCROLLING CONTENT IN PIXELS. EXPERIMENT TO GET THE BEST RESULTS. var boxcolor="#FFF6e9"; //BACKGROUND BOX COLOR. var speed=60; //SPEED OF SCROLL IN MILLISECONDS (1 SECOND=1000 MILLISECONDS).. var pixelstep=2; //PIXELS "STEPS" PER REPITITION. var goright=true; //LEFT TO RIGHT=TRUE , RIGHT TO LEFT=FALSE var outer, inner; var w3c=(document.getElementById)?true:false; var ns4=(document.layers)?true:false; var ie4=(document.all && !w3c)?true:false; var ie5=(document.all && w3c)?true:false; var ns6=(w3c && navigator.appName.indexOf("Netscape")>=0)?true:false; if(elementwidth>boxwidth-4)elementwidth=boxwidth-4; var txt=(ns4)? '<table cellpadding=0 cellspacing=0 border=0 height='+boxheight+' width='+boxwidth+'><tr><td><ilayer name="outer" bgcolor="'+boxcolor+'" visibility="hidden" width="'+boxwidth+'" height="'+boxheight+'">' : '<div id="outer" style="position:relative; width:'+boxwidth+'; height:'+boxheight+'; visibility:visible; background-color:'+boxcolor+'; overflow:hidden;" >'; txt+=(ns4)? '<layer name="inner" visibility="hidden" width="'+elementwidth+'" left="2" top="2" >'+content+'</layer></ilayer></td></tr></table>' : '<div id="inner" style="position:absolute; visibility:hidden; left:2px; top:2px; width:'+elementwidth+'; overflow:hidden; cursor:default">'+content+'</div></div>'; document.write(txt); function scrollbox(){ if(ns4){ inner.left+=(goright)? pixelstep: -pixelstep; inner.clip.right=(boxwidth-inner.left-2>boxwidth)? boxwidth-2 : boxwidth-inner.left-2; inner.clip.left=-inner.left+2; if(goright){ if(inner.left>boxwidth)inner.left=-elementwidth; }else{ if(inner.left<-elementwidth)inner.left=boxwidth+2; }}else{ inner.style.left=parseInt(inner.style.left)+((goright)? pixelstep: -pixelstep)+'px'; if(goright){ if(parseInt(inner.style.left)>boxwidth)inner.style.left=-elementwidth+'px'; }else{ if(parseInt(inner.style.left)<-elementwidth)inner.style.left=boxwidth+2+'px'; }}} window.onload=function(){ inner=(ns4)?document.layers['outer'].document.layers['inner']:(ie4)?document.all['inner']:document.getElementById('inner'); if(ns4){ document.outer.clip.width=boxwidth; document.outer.clip.height=boxheight; inner.left=(goright)? -elementwidth : boxwidth-2; inner.clip.width=0 inner.clip.height=boxheight-4; document.outer.visibility="show"; inner.visibility="show"; }else{ inner.style.left=((goright)? -elementwidth : boxwidth-2)+'px'; inner.style.clip='rect(0px, '+(elementwidth)+'px, '+(boxheight-4)+'px, 0px)'; inner.style.visibility="visible"; } setInterval('scrollbox()',speed); } </script>
2: Edit the HTML text and adjust the various settings in the script to suit your taste.