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

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

Logo

Scrollbars for Navigator 4 LAYERs, Part I
the scrollbar HTML


As mentioned earlier, our complete script next column will generate scrollbars on-the-fly. Our present example will be hard-coded. If we understand how to build the scrollbar with in-page HTML and/or CSS, then the script writes itself, since the end product is already tested.

On the left, below, is a static scrollbar, built using the HTML on the right. Since our technique is NS4-related, we have used the <LAYER> tag. LAYER, with its HTML syntax, gives us a quicker visual comprehension of the scrollbar component parts:

<LAYER ID=elScroll LEFT=100 TOP=230 WIDTH=16 CLIP=16,200>
  <IMG SRC="butTu.gif" WIDTH=16 HEIGHT=16 BORDER=0 HSPACE=0 VSPACE=0>
  <LAYER ID=elBGcol LEFT=0 TOP=16 CLIP=16,250 BACKGROUND="barBgBl.gif"></LAYER>
  <LAYER ID=elBG LEFT=0 TOP=16 CLIP=16,250 BACKGROUND="barBg.gif"></LAYER>
  <LAYER ID=elThumb LEFT=0 TOP=16 WIDTH=16 CLIP=16,100 BACKGROUND="tmbBg.gif">
    <IMG SRC="tmbTop.gif" WIDTH=16 HEIGHT=2 BORDER=0 HSPACE=0 VSPACE=0 ALIGN=RIGHT>
    <LAYER ID=elThumbBot LEFT=0 TOP=98 WIDTH=16 CLIP=16,2>
        <IMG SRC="tmbBot.gif" WIDTH=16 HEIGHT=2 BORDER=0 HSPACE=0 VSPACE=0 ALIGN=RIGHT>
    </LAYER>
  </LAYER>
  <LAYER ID=elButtonBot LEFT=0 TOP=184 CLIP=16,16>
    <IMG SRC="butBu.gif" WIDTH=16 HEIGHT=16 HSPACE=0 BORDER=0>
  </LAYER>
</LAYER>

Step-by-Step

Our first, and containing, layer is elScroll, which represents the scrollbar as-a-whole. That is, the scrollbar object. The LEFT and TOP attributes are set to whatever position we need. The second CLIP parameter, the bottom clip, is set to the height of the required scrollbar.

Immediately within the elScroll container, we place the top button image, butTu.gif.

We then create the elevator-bar dark background as a layer, elBGcol, and position it 16 pixels from the top of elScroll, that is, immediately following the image. The four-pixel image, barBgBl.gif, is the value of the layer's BACKGROUND attribute, meaning that it will be repeated, just as a BODY BACKGROUND is repeated. The bottom clip of elBGcol can be set to anything larger than the elScroll bottom clip. Since elBGcol is contained within elScroll, it cannot exceed the elScroll boundaries, and the elScroll bottom clip will cut off the bottom of elBGcol. We just need to assure that elBGcol stretches all the way to the bottom, without calculating the exact height.

Next, we create the elevator bar light background in exactly the same way as the dark background. The layer elBg has the same attributes as elBGcol , only the BACKGROUND is set to barBg.gif. The fact that elBG is created after elBGcol means that it is higher in z-order and is placed over elBGcol, hiding it.

The scrollbar thumb is itself a containing layer, elThumb. It will be dynamically resized by our script, but for demonstration purposes, we'll create one that is 100 pixels high. We therefore set the bottom clip to 100, and specify a repeating background with BACKGROUND="tmbBg.gif".

Within elThumb, we place the thumb-top image, tmbTop.gif, making sure that it aligns to the top of the layer by setting the ALIGN attribute to RIGHT. Don't ask. Our various trials showed that this attribute setting was the most fullproof. Otherwise, we would need to place this image within its own layer, or run the HTML lines into each other to avoid the hard spaces implied by text line breaks. We also want to keep the amount of layers used to a minimum. So, take this suggestion on faith.

Conversely, the thumb-bottom image is placed in its own layer, elThumbBot, and positioned 2 pixels above the bottom of elThumb. In our example, this would be 98. Again, we set ALIGN=RIGHT.

Finally, we position our last layer, elButtonBot, sixteen pixels above the bottom of the scrollbar. In our example, this value is 184. It contains our down-arrow image, butBu.gif. Here we don't need to set the ALIGN attribute. Again, don't ask.

Our scrollbar is now ready, but undynamic. The event capturing comes in our script.

Before we move on to our script, however, let's pause to answer the question you are all asking: Couldn't all this have been accomplished with CSS-positioning, which is, after all, the standard?



Produced by Peter Belesis and

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

URL: http://www.webreference.com/dhtml/column23/NSscrHTML.html