Home arrow JavaScript arrow Page 2 - 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 - 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!

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

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

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;


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?

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