/*
CSS Scroller
You are free to use this script as long as the copyright details below are shown
CSS Scroller - (c) 2006 KD Web - http://www.kdweb.co.uk
TESTED IN Firefox 1.5 and 2.0, IE 6 and 7
Put the code shown on the next line in the section of your page
In your HTML code, put in the following divs (put your scrolling content inbetween
the scrollContent div):
Add the following code to the up arrow graphic (or whatever you want to control the motion):
onmouseover="scroller('up',2,1); return false;" onmouseout="scroller('stop',0,1); return false;"
eg 
Add the following code to the down arrow graphic (or whatever you want to control the motion):
onmouseover="scroller('up',2,1); return false;" onmouseout="scroller('stop',0,1); return false;"
eg
The number "2" is the speed of the scroller. Change this number to alter the speed of scrolling
(The higher the number entered the SLOWER the motion because this is the delay between repositioning
the content div)
use the following CSS to style the scroller and scroll container
(change the widths and heights as required - you do not need to change the height
off the scrollContent div as this is done automatically
#scroller {
height: 62px;
width: 176px;
overflow:hidden;
position: relative;
}
#scrollContent {
position: absolute;
width: 176px;
}
*/
var recurse = "";
function scroller(direction,speed,clear) {
if(clear==1) {
// function has been called by a user so stop the recursive function
window.clearTimeout(recurse);
}
var scrollContent = document.getElementById("scrollContent");
var scrollContainer = document.getElementById("scroller");
var contentHeight = scrollContent.offsetHeight;
var containerHeight = scrollContainer.offsetHeight;
var currentTop = scrollContent.style.top;
currentTop = currentTop.replace(/px/,"");
if(direction == "down") {
// move down
if(currentTop < containerHeight ) {
moveAmount = parseInt(currentTop) + 1;
scrollContent.style.top = moveAmount + "px";
} else {
// start scrolling again from bottom of content
scrollContent.style.top = "-" + contentHeight + "px";
}
recurse = window.setTimeout('scroller("' + direction + '",' + speed + ')',speed);
} else if(direction == "up") {
//move up
if(currentTop > -contentHeight) {
moveAmount = parseInt(currentTop) - 1;
scrollContent.style.top = moveAmount + "px";
} else {
// start scrolling again from top of content
scrollContent.style.top = containerHeight + "px";
}
recurse= window.setTimeout('scroller("' + direction + '",' + speed + ')',speed);
} else {
// stop
window.clearTimeout(recurse);
}
}
// initiate scroller once the page has finished loading
// the higher the number the slow it goes - the number is the number
// of milliseconds to wait before moving the content up/down
// (comment out the below code if you do not want it to start scrolling on load)
/*window.onload = function() {
scroller("up",20);
}
*/