Home arrow JavaScript arrow Page 4 - 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 - Conclusion
(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. Once 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. Of 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' ); ?>

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


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



DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.

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-2018 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials