| home / experts / dhtml / column23 |    |
|
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().
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 * dirFor 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.
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
Jupitermedia Corporation has two divisions: Jupiterimages and JupiterOnlineMedia
Legal Notices, Licensing, Reprints, Permissions, Privacy Policy.
Advertise | Newsletters | Tech Jobs | Shopping | E-mail Offers
All Rights Reserved. Legal Notices.
Created: Jan 12, 1999
Revised: Jan 12, 1999
URL: http://www.webreference.com/dhtml/column23/NSscrBG.html
