Instructions are for pussies, give me the files!
O.K., here you go...
- DOMnews 1.0 (ZIP file with the script, the demo css and a demo page!)
- Comment on the blog
Reasons why news scrollers are bad:
- They are tacky, and reek of end 90ies web design
- They are annoying attention seekers
- They lure designers into thinking they can define the size of the screen, they don't, the visitors do, each of them for themselves.
- They lure editors into adding far too much content to the page - hidden is not gone, think of the screen reader and text browser visitors.
- Considering "banner blindness", they might be useless
- They might cause memory leaks and slow browsing in some browsers on low spec machines
- They might confuse visitors with attention deficits or other disorders.
Reasons why news scrollers are good:
- Clients love them
- That other site has them (you know, that really cool, bleeding edge one, the... what? Bankrupt? Well, it was a cool site though!)
Why this script does not suck quite as much as all the others:
- It uses Unobtrusive JavaScript, which means it only applies the functionality when it is possible and uses a normal list of items in your HTML.
- It was developed with modern browsers (Firefox to be exact) and uses the W3C DOM and not some bespoke one by unknown companies.
- It has a "stop scroller" functionality, which is a requirement if you want to add a WCAG banner to your site.
- It has no "DHTML" in its name
- It uses setInterval instead of setTimeout, which makes it almost usable and leaks less memory (who will clean all the memory spillage? You?)
- It is fully styleable by you, and you don't need to know anything about JavaScript to style it!
- It pauses when you move the mouse over it
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:
- An element with the ID "news"
- An unordered list (UL, LI etc...) in that element
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!