Define CSS like so (sizes/names should be changes appropriately):
#scrollOuter {
overflow: hidden;
width: 500px;
height: 160px;
}
#scrollInner {
white-space: nowrap;
overflow: hidden;
position: absolute;
top: 0;
left: 0;
clip: rect(0px, 500px, 160px, 0px);
}
Initialise the JS from the (use horizontal/vertical):
Set the links to do the scrolling:
Left
Right
End of instructions for use */
// Because we have globals, we can only have one instance of this per page
var scrollLength = scrollOffset = scrollTopLeft = scrollBottomRight = scrollFixed = 0;
var scrollEdge = '';
var scrollTimer;
function scrollInit(name, edge)
{
var div = bw.dom ? document.getElementById(name) : bw.ie4 ? document.all[name] : 0;
if (div)
{
scrollEdge = edge;
thisedge = (edge == 'horizontal') ? 'Width' : 'Height';
scrollLength = eval('div.scroll' + thisedge);
scrollTopLeft = 0;
scrollBottomRight = eval('div.parentNode.client' + thisedge);
thisfixed = (edge == 'horizontal') ? 'Height' : 'Width';
scrollFixed = eval('div.scroll' + thisfixed);
}
//alert('scrollLength: ' + scrollLength + '; scrollBottomRight: ' + scrollBottomRight);
}
function scrollNavOn(name)
{
if (scrollLength > scrollBottomRight) {
setStyle(name, 'display', 'block');
}
}
function scrollIt(name, edge, amount, time)
{
var div = bw.dom ? document.getElementById(name) : bw.ie4 ? document.all[name] : 0;
if (div)
{
while (scrollTopLeft + scrollOffset + amount < 0 || scrollBottomRight + scrollOffset + amount > scrollLength)
{
//amount = (amount > 0) ? amount-- : amount++;
if (amount > 0)
{
amount--;
} else if (amount < 0)
{
amount++;
}
if (amount == 0)
{
return;
}
}
scrollOffset += amount;
if (edge == 'horizontal')
{
div.style.clip = 'rect(0px, ' + eval(scrollBottomRight + scrollOffset) + 'px, ' + scrollFixed + 'px, ' + eval(scrollTopLeft + scrollOffset) + 'px)';
div.style.left = '-' + scrollOffset + 'px';
} else
{
div.style.clip = 'rect(' + eval(scrollTopLeft + scrollOffset) + 'px, ' + scrollFixed + 'px, ' + eval(scrollBottomRight + scrollOffset) + 'px, 0px)';
div.style.top = '-' + scrollOffset + 'px';
}
if (time && time != 0)
{
scrollTimer = setTimeout('scrollIt(\'' + name + '\', \'' + edge + '\', ' + amount + ', ' + time + ')', time);
}
}
}
function scrollStop()
{
if (scrollTimer)
{
clearTimeout(scrollTimer);
scrollTimer = false;
}
}
//-->