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

Scrollbars for Navigator 4 LAYERs, Part I
makeScroll()

The Complete Function

The complete makeScroll() looks like this:

function makeScroll(){
   elMain =  document.elCont.document.elMain;
   elScroll = document.elCont.document.elScroll;
   if (elMain.origTop) elMain.top = elMain.origTop;
   elMain.origTop = elMain.top;
   elMain.clip.top = 0;
   if (elMain.origHeight) elMain.clip.height = elMain.origHeight;
   elMain.origHeight = elMain.clip.height;
   docHeight = elMain.document.height;
   lyrHeight = elMain.clip.height;
   if (docHeight <= lyrHeight){
      elScroll.visibility = "hide";
      return;
   }
   elThumb = elScroll.document.elThumb;
   elThumb.top = barWidth;
   elThumbBot = elThumb.document.elThumbBot;
   elvBarHeight = elScroll.clip.height - (barWidth*2);
   thumbHeight = Math.max((lyrHeight*elvBarHeight)/docHeight,thumbMinHeight)
   elThumb.clip.height = thumbHeight;
   elThumbBot.top = thumbHeight - elThumbBot.clip.height;
   thumbMaxTop = (elvBarHeight + barWidth) - thumbHeight;
   docToTravel = docHeight - lyrHeight;
   scrToTravel = elvBarHeight - thumbHeight;
   scrPixels = scrToTravel/docToTravel;
   docPixels = docToTravel/scrToTravel;
   upImage = elScroll.document.images[0];
   elButtonBot = elScroll.document.elButtonBot;
   downImage = elButtonBot.document.images[0];
   upImage.direction = 0;
   downImage.direction = 1;
   upImage.onmousedown = butDown;      
   downImage.onmousedown = butDown;
   elThumb.captureEvents(Event.MOUSEDOWN); 
   elThumb.onmousedown = thumbDown;
   elBG = elScroll.document.elBG;
   elBGcol = elScroll.document.elBGcol;
   elBG.captureEvents(Event.MOUSEDOWN);
   elBG.onmousedown = bgDown;
   elScroll.visibility="show";
}

Line-by-Line

First on our agenda is to give one-word identifiers to the two distinct layers we will have cause to refer to over and over again, the content layer and the scrollbar. Although the current version refers to the hard-coded layers, we will always want to identify a content layer and its associated scrollbar. The first two lines, therefore, achieve this identification and are the last statements we will discuss that refer directly to our example. The remainder of our discussion is generic and will always apply:

    elMain = document.elCont.document.elMain;
    elScroll = document.elCont.document.elScroll;

With these two layers associated with our technique identified, we get down to the fun stuff.

Remember that makeScroll() is called every time the content layer is loaded. This may occur after a scroll of the previous content. We, therefore, first ensure that the content is positioned at the beginning:

    if (elMain.origTop) elMain.top = elMain.origTop;
    elMain.origTop = elMain.top;
    elMain.clip.top = 0;

When we scroll, elMain's top property is constantly changed. The first time makeScroll() is called, no scroll has yet occurred, so we assume that top is the default specified by the author in the layer definition. (In our example, for instance, it is 2) We will assign this to a custom property of the content layer, origTop. The first time through, elMain.origTop does not exist, so the first statement above is overlooked. The next line assigns top to origTop. We now have a variable that always reflects the original default top of elMain, whether it has been scrolled or not. On our next visits to makeScroll(), origTop will exist, so we will position elMain to the default top.

The clip.top property, also changed during a scroll, is set to 0. Now our content layer displays the first layerful of content.

Having set the clip.top, we must set the clip.height as well, since this, too, has changed during a scroll. We track the original clip.height with the same logic used for tracking the original top:

    if (elMain.origHeight) elMain.clip.height = elMain.origHeight;
    elMain.origHeight = elMain.clip.height;

Next, we need to know how much of the content is not in the visible layer. That is, how much is off the bottom of the layer. The document.height property gives us the complete content height, visible or hidden, and clip.height tells us how high the content layer is. We assign these values to docHeight and lyrHeight, respectively:

    docHeight = elMain.document.height;
    lyrHeight = elMain.clip.height;

If the content height is less than the layer height, we will not need a scrollbar, so elScroll is hidden (it may be visible from a previous load) and makeScroll() terminates execution:

    if (docHeight <= lyrHeight){
        elScroll.visibility = "hide";
        return;
    }

No scrollbar is needed, so none is created. If, of course, the content height is greater than the layer height, there is content in need of scrolling, so makeScroll() continues execution.

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