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

Scrollbars for Navigator 4 LAYERs, Part I
a CSS scrollbar

We used the LAYER tag on the previous page since it easier to use than CSS, and, hopefully, gave you a quick visualization of the HTML order needed to create the scrollbar. The HTML, if CSS and in-line STYLE attributes are used, would look like this:

<DIV ID=elScroll
     STYLE="position:absolute;left:200;top:30;width:16;
            clip:rect(0 16 200 0);visibility:visible">
  <IMG SRC="butTu.gif" WIDTH=16 HEIGHT=16 BORDER=0 HSPACE=0>
  <DIV ID=elBGcol
       STYLE="position:absolute;top:16;left:0;
              clip:rect(0 16 250 0);background-image:url(barBgBl.gif)"></DIV>
  <DIV ID=elBG
       STYLE="position:absolute;top:16;left:0;clip:rect(0 16 250 0);
              background-image:url(barBg.gif)"></DIV>
  <DIV ID=elThumb
       STYLE="position:absolute;top:16;left:0;clip:rect(0 16 100 0);
              background-image:url(tmbBg.gif)">
    <IMG SRC=tmbTop.gif WIDTH=16 HEIGHT=2 BORDER=0 HSPACE=0 VSPACE=0 ALIGN=RIGHT>
    <DIV ID=elThumbBot
         STYLE="position:absolute;top:98;left:0;width:16;clip:rect(0 16 2 0);">
      <IMG SRC=tmbBot.gif WIDTH=16 HEIGHT=2 BORDER=0 HSPACE=0 ALIGN=RIGHT>
    </DIV>
  </DIV>
  <DIV ID=elButtonBot
       STYLE="position:absolute;top:184;left:0;width:16;clip:rect(0 16 16 0);">
    <IMG SRC="butBu.gif" WIDTH=16 HEIGHT=16 HSPACE=0 BORDER=0>
  </DIV>
</DIV>

Unfortunately, there are two major problems with the above:

1. Navigator does not like STYLE attributes in nested elements, especially if other non-positioned-elements, like our images, are also used. This is a non-documented, but well-known bug. We work around this by defining all style attributes in a <STYLE> declaration in our HEAD.

2. Navigator does not like the background-image CSS property. We set the background in a script after element creation.

We can, therefore, create the scrollbar using a combination of Navigator-supported CSS and script, as the example on the left demonstrates. It was created using the code below. Don't forget that it does not matter how you create the scrollbar. The result will be the same. In our final script, next column, all scrollbars will be created on-the-fly. For now, we need to know only that it has been created, and our script will take it from there.

<STYLE TYPE="text/css">
<!--
 #elScroll{position:absolute;left:200;top:30;width:16;clip:rect(0 16 200 0)}
 #elBGcol{position:absolute;top:16;left:0;clip:rect(0 16 250 0)}
 #elBG{position:absolute;top:16;left:0;clip:rect(0 16 250 0)}
 #elThumb{position:absolute;top:16;left:0;clip:rect(0 16 100 0);}
 #elThumbBot{position:absolute;top:98;left:0;width:16;clip:rect(0 16 2 0)}
 #elButtonBot{position:absolute;top:184;left:0;width:16;clip:rect(0 16 16 0)}
-->
</STYLE>
<DIV ID=elScroll>
  <IMG SRC="butTu.gif" WIDTH=16 HEIGHT=16 BORDER=0 HSPACE=0>
  <DIV ID=elBGcol></DIV>
  <DIV ID=elBG></DIV>
  <DIV ID=elThumb>
    <IMG SRC=tmbTop.gif WIDTH=16 HEIGHT=2 BORDER=0 HSPACE=0 VSPACE=0 ALIGN=RIGHT>
    <DIV ID=elThumbBot>
      <IMG SRC=tmbBot.gif WIDTH=16 HEIGHT=2 BORDER=0 HSPACE=0 ALIGN=RIGHT>
    </DIV>
  </DIV>
  <DIV ID=elButtonBot>
    <IMG SRC="butBu.gif" WIDTH=16 HEIGHT=16 HSPACE=0 BORDER=0>
  </DIV>
</DIV>
<SCRIPT LANGUAGE="JavaScript1.2" TYPE="text/javascript">
<!--
 document.elScroll.document.elBGcol.background.src = "barBgBl.gif";
 document.elScroll.document.elBG.background.src = "barBg.gif";
 document.elScroll.document.elThumb.background.src = "tmbBg.gif";
//-->
</SCRIPT>

One last thing before we study the script. Let's hard-code a working scrollbar for a layer of content that we wish to scroll.

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