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

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

Logo

Scrollbars for Navigator 4 LAYERs, Part I
elevator bar scrolling


Mousing Down on the Elevator Bar

When we mousedown on the light-shaded elevator bar, bgDown() is called:

function bgDown(e){
    dir = (e.pageY < elThumb.pageY) ? -1 : 1;
    captureEvents(Event.MOUSEUP);
    onmouseup = bgUp;
    bgMove(e);
    ev = e;
    bgTimer = setTimeout("thumbTimer = setInterval(bgMove,repeatInt,ev)",origInt);
    return false;
}

First, we create a new dir variable that is assigned -1 if we clicked above the thumb (e.pageY < elThumb.pageY) and 1 if we clicked below the thumb. We again capture the mouseup event and direct it to execute bgUp(). Then, we call bgMove() once. The event object, e, is assigned to a new variable, ev, so that we can pass it to the timers in the next statement.

We now create the "pause" and the repetitive scrolling in the same way that butDown() did, using a setTimeout() to call setInterval(). Now, however, we are calling bgMove().

Moving the Thumb

Recall how we described the elevator-bar mousedown repeated move earlier in the column:

In bgMove(), therefore, we first check the position of the thumb. If it is under the mouse, bgUp() is called and the function returns.

function bgMove(e){
    if (e.pageY>elThumb.pageY&&e.pageY<=elThumb.pageY+elThumb.clip.height)
        { bgUp(); return }
    elThumb.top = Math.min(Math.max(elThumb.top+elThumb.clip.height*dir,barWidth),thumbMaxTop);
    elBGcol.top = (dir==1) ? elThumb.top : barWidth;
    elBGcol.clip.bottom = (dir==1) ? tmbToTravel : elThumb.top-barWidth;
    elBGcol.moveAbove(elBG);
    docAlign();
}

If the thumb is not under the mouse, the function continues. First it positions the thumb by a full thumb height in the direction of the event: 

elThumb.top + elThumb.clip.height * dir
For example, if the thumb top is at 86 pixels, and the thumb is 50 pixels high, and we click under the thumb, the above equation becomes: 
86 + (50 * 1)
136 pixels

The new thumb top is 136. Notice the use of dir (-1 or 1) to move the thumb up or down.

Our function compares the new proposed position to the top-most and bottom-most allowed thumb positions in the usual manner, and then moves the thumb.

Now, we must flash the dark-shaded version of the elevator bar (elBGcol). If dir is 1 (downward movement), elBGcol is positioned same as the thumb, and the bottom clip is set to tmbToTravel. This results in elBGcol being visible only between the bottom of the thumb and the bottom arrow. If the mousedown occurred above the thumb, elBGcol is positioned under the top arrow (barWidth) and clipped when the thumb begins (elThumb.top-barWidth).

Once elBGcol is positioned, it is made visible by being placed above elBG (the light-shaded version), using the moveAbove() method.

Finally, docAlign() is called to move the content layer.

Mousing Up

When bgUp() is called it stops the scrolling by calling clearTimers() and releases the mouseup event. It then moves the light-shaded bar (elBG) above elBGcol, hiding it and restoring the default look. 
function bgUp(){
    clearTimers();
    releaseEvents(Event.MOUSEUP);
    elBG.moveAbove(elBGcol);
    return false;
}

That about does it for the scrollbar techniques. Let's wrap this up with a look at reloading the content layer with a new external file.



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/NSscrBG.html