Dynamic News Upscroller with DOM and CSS and XHTML and Accessibility and other things like that...

Instructions are for pussies, give me the files!

O.K., here you go...

Reasons why news scrollers are bad:

Reasons why news scrollers are good:

Why this script does not suck quite as much as all the others:

How to use this script (it is called DOMnews, by the way)

After you downloaded the zip you unpack it and you will see three things: A demo page, a demo CSS and the script itself.

Your HTML needs the following to use DOMnews:

The script will automatically add a class called "hasJS" to the element with the ID "news" when JavaScript is available. This allows you to style it differently.

It will also add a paragraph with a link allowing the visitor to stop the scroller after the news element. This paragraph gets the ID "DOMnewsstopper". The text content of that link can be changed in the script by changing a variable.

Your CSS to make the scroller work:

/* the news box */
#news
{
	width:200px;
}
/* the news box with JS */
#news.hasJS
{
	height:60px;
	overflow:hidden;
	position:relative;
}
/* The nested UL with JS */
#news.hasJS ul
{
	position:absolute;
	top:60px;
	left:0;
}

The "news" element needs a width and needs to be relatively positioned when JavaScript is available. All overflowing content needs to be hidden and you can fix the height.

The list inside the element needs to be positioned absolutely and get a top value of the height of the element - to hide it.

Things to change in the script

The script has some variables you can play with, they are quite self explanatory:

// initial position 
var dn_startpos=60; 			
// end position
var dn_endpos=-120; 			
// Speed of scroller 
// higher number = slower scroller 
var dn_speed=30;				
// ID of the news box
var dn_newsID='news';			
// class to add when JS is available
var dn_classAdd='hasJS';		
// Message to stop scroller
var dn_stopMessage='Stop scroller';	
// ID of the generated paragraph
var dn_paraID='DOMnewsstopper';

Any change below these variables and the onload section, where you can add more scripts to be run onload, will result in rashes, bad luck and your pets running away from you. If you really think you can make this script better, then contact me and I will talk it over and include changes here. Please do not butcher this script and republish it so that I will get emails asking why your changes don't work. Who am I kidding? Nobody is reading this!

Blog entries

301 Moved Permanently

Moved Permanently

The document has moved here.


Apache/2.2.22 Server at www.wait-till-i.com Port 80

Testimonials: