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!
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:
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.