Vertical Scrolling Text / News Ticker in JavaScript/DHTML

16:01.50 - Tuesday 9th January 2007 (Link to This Entry)

I had reason, recently, to create a vertical scrolling text box, similar to the credits on a film, for a website I was working on. My original intention was to simply download one of the many Java Applets that do this exact thing, but a series of unfortunate events convinced me to give up and try something different.

In the end I used a simple IFRAME and had all the necessary code in a seperate file, which goes:

<BODY onLoad="divHeight();">

<DIV ID="scrollBox" STYLE="width:220px; position:absolute; top:0px; left:0px; font-size:14px; visibility:hidden;">
Content in here!
</DIV>

<SCRIPT language="JavaScript">
 var scrollBox  = document.getElementById('scrollBox');
 var viewHeight = document.body.clientHeight;
 var viewPos    = viewHeight;
 var viewSpeed  =  30;
 var viewPixels =   1;
 var boxHeight  =   0;
 var viewMove   = viewPixels; 
 
 function out()  { viewMove=viewPixels; }
 function over() { viewMove=0; }
 
 function divHeight() {
  // find the height of the DIV called 'scrollBox'
  if(scrollBox.offsetHeight) {
   boxHeight=scrollBox.offsetHeight;
  } else {
   boxHeight=document.defaultView.getComputedStyle(document.getElementById('scrollBox'),"").getPropertyValue("height")
   boxHeight=eval(boxHeight.substring(0,boxHeight.indexOf("p")))
  }
   startScroller();
 }
 
 function startScroller() {
  var scrollBox=document.getElementById('scrollBox');
  scrollBox.style.visibility='visible';
  scrollBox.style.top=viewHeight;
  continueScrolling();
 }
 
 function continueScrolling() {
  viewPos=(viewPos-viewMove);
  scrollBox.style.top=viewPos+'px';
  if(viewPos<0-boxHeight) { viewPos=viewHeight; }
  setTimeout('continueScrolling()',viewSpeed);
 }
</SCRIPT>

</BODY>

divHeight() is a nice little function that can find the height of a DIV in pixels, even if you didn't set it yourself. I've only tested this in Firefox on a Mac though. startScroller() moves the content DIV outside the borders of the IFRAME and renders it visible, then calls continueScrolling() which simply loops over and over again.

I also added a couple of functions, over() and out(), to allow you to pause the scrolling when your mouse goes over something. Just use onMouseOver="over();" and onMouseOut="out();" in whatever content (links for example) you want stop the scroll for.

Because it's an IFRAME, you can use pretty much any HTML you like within the content DIV and it will scroll. There's no reason why you couldn't use a nested scrolling IFRAME for bizarre parallax-like effects, but it would probably make your users feel sick. Other than that there's not much to it - please credit me in your site if you use this, though.

Vertical DHTML Text Scroller... update

21:29.01 - Tuesday 9th January 2007 (Link to This Entry)

Fixed the source code above to work with IE. I've tested it on the following browsers:

Internet Explorer 6 (win) & 5.2 (osx)
Firefox 1.5.0.9 (win/osx)
Opera 9.10 (win)
Safari 2.0.4 (osx)

If for any reason the above source doesn't work, try viewing the source of the scrolling window instead - it's always possible that I've cocked up the source copying somewhere.