Creating a Scrolling News Panel - I've Got Good News, and I've Got Bad News
(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!
Other 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>
Our 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?
Next: The Code >>
More JavaScript Articles
More By Justin Cook
/ 59 
