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

Scrollbars for Navigator 4 LAYERs, Part I
a hard-coded example

The following scrolling layer has been hard-coded, using the HTML below it, again only for instruction purposes:

Load layer with external files: short one long one longest one

<LAYER ID=elCont TOP=30 LEFT=30 WIDTH=400 BGCOLOR=black CLIP=400,200>
  <LAYER ID=elMain SRC="raven.html" onLoad="initScroll()" TOP=2 LEFT=4
   WIDTH=376 BGCOLOR=white CLIP=-2,0,394,196></LAYER>
  <LAYER ID=elScroll LEFT=382 TOP=2 WIDTH=16 CLIP=16,196 VISIBILITY=HIDE>
    <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=180 WIDTH=16 CLIP=16,16>
      <IMG SRC="butBu.gif" WIDTH=16 HEIGHT=16 HSPACE=0 BORDER=0>
    </LAYER>
  </LAYER>
</LAYER>

We have created a super containing layer, elCont, in which we have placed a content layer, elMain, and our scrollbar, elScroll. elScroll has been positioned to the right of the content layer, within the containing layer.

Notice that elMain has an SRC attribute set to load a default external file, raven.html. We have also specified a value for the layer's onLoad handler. Whenever the layer is updated with an external file, the initScroll() function is called. This function, as we shall see, will initiatiate sizing of the scrollbar thumb according to the content length, and set up event capturing.

We have also added VISIBILITY=HIDE to elScroll. Our script will show the scrollbar only if necessary.

Never forget that all this hard-coding is just to introduce us to the script, which we are now finally ready to discuss.

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