so-youNET // Version 8 // Fresh and Funky

Custom scroll bar tutorial

Have u seen those scrollbars that some people have on their site where the scrollbars are their own images they made? ever wanted one like that? well now you can!
Ok copy this bit of the code and put it in the <head> tag before </head>

<SCRIPT language=javascript> // Made by geeeet@ghtml.com // Keep these two lines and you're free to use this code // Known bugs : // If ie4.5 mac, please press apple-t to remove sidebar, otherwise everything is pushed 20px to the right... // Corrected bugs : // 25.01.2001 - When the height of the span "content" was less than the height of the span "contentClip" a javascript error occured, function changed : move() // 21.02.2001 - Scrolling text wasn't selectable in ie, function changed : move() // 05.03.2001 - Ie x and y coordinates was wrong when page was scrolled, function changed : getMouse() // 19.04.2001 - Finally able to remove browser-scrollbar if content is longer than the browser is high: // Just put this in the style-tag right before the end head-tag: // body {margin-left:0; margin-right:0; margin-top:0; margin-bottom:0; width:100%;height:100%;overflow:hidden} // Touch me here :-) var upH = 8; // Height of up-arrow var upW = 14; // Width of up-arrow var downH = 8; // Height of down-arrow var downW = 14; // Width of down-arrow var dragH = 8; // Height of scrollbar var dragW = 14; // Width of scrollbar var scrollH = 262; // Height of scrollbar var speed = 4; // Scroll speed // And now... go to the bottom of the page... // Browser detection var dom = document.getElementById ? true:false; var nn4 = document.layers ? true:false; var ie4 = document.all ? true:false; var mouseY; // Mouse Y position onclick var mouseX; // Mouse X position onclick var clickUp = false; // If click on up-arrow var clickDown = false; // If click on down-arrow var clickDrag = false; // If click on scrollbar var clickAbove = false; // If click above scrollbar var clickBelow = false; // If click below scrollbar var timer = setTimeout("",500); // Repeat variable var upL; // Up-arrow X var upT; // Up-arrow Y var downL; // Down-arrow X var downT; // Down-arrow Y var dragL; // Scrollbar X var dragT; // Scrollbar Y var rulerL; // Ruler X var rulerT; // Ruler Y var contentT; // Content layer Y; var contentH; // Content height var contentClipH; // Content clip height var scrollLength; // Number of pixels scrollbar should move var startY; // Keeps track of offset between mouse and span // Mousedown function down(e){ if((document.layers && e.which!=1) || (document.all && event.button!=1)) return true; // Enables the right mousebutton getMouse(e); startY = (mouseY - dragT); // If click on up-arrow if(mouseX >= upL && (mouseX <= (upL + upW)) && mouseY >= upT && (mouseY <= (upT + upH))){ clickUp = true; return scrollUp(); } // Else if click on down-arrow else if(mouseX >= downL && (mouseX <= (downL + downW)) && mouseY >= downT && (mouseY <= (downT + downH))){ clickDown = true; return scrollDown(); } // Else if click on scrollbar else if(mouseX >= dragL && (mouseX <= (dragL + dragW)) && mouseY >= dragT && (mouseY <= (dragT + dragH))){ clickDrag = true; return false; } else if(mouseX >= dragL && (mouseX <= (dragL + dragW)) && mouseY >= rulerT && (mouseY <= (rulerT + scrollH))){ // If click above drag if(mouseY < dragT){ clickAbove = true; clickUp = true; return scrollUp(); } // Else click below drag else{ clickBelow = true; clickDown = true; return scrollDown(); } } // If no scrolling is to take place else{ return true; } } // Drag function function move(e){ if(clickDrag && contentH > contentClipH){ getMouse(e); dragT = (mouseY - startY); if(dragT < (rulerT)) dragT = rulerT; if(dragT > (rulerT + scrollH - dragH)) dragT = (rulerT + scrollH - dragH); contentT = ((dragT - rulerT)*(1/scrollLength)); contentT = eval('-' + contentT); moveTo(); // So ie-pc doesn't select gifs if(ie4) return false; } } function up(){ clearTimeout(timer); // Resetting variables clickUp = false; clickDown = false; clickDrag = false; clickAbove = false; clickBelow = false; return true; } // Reads content layer top function getT(){ if(ie4) contentT = document.all.content.style.pixelTop; else if(nn4) contentT = document.contentClip.document.content.top; else if(dom) contentT = parseInt(document.getElementById("content").style.top); } // Reads mouse X and Y coordinates function getMouse(e){ if(ie4){ mouseY = event.clientY + document.body.scrollTop; mouseX = event.clientX + document.body.scrollLeft; } else if(nn4 || dom){ mouseY = e.pageY; mouseX = e.pageX; } } // Moves the layer function moveTo(){ if(ie4){ document.all.content.style.top = contentT; document.all.ruler.style.top = dragT; document.all.drag.style.top = dragT; } else if(nn4){ document.contentClip.document.content.top = contentT; document.ruler.top = dragT; document.drag.top = dragT; } else if(dom){ document.getElementById("content").style.top = contentT + "px"; document.getElementById("drag").style.top = dragT + "px"; document.getElementById("ruler").style.top = dragT + "px"; } } // Scrolls up function scrollUp(){ getT(); if(clickAbove){ if(dragT <= (mouseY-(dragH/2))) return up(); } if(clickUp){ if(contentT < 0){ dragT = dragT - (speed*scrollLength); if(dragT < (rulerT)) dragT = rulerT; contentT = contentT + speed; if(contentT > 0) contentT = 0; moveTo(); timer = setTimeout("scrollUp()",25); } } return false; } // Scrolls down function scrollDown(){ getT(); if(clickBelow){ if(dragT >= (mouseY-(dragH/2))) return up(); } if(clickDown){ if(contentT > -(contentH - contentClipH)){ dragT = dragT + (speed*scrollLength); if(dragT > (rulerT + scrollH - dragH)) dragT = (rulerT + scrollH - dragH); contentT = contentT - speed; if(contentT < -(contentH - contentClipH)) contentT = -(contentH - contentClipH); moveTo(); timer = setTimeout("scrollDown()",25); } } return false; } // reloads page to position the layers again function reloadPage(){ location.reload(); } // Preload function eventLoader(){ if(ie4){ // Up-arrow X and Y variables upL = document.all.up.style.pixelLeft; upT = document.all.up.style.pixelTop; // Down-arrow X and Y variables downL = document.all.down.style.pixelLeft; downT = document.all.down.style.pixelTop; // Scrollbar X and Y variables dragL = document.all.drag.style.pixelLeft; dragT = document.all.drag.style.pixelTop; // Ruler Y variable rulerT = document.all.ruler.style.pixelTop; // Height of content layer and clip layer contentH = parseInt(document.all.content.scrollHeight); contentClipH = parseInt(document.all.contentClip.style.height); } else if(nn4){ // Up-arrow X and Y variables upL = document.up.left; upT = document.up.top; // Down-arrow X and Y variables downL = document.down.left; downT = document.down.top; // Scrollbar X and Y variables dragL = document.drag.left; dragT = document.drag.top; // Ruler Y variable rulerT = document.ruler.top; // Height of content layer and clip layer contentH = document.contentClip.document.content.clip.bottom; contentClipH = document.contentClip.clip.bottom; } else if(dom){ // Up-arrow X and Y variables upL = parseInt(document.getElementById("up").style.left); upT = parseInt(document.getElementById("up").style.top); // Down-arrow X and Y variables downL = parseInt(document.getElementById("down").style.left); downT = parseInt(document.getElementById("down").style.top); // Scrollbar X and Y variables dragL = parseInt(document.getElementById("drag").style.left); dragT = parseInt(document.getElementById("drag").style.top); // Ruler Y variable rulerT = parseInt(document.getElementById("ruler").style.top); // Height of content layer and clip layer contentH = parseInt(document.getElementById("content").offsetHeight); contentClipH = parseInt(document.getElementById("contentClip").offsetHeight); document.getElementById("content").style.top = 0 + "px"; } // Number of pixels scrollbar should move scrollLength = ((scrollH-dragH)/(contentH-contentClipH)); // Initializes event capturing if(nn4){ document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP); window.onresize = reloadPage; } document.onmousedown = down; document.onmousemove = move; document.onmouseup = up; } </SCRIPT> <link rel="stylesheet" type="text/css" href="link.css"> <STYLE type=text/css> #content { POSITION: absolute } BODY { MARGIN: 0px; OVERFLOW: hidden; WIDTH: 100%; HEIGHT: 100% } </STYLE>

Then copy this bit of the code and put it in the <body> tag

<BODY leftMargin=0 topMargin=0 onload=eventLoader(); marginheight="0" marginwidth="0">  <SPAN id=up style="Z-INDEX: 1; LEFT: 280; WIDTH: 14px; POSITION: absolute; TOP: 0; HEIGHT: 380px"> <IMG src="up.gif" border=0 width="11" height="7"></SPAN>  <SPAN id=down style="Z-INDEX: 2; LEFT: 280; WIDTH: 14px; POSITION: absolute; TOP: 275; HEIGHT: 8px"> <IMG src="down.gif" border=0 width="11" height="7"></SPAN>  <SPAN id=drag style="Z-INDEX: 3; LEFT: 280; WIDTH: 14px; POSITION: absolute; TOP: 9; HEIGHT: 8px; cursor: hand"> <IMG src=drag.gif" border=0 width="11" height="8"></SPAN>  <SPAN id=ruler style="Z-INDEX: 4; LEFT: 235px; WIDTH: 14px; POSITION: absolute; TOP: 10px; HEIGHT: 8px"></SPAN>  <SPAN id=contentClip style="Z-INDEX: 5; LEFT: 2; VISIBILITY: visible; OVERFLOW: hidden; WIDTH: 278; CLIP: rect(0px 278px 284px 0px); POSITION: absolute; TOP: 3; HEIGHT: 284"> <SPAN id=content style="LEFT:2; TOP:3; WIDTH:278; HEIGHT: 284"> </SPAN></span></BODY></HTML> UR CONTENT HERE!! </body> </html>

ok now if u look through the code u will see that it tells you where to write things and what to change. Basically you have to draw an image for the up and down arrow and the drag bit of the scrollbar and then you save each one and put the link to them in the code where it says. Then you have to change the size of the box u want to scroll and the position of things. Its pretty simple as it tells you what to change :)

Hope that helps!