c





(Page 1 of 4 )

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!


 


³Extra! Extra! Read all about it!´ Ahh, the familiar tone of the latest news. Whether it's a
personal or corporate website, it's always important to be able to prominently display the latest
goings-on, in some eye-catching way. But of course, the more that happens to you or your
company, the more news there is. Therefore more space is needed just for news items, and this
can easily start to crowd out other important items on your home page.

Wouldn't it be wonderful if we could somehow compress the news, yet lose nothing? And all the
while retaining the eye catchy-ness? (For instance, I feel the need to post a news release on my
site expressing my delight at having just received a new purple mouse-stick pointer thingy on my
laptop, and I don't want it to unnoticed!) Well, this article affirms that Louis Armstrong was right
-- it is a wonderful world -- because we can do both of those things thanks to our good buddy
JavaScript.

This article will show you how to first establish the initial position and style of our news box,
and then the necessary JavaScript code to scroll it oh so beautifully.

c













(Page 2 of 4 )

Well, unfortunately there is some bad news here. This wonderful scrolling news box will
probably not work on PDAs and browsers older than IE4 or Netscape 4. But since these browsers
constitute less than 1% of Internet traffic, I don't mind scripting fancifully for the other 99% and
leaving a plain old news box for the unfortunate few. Be my guest to go to whatever length
necessary to create a nice news box for the 1%, and feel free to share your methods on the
forums!
Öther than that, it's all good news. So let's get right into the code. The first thing we need to
define is a div just for the news. The news itself could be hard-coded, like this:

<div id="news">
<h1>This is the latest news</h1>

I've just had a hair transplant!<br />

I now once again have nice, curly<br />
locks atop my melon, not to <br />
mention a smooth back!
</div>

or it could be dynamic, as in the case of using Mambo CMS, like this:

<div id="news">
<?php mosLoadModules ( 'inset' ); ?>
</div>

Öur next step is to define the initial style of the news div. I had originally planned to make it
invisible at first, and have the JavaScript function make it visible. This would effectively hide it
from view until beginning to scroll. Though this could be an effective way to hide it from older
browsers, I opted not to go for this option. I figure the news is important enough that it should be
displayed no matter what, even if it won't scroll. So with that in mind, here's the style I've
defined for the news div:

<style type="text/css">
#news {

position: absolute;
visibility: visible;
top: 20px;
left: 650px;
height: 40px;
width: 150px;
z-index: 10;
clip: rect(0px, 100px, 60px, 0px);
border-width: 0px;
padding-top: 40px;

}
</style>

For those of you not quite familiar with CSS , I'll explain the different attributes. I've assigned it
an absolute position, which is necessary in this case so that we can position it precisely at the
location we want, to the pixel. As I mentioned, I've left it visible, and set the dimensions. Make
sure you include the 'px' suffix with all dimensions, otherwise it won't work properly in non-
Microsoft browsers. The z-index I've set to 10, which should be sufficient to float over any non-
windowed items on your page.

The important part is the clipping. This gives us the boxed view of the news div, by cutting
(clipping) portions off of the viewable region. To explain clipping a little, you basically start at
the top of the rectangle, and move to the right, then the bottom, then the left. The top and the left
values describe how many pixels to exclude from the viewing area, and the right and bottom
values are equal to the width and height (respectively), minus the clipping amount.

I also added 40 pixels of padding at the top, just to set an initial blank area, so that the news
begins scrolling from the bottom of the clipped area. Now let's get into the JavaScript, shall we?

c




c


(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);">

c



c
 

(Page 4 of 4 )

This is a somewhat simplified version of the scroll function to get you started. Now don't let that
scare you, it may suit your needs perfectly! Just beware that you'll have to establish an exact size
for the news div, and that will probably be determined by the amount of content contained
within. This will work absolutely fine if you've hard-coded the news in. Whenever you change
the news, you can change the global variables to increase or decrease the height of the div. If you
don't, you'll end up cutting off some of the news, or scrolling through enormous amounts of
whitespace.

However, where you might need to elaborate on this code, is in the case of a dynamic news
engine, such as with Mambo, or any other CMS. Here you're loading news content on the fly,
and randomly at that. You don't know what the size will be, and it would be a difficult discipline
to maintain a standard amount of content in your news blurbs.

So what you might want to do is store the news in a hidden form element. You can then
determine approximately how much space you'll need to display it by using the .length
property. Önce you've set the height of the div, you can then dump the content into it with the
ever-useful '.innerHTML' property. This will give you the degree of flexibility you need. Öf
course, you may come up with your own crafty solution to this problem, so once again feel free
to share with all in the forum!

However you decide to use this, I almost guarantee you will enjoy it, as will those browsing your
website . You can add in funky functionality, like letting them stop the scrolling to read with a
mouseover, or whatever else you can come up with! Have fun!

By the way, here's all the code in one chunk, to save you a lot of copying and pasting. (I know, I
know, I'm very considerate. Also humble, damn it.)

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

<div id="news">
<?php mosLoadModules ( 'inset' ); ?>
</div>

<style type="text/css">
#news {

position: absolute;
visibility: visible;
z-index: 10;
top: 20px;
left: 650px;
height: 40px;
width: 150px;
clip: rect(0px, 100px, 60px, 0px);
border-width: 0px;
padding-top: 40px;
}
</style>

<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;

var theTop = 20;

var theHeight = 100;

var theWidth = 150;

var theLeft = 650;

var toClip = 55;

function scrollNews( newsDiv, toMove ) {

theDiv = getObject( newsDiv.toString() );

if ( theDiv == null ) { return; }

if ( document.layers ) {

theDiv.clip.top = toMove;

theDiv.clip.bottom = toMove + toClip;

theDiv.top = theTop - toMove;

} else {

theDiv = theDiv.style;

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

"px " + (toMove + toClip) + "px 0px)";

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

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';

toMove = (toMove + 1);

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

</script>