NOTE: The code shown here does not exactl;y reflect the code presented in the Independent article presented on Monday, Febrary 22nd. This code includes several extra features as shown in the example.
The Frameset
<FRAMESET COLS="35,*" BORDER="0" FRAMESPACING="0" FRAMEBORDER="NO">
<FRAME SRC="scrollBar.html" SCROLLING="NO" NORESIZE >
<FRAME SRC="content.html" NAME="content" SCROLLING="NO">
</FRAMESET>
The JavaScript in scrollbar.html
docObj = (document.layers) ? 'document' : 'document.all';
styleObj = (document.layers) ? '' : '.style';
var scrolling = 0;
var yT = 5;
var dom;
function startScroll(currElem,frameName,direction) {
if (document.layers || document.all){
dom = eval('parent.'+ frameName + '.' + docObj + '.' + currElem + styleObj);
scrolling = 1;
if (document.layers) { yT = dom.top; yH = 5 - (dom.clip.height); }
else { yH = 5 - (dom.pixelHeight); }
scroll(yT,yH,direction);
}
}
function scroll(yT,yH,direction) {
if (scrolling == 1) {
if ((direction == 1) && (yT < 5)) { yT += 8; dom.top = yT; }
else { if ((direction == 0) && (yT > yH)) { yT -= 8; dom.top = yT; };}
if (document.all) { yT = dom.top; }
setTimeout('scroll(' + yT + ',' + yH + ',' + direction + ')', 1);
}
return false;
}
function stopScroll(direction) {
if (document.layers || document.all){
scrolling = 0;
return false;
}
}
The JavaScript in scrollbar.html for return to top, go to bottom, and to make the arrows light up!
(Include this with the JavaScript above)
if (document.images){
imag = new Array();
imag[0] = "up_off.gif";
imag[1] = "up_on.gif";
imag[2] = "down_off.gif";
imag[3] = "down_on.gif";
imag[4] = "top_off.gif";
imag[5] = "top_on.gif";
imag[6] = "bottom_off.gif";
imag[7] = "bottom_on.gif";
im = new Array();
for (var i = 0; i < imag.length; i++)
{
im[i] = new Image();
im[i].src = imag[i];
}
}
function URB(currElem,frameName) {
if (document.layers || document.all){
dom = eval('parent.'+ frameName + '.' + docObj + '.' + currElem + styleObj);
if (document.layers) { yH = 5 - (dom.clip.height); }
else { yH = 5 - (dom.pixelHeight); }
dom.top = yH;
}
}
function URT(currElem,frameName) {
if (document.layers || document.all){
dom.top = 5;
}
}
function toggle(imgName,num){
if (document.images && imgName){
imgName.src = im[num].src;
}
return false;
}
The HTML Links in scrollbar.html
// Link to scroll content up
<A HREF="JavaScript:return false;" onMouseOver="window.status='Up'; return true;" ONMOUSEDOWN="toggle(up,1); startScroll('scrollArea','content',1); return false;" ONMOUSEUP="stopScroll(1); toggle(up,0);">
<IMG HEIGHT="22" WIDTH="25" SRC="up_off.gif" BORDER="0" VSPACE="5" NAME="up">
</A>
// Link to return to top
<A HREF="JavaScript:return false;" onMouseOver="window.status='Return To Top'; return true;" ONMOUSEDOWN="toggle(top,5); URT('scrollArea','content');return false;" ONMOUSEUP= "toggle(top,4);">
<IMG HEIGHT="31" WIDTH="25" SRC="top_off.gif" BORDER="0" VSPACE="5" NAME="top">
</A>
// Link to go to bottom
<A HREF="JavaScript:return false;" onMouseOver="window.status='Go To Bottom'; return true;" ONMOUSEDOWN=" toggle(bottom,7); URB('scrollArea','content'); return false;" ONMOUSEUP="toggle(bottom,6);">
<IMG HEIGHT="32" WIDTH="25" SRC="bottom_off.gif" BORDER="0" VSPACE="5" NAME="bottom">
</A>
// Link to scroll content down
<A HREF="JavaScript:return false;" onMouseOver="window.status='Down'; return true;" ONMOUSEDOWN="toggle(down,3); startScroll('scrollArea','content',0); return false;" ONMOUSEUP="stopScroll(0); toggle(down,2);">
<IMG HEIGHT="23" WIDTH="25" SRC="down_off.gif" BORDER="0" VSPACE="5" NAME="down">
</A>
The CSS in content.html
<STYLE TYPE="text/css"><!--
#scrollArea {
position: absolute;
top: 5px;
left: 15px }
-->
</STYLE>
The scroll area in content.html
<SPAN ID="scrollArea">
Content goes here...
</SPAN>