Home arrow JavaScript arrow Page 3 - Creating a Scrolling News Panel

Creating a Scrolling News Panel

Most websites have some sort of space dedicated solely to displaying the 'Latest News'. In fact, this is so common, that most content management systems by default reserve a good chunk of landscape for exactly this purpose. But what if you're limited in screen space, or you just want to cut down on clutter? This article will describe an attractive way to tuck the news into one neat little scrolling box. Enjoy!

Author Info:
By: Justin Cook
Rating: 4 stars4 stars4 stars4 stars4 stars / 109
May 26, 2004
  1. · Creating a Scrolling News Panel
  2. · I've Got Good News, and I've Got Bad News
  3. · The Code
  4. · Conclusion

print this article

Creating a Scrolling News Panel - The Code
(Page 3 of 4 )

<script language="JavaScript">
function getObject( obj ) {
var strObj
if ( document.all ) {
strObj = document.all.item( obj );
} else if ( document.getElementById ) {
strObj = document.getElementById( obj );
  return strObj;

This is your basic and fundamental object finder. You may find it useful to 'borrow' the MM_findObj() function from Dreamweaver, but this one is short and sweet for the sake of this tutorial. Basically we're just returning the proper object reference based on which object model the browser is using. Then we'll use that in the scrolling function.

var theTop = 20;

var theHeight = 100;

var theWidth = 150;

var theLeft = 650;

var toClip = 55;

So before we get into the actual function, we create some global variables, and basically set them the same as the style declarations. We can tweak these as we go along to position and scroll the box precisely as we want it. We use CSS to set the initial values, but these will override them the first time the function runs. Now let's get into the function itself:

function scrollNews( newsDiv, toMove ) {

theDiv = getObject( newsDiv.toString() );

if ( theDiv == null ) { return; }

Quite simply, here we look for the layer, and if it won't be found, the function exits. So once you have all the code in place, but it doesn't work, and doesn't return any errors, this would be why. Chances are there's a typo in the news div name.

if ( document.layers ) {

theDiv.clip.top = toMove;

theDiv.clip.bottom = toMove + toClip;

theDiv.top = theTop toMove;

This is the code for Netscape 4. Basically we just move the div up, and the clip down. This gives the impression that the content is scrolling within the div.

} else {

theDiv = theDiv.style;

theDiv.clip = "rect(" + toMove + "px " + (theWidth + theLeft) + "px " + (toMove + toClip) + "px 0px)";

theDiv.top = theTop - toMove + 'px';

Here we do exactly the same thing for any other browsers. However, there is an obvious difference, in that we're accessing and changing the values through the '.style' property. Also, the clipping is different, specified all in one string rather than individual values. The string should be indentical in form to the original CSS declaration, just the values will be slightly changed.

But what happens when we get to the end of the div? Well we have to throw in a little calculation to test if it has fully scrolled past where the top initially was. When that happens, we can reset it to its original position, which will give the illusion of continuous scrolling.

if ( ( theTop + theHeight - toMove ) < ( theTop - theHeight - 20 ) ) {

toMove = 0;

if ( document.layers ) {

theDiv.clip.top = theTop;

theDiv.clip.bottom = toClip;

theDiv.top = theTop

} else {

theDiv.clip = "rect(" + toMove + "px " + (theWidth + theLeft) + "px " + (toMove + toClip) + "px 0px)";

theDiv.top = theTop + 'px';



Here we're just incrementing the move value to move another pixel, and then recursively call the function in 1/10th of a second. If the news is scrolling too fast or slow, you can adjust the speed here.

toMove = (toMove + 1);

setTimeout("scrollNews('" + newsDiv + "'," + toMove + ")", 100);



And of course we need an onload caller in the body tag to get this thing moving in the first place!

<body onload="scrollNews('news', 0);">

blog comments powered by Disqus

- Project Nashorn to Make Java, JavaScript Wor...
- JavaScript Virus Attacks Tumblr Blogs
- Google Releases Stable Dart Version, JavaScr...
- Khan Academy Unveils New JavaScript Learning...
- Accessing Nitro? There`s an App for That
- JQuery 2.0 Leaving Older IE Versions Behind
- Fastest JavaScript Engine Might Surprise You
- Microsoft Adjusting Chakra for IE 10
- Brendan Eich: We Don`t Need Google Native Cl...
- An Overview of JavaScript Statements
- An Overview of JavaScript Operators
- Overview of JavaScript Variables
- More of the Top jQuery Social Plugins
- The Top jQuery Social Plugins
- More of the Top jQuery Slider Plugins

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 

Developer Shed Affiliates


© 2003-2019 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials