Home/ Questions/Q 135115
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-11T06:44:08+00:00

I’m trying to incorporate the following JavaScript Scroller into a website but as soon

  • 0

I’m trying to incorporate the following JavaScript Scroller into a website but as soon as I include it in a HTML page that has layout eg. Tables/DIVs it seems to break and won’t display. Was wondering if anyone had any advice.

<script language='javascript'> //ENTER CONTENT TO SCROLL BELOW. var content='Content to be scrolled';  var boxheight=150;        // BACKGROUND BOX HEIGHT IN PIXELS. var boxwidth=150;         // BACKGROUND BOX WIDTH IN PIXELS. var boxcolor='#E9F0F8';   // BACKGROUND BOX COLOR. var speed=50;             // SPEED OF SCROLL IN MILLISECONDS (1 SECOND=1000 MILLISECONDS).. var pixelstep=2;          // PIXELS 'STEPS' PER REPITITION. var godown=false;         // TOP TO BOTTOM=TRUE , BOTTOM TO TOP=FALSE  // DO NOT EDIT BEYOND THIS POINT  var outer,inner,elementheight,ref,refX,refY; 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; var txt=''; if(ns4){ txt+='<table cellpadding=0 cellspacing=0 border=0 height='+boxheight+' width='+boxwidth+'><tr><td>'; txt+='<ilayer name='ref' bgcolor=''+boxcolor+'' width='+boxwidth+' height='+boxheight+'></ilayer>'; txt+='</td></tr></table>' txt+='<layer name='outer' bgcolor=''+boxcolor+'' visibility='hidden' width='+boxwidth+' height='+boxheight+'>'; txt+='<layer  name='inner'  width='+(boxwidth-4)+' height='+(boxheight-4)+' visibility='hidden' left='2' top='2' >'+content+'</layer>'; txt+='</layer>'; }else{ txt+='<div id='ref' style='position:relative; width:'+boxwidth+'; height:'+boxheight+'; background-color:'+boxcolor+';' ></div>'; txt+='<div id='outer' style='position:absolute; width:'+boxwidth+'; height:'+boxheight+'; visibility:hidden; background-color:'+boxcolor+'; overflow:hidden' >'; txt+='<div id='inner'  style='position:absolute; visibility:visible; left:2px; top:2px; width:'+(boxwidth-4)+'; overflow:hidden; cursor:default;'>'+content+'</div>'; txt+='</div>'; } document.write(txt);  function getElHeight(el){ if(ns4)return (el.document.height)? el.document.height : el.clip.bottom-el.clip.top; else if(ie4||ie5)return (el.style.height)? el.style.height : el.clientHeight; else return (el.style.height)? parseInt(el.style.height):parseInt(el.offsetHeight); }  function getPageLeft(el){ var x; if(ns4)return el.pageX; if(ie4||w3c){ x = 0; while(el.offsetParent!=null){ x+=el.offsetLeft; el=el.offsetParent; } x+=el.offsetLeft; return x; }}  function getPageTop(el){ var y; if(ns4)return el.pageY; if(ie4||w3c){ y=0; while(el.offsetParent!=null){ y+=el.offsetTop; el=el.offsetParent; } y+=el.offsetTop; return y; }}  function scrollbox(){ if(ns4){ inner.top+=(godown)? pixelstep: -pixelstep; if(godown){ if(inner.top>boxheight)inner.top=-elementheight; }else{ if(inner.top<2-elementheight)inner.top=boxheight+2; }}else{ inner.style.top=parseInt(inner.style.top)+((godown)? pixelstep: -pixelstep)+'px'; if(godown){ if(parseInt(inner.style.top)>boxheight)inner.style.top=-elementheight+'px'; }else{ if(parseInt(inner.style.top)<2-elementheight)inner.style.top=boxheight+2+'px'; }}}  window.onresize=function(){ if(ns4)setTimeout('history.go(0)', 400); else{ outer.style.left=getPageLeft(ref)+'px'; outer.style.top=getPageTop(ref)+'px'; }}  window.onload=function(){ outer=(ns4)?document.layers['outer']:(ie4)?document.all['outer']:document.getElementById('outer'); inner=(ns4)?outer.document.layers['inner']:(ie4)?document.all['inner']:document.getElementById('inner'); ref=(ns4)?document.layers['ref']:(ie4)?document.all['ref']:document.getElementById('ref'); elementheight=getElHeight(inner); if(ns4){ outer.moveTo(getPageLeft(ref),getPageTop(ref)); outer.clip.width=boxwidth; outer.clip.height=boxheight; inner.top=(godown)? -elementheight : boxheight-2; inner.clip.width=boxwidth-4; inner.clip.height=elementheight; outer.visibility='show'; inner.visibility='show'; }else{ outer.style.left=getPageLeft(ref)+'px'; outer.style.top=getPageTop(ref)+'px'; inner.style.top=((godown)? -elementheight : boxheight)+'px'; inner.style.clip='rect(0px, '+(boxwidth-4)+'px, '+(elementheight)+'px, 0px)'; outer.style.visibility='visible'; } setInterval('scrollbox()',speed); } </script>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. I know I’m not answering your question, but this will at least help me to sleep tonight. 🙂

    I’m not sure exactly what you are trying to do, but I wouldn’t use that script. I’m guessing you’ve copied and pasted it from somewhere, but it looks like it was written a good few years ago, and doesn’t really meet many of the best practise guidelines for JavaScript these days.

    If you are looking for scripts and libraries for these type of effects, I would recommend looking at:

    If you had to push me for one, I would recommend jQuery. Along with learning JavaScript of course, which is really required for use of any of the above libraries. 🙂

    • 0