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);
}
</script>
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);">
Next: Conclusion >>
More JavaScript Articles
More By Justin Cook
/ 65 
