DHTML Lab: Scrollbars for Netscape Navigator Layers - dhtmlab.com | 12

Scrollbars for Navigator 4 LAYERs, Part I
makeScroll() - 2

Thumb Sizing

If makeScroll() decides that a scrollbar should be built, we first size the thumb. We assign the thumb layer to elThumb for easier reference and make sure that the thumb is also in its starting position, just below the square arrow image, which is as high as the scrollbar is wide (barWidth):

    elThumb = elScroll.document.elThumb;
    elThumb.top = barWidth;

Then, we create elThumbBot to represent the thumb-bottom layer:

    elThumbBot = elThumb.document.elThumbBot;

We calculate the size of the scrollbar, without the arrow images, that is, the elevator bar:

    elvBarHeight = elScroll.clip.height - (barWidth*2);

The ratio of thumb height to elevator bar height should be the same as that of the layer height to the content height. We can find the required thumb height with this statement:

    thumbHeight = (lyrHeight * elvBarHeight)/docHeight;

Recall, however, that we have set a minimum height for the thumb (thumbMinHeight). We therefore compare the result of the above stement with thumbMinHeight, and use whichever value is greater. The built-in JavaScript function Math.max can do this for us by comparing two values and returning the greater:

    thumbHeight = Math.max((lyrHeight*elvBarHeight)/docHeight,thumbMinHeight);

We immediately size the thumb to this value:

    elThumb.clip.height = thumbHeight;

Next, we position the thumb bottom, to create the 3D look of the thumb. The thumb-bottom layer is nested within the thumb layer, so we simply subtract the thumb-bottom height from the thumb height, to place it at the lowest position in the thumb:

    elThumbBot.top = thumbHeight - elThumbBot.clip.height;

When we drag a scrollbar thumb downward, it has a point past which it cannot move. That is, when it touches the bottom arrow button. We create a variable, thumbMaxTop, which represents the greatest value elThumb.top can have. Anything greater and it will be over the arrow button:

    thumbMaxTop = (elvBarHeight + barWidth) - thumbHeight

Scroll Distance Variables

With our thumb sized porportionally, we create docToTravel and tmbToTravel. These variables store the number of pixels that the content can be moved until the last layerful is displayed, and the number of pixels that the thumb can move for the same result, respectively.

    docToTravel = docHeight - lyrHeight;
    tmbToTravel = elvBarHeight - thumbHeight;

Now we create two very important variables:

    tmbPixels = tmbToTravel/docToTravel;
    docPixels = docToTravel/tmbToTravel;

tmbPixels stores the number of pixels the thumb should move for every pixel the content moves. docPixels is the number of pixels the content should move for every pixel the thumb moves. With these two variables in place, porportional content-thumb movement becomes easy.

Event Capturing

We now turn our attention to the arrow buttons. The top arrow button is the first image (index 0) in the elScroll layer. The bottom arrow button is the first image in the elButtonBot layer. Using their index, we identify them from the document.images arrays of the respective layers:

    upImage = elScroll.document.images[0];
    elButtonBot = elScroll.document.elButtonBot;
    downImage = elButtonBot.document.images[0];

We now have identifiers for the two arrow button images, upArrow and downArrow. We give both of them a direction property, to help us determine the scroll direction later. Since there are only two directions possible, we use the 0/1 Boolean:

    upImage.direction = 0;
    downImage.direction = 1;

Those of you who have read column 3, may remember our introduction of the mousedown event for images in NS4. This powerful event is nowhere documented by Netscape and remains mostly unused. For our technique, it's a must, so we assign the butDown() function to the mousedown event handlers of the images:

    upImage.onmousedown = butDown;
    downImage.onmousedown = butDown;

Since we will be dragging the thumb, we need to be alerted to the user's mouse press on the thumb, so elThumb captures the mousedown event:

    elThumb.captureEvents(Event.MOUSEDOWN); 
    elThumb.onmousedown = thumbDown;

Our last group of statements set up the elevator bar mousedown:

    elBG = elScroll.document.elBG;
    elBGcol = elScroll.document.elBGcol;
    elBG.captureEvents(Event.MOUSEDOWN);
    elBG.onmousedown = bgDown;

We identify the default light-shaded layer (elBG) and the dark-shaded one (elBGcol). Since elBG is the one originally visible, we capture its mousedown event, and assign the bgDown() function to it.

Finally, the scrollbar is made visible:

    elScroll.visibility = "show";

Therefore, after a visit to makeScroll(), we have:

1. identified all our layers
2. sized the scrollbar thumb
3. determined all thumb-content ratios
4. assigned functions to be executed for the arrow button, thumb and elevator bar mousedowns

Our scrollbar is now visible and awaits a user event.

Produced by Peter Belesis and

All Rights Reserved. Legal Notices.
Created: Jan 12, 1999
Revised: Jan 12, 1999

URL: https://www.webreference.com/dhtml/column23/NSscrMake2.html