Homemade Scrollbars

This code is for an external, homemade scroolbar set, requiring 8 images:

arrowDown_on.gif --Active Button used when scrolling down (down arrow) http://www.boomspeed.com/buzz_killr_x/arrowDown_on.gif

arrowDown_off.gif --Inactive Button http://www.boomspeed.com/buzz_killr_x/arrowDown_off.gif

arrowUp_on.gif --Active Button used when scrolling up (up arrow) http://www.boomspeed.com/buzz_killr_x/arrowUp_on.gif

arrowUp_off.gif --Inactive Button http://www.boomspeed.com/buzz_killr_x/arrowUp_off.gif

arrowTop_on.gif --Active Button used to go straight to top of page (bigger up arrow) http://www.boomspeed.com/buzz_killr_x/arrowTop_on.gif

arrowTop_off.gif --Inactive Button http://www.boomspeed.com/buzz_killr_x/arrowTop_off.gif

arrowBottom_on.gif --Active Button used to go straight to bottom of page (bigger down arrow) http://www.boomspeed.com/buzz_killr_x/arrowBottom_on.gif

arrowBottom_off.gif --Inactive Arrow http://www.boomspeed.com/buzz_killr_x/arrowBottom_off.gif


<script>
var newWindow = null;
var scrolling = 0; // Controls whether the layer is scrollin or not
var yT = 25; // Pixel position the top of the scrolling layer should be set to
var lT = 25; // Initial position for the top of the layer
var yI = 5; // Increment that the scrolling layer should move at
var yH = 0;
var domStyle; // Stores the generic DOM for the scrolling layer to access style properties
var dom; // Stores the generic DOM for the scrolling layer
var isDHTML = 0;
var isLayers = 0;
var isAll = 0;
var isID = 0;

if (document.images){
imag = new Array();

imag[0] = "media/arrowUp_off.gif";
imag[1] = "media/arrowUp_on.gif";

imag[2] = "media/arrowDown_off.gif";
imag[3] = "media/arrowDown_on.gif";

imag[4] = "media/arrowTop_off.gif";
imag[5] = "media/arrowTop_on.gif";

imag[6] = "media/arrowBottom_off.gif";
imag[7] = "media/arrowBottom_on.gif";

im = new Array();
for (var i = 0; i < imag.length; i++)
{
im[i] = new Image();
im[i].src = imag[i];
}
}

if (document.getElementById) {isID = 1; isDHTML = 1;}
else {
if (document.all) {isAll = 1; isDHTML = 1;}
else {
browserVersion = parseInt(navigator.appVersion);
if ((navigator.appName.indexOf('Netscape') != -1) && (browserVersion == 4)) {isLayers = 1; isDHTML = 1;}
}}


var isIE = 0;

if (navigator.appName.indexOf('Microsoft Internet Explorer') != -1) {isIE = 1;}

var xC = 5;
var theDelay = 0;
var frameRateMax = 48;
var frameRate = 1;

function scrollPageTo(xN) {

if (xC > xN) {
xC = xC - frameRate;
posDif = (xC - xN)/(frameRate/2);
if (xC < xN) { frameRate = 1; return; }
}
else {
xC = xC + frameRate;
posDif = (xN - xC)/(frameRate/2);
if (xC > xN) { frameRate = 1; return; }
}
if (isIE) {
document.body.scrollLeft = xC;
}
else {
scrollTo(xC,0);
}
if ((posDif >= frameRateMax) && (frameRate != frameRateMax)) frameRate = frameRate + 1;
else if (frameRate > 1) frameRate = frameRate - 2;
setTimeout ('scrollPageTo(' + xN + ')',theDelay);
}



function findDOM(objectID1,objectID2,withStyle) {
if (withStyle == 1) {
if (isID) { return (document.getElementById(objectID2).style) ; }
else {
if (isAll) { return (document.all[objectID2].style); }
else {
if (isLayers) {
if (objectID1) { return (document.layers[objectID1].layers[objectID2]); }
else { return (document.layers[objectID2]); }
}
};}
}
else {
if (isID) { return (document.getElementById(objectID2)) ; }
else {
if (isAll) { return (document.all[objectID2]); }
else {
if (isLayers) {
if (objectID1) { return (document.layers[objectID1].layers[objectID2]); }
else { return (document.layers[objectID2]); }
}
};}
}
}


function openWindow(contentURL,windowName,windowWidth,windowHeight) {
widthHeight = 'height=' + windowHeight + ',width=' + windowWidth + ',scrollbars=yes';
newWindow = window.open(contentURL,windowName,widthHeight);
newWindow.focus()
}

function closeWindow() {
if (newWindow != null) {
newWindow.close();
newWindow = null;
}
}
function startScroll(objectID1,objectID2,direction) {
domStyle = findDOM(objectID1,objectID2,1);
dom = findDOM(objectID1,objectID2,0);
scrolling = 1;
yT = domStyle.top;
if (document.getElementById) {
pxLoc = yT.indexOf('px');
if (pxLoc >= 1) yT = yT.substring(0,pxLoc);
}
if (window.innerHeight != null)
yH = window.innerHeight - 25;
else
yH = document.body.clientHeight - 25;
if (dom.offsetHeight != null)
yH = yH - dom.offsetHeight;
else
yH = yH - dom.clip.height;
scroll(direction);
}

function scroll(direction) {
if (scrolling == 1) {
if ((direction == 1) && (yT <= lT)) {
yT = (yT/1) + yI;
if (yT > lT) yT = lT;
domStyle.top = yT;
}
else {
if ((direction == 0) && (yT >= yH)) {
yT -= yI;
if (yT < yH) yT = yH;
domStyle.top = yT; }
}
if (document.getElementById) {
yT = domStyle.top;
pxLoc = yT.indexOf('px');
if (pxLoc >= 1) yT = yT.substring(0,pxLoc);
}
code2run = 'scroll('+ direction + ')';
setTimeout(code2run,0);
}
return false;
}

function stopScroll() {
scrolling = 0;
dom = null;
domStyle = null;
return false;
}

function URB(objectID1,objectID2) {
domStyle = findDOM(objectID1,objectID2,1);
dom = findDOM(objectID1,objectID2,0);
if (window.innerHeight != null)
yH = window.innerHeight - 25;
else
yH = document.body.clientHeight - 25;
if (dom.offsetHeight != null)
yH = yH - dom.offsetHeight;
else
yH = yH - dom.clip.height;
domStyle.top = yH;
dom = null;
domStyle = null;
}

function URT(objectID1,objectID2) {
domStyle = findDOM(objectID1,objectID2,1);
domStyle.top = lT;
dom = null;
domStyle = null;
}

function toggle(imgName,num){
if (document.images && imgName){
imgName.src = im[num].src;
}
return false;
}
</script>

**Please do not use my images, as they were provided for examples only.

It would be better if you included a html example page so we could see what's gonna happen before jumping thru all those hoops. :D

This simple CSS script works just as good, and much easier

<style type="text/css">
BODY {scrollbar-base-color:gray;
scrollbar-arrow-color:black;
scrollbar-darkshadow-color:white;
scrollbar-3dlight-color:black;
}
</style>



Of course, the colors can be modified to suit your desires.


:thumbsup:

LOL, BURN!!


Oh, well actually, it's not really the same, with the CSS thing, it's always the same arrows. He has custom arrows.

I am working on a site that has them in it, but it will be tomorrow at earliest before its up. In the meantime, go to www.sandmanfilm.org to see them in action.

I had another set that I got out of a book, DHTML & CSS, but they are horrible, so I found their design and modified it enough so that it isn't quite the same.

The site you posted says there is a "bug" in Netscape that will not allow you to view the site. It is just Flash. What bug is there? Is it the arrow script?

MNS

Beats me, I use IE and Opera. It's not my site, but here's a theory. It uses several different scripts, anyone who has seen can explain it, that do strange things, frame transitions, scroll bars, etc. I am having a little trouble getting the bars to work on my site, don't know why. As soon as I finish it, I'll get it up, and then you should be able to see it.

Looking at the code, it's actually an IE/Opera bug that he's taking advantage of. Netscape is doing it right.

He uses tables for the arrow navigation, and he set certain widths for the TD values. Because of default padding issues, the arrows are side-by-side in Netscape, while they are all vertical in IE/Opera. He needs to fix his tables (i.e. use 4 TR/TD's instead of 2) in order for it to work just fine.

No, it's not a Netscape bug, it's the author's poor coding... :rolleyes:

Skyzyx

Thanks for that clarification.

MNS

That site's pretty cool...I just thought it was a huge page turned sideways with anchors.
A new black and white silent movie! What will they think of next? :rolleyes: