WebRef   Sitemap · Experts · Tools · Services · Newsletters · About

home / experts / dhtml / column23

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:

<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

The latest from WebReference.com Browse > Site Contents - - - - - Experts * 3D Animation * Design * DHTML * Graphics * HTML * JavaScript * Perl * XML - - - - - Web Resources * Authoring * Design * Internet * Multimedia * Programming * Promotion - - - - - Services * Interviews * Newsletters * Reviews * Search * Tools Search Engine Optimization: Selecting and Embedding Keywords · Are Google's Language Translation Web Services Ready for Prime Time? · Installing and Using Meeplace, the Business Review CMS Sitemap · Experts · Tools · Services · Email a Colleague · Contact FREE Newsletters >   The latest from internet.com IBM DB2 10 for z/OS: Justifying the Upgrade · Living La Vida Colo: Choosing the Right Colocation Facility · FTC Concerns over Social Media Privacy Linger

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

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