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

Scrollbars for Navigator 4 Positioned Elements (LAYERs), Part I
scrollbar concepts and creation

This tutorial can be appreciated by users of any browser, any version.
Since the technique discussed is specific to Netscape Navigator 4, it is the only browser with which to view the in-line examples.
All other browsers have screenshots substituted when appropriate.

When Netscape introduced positioned elements (layers) in Navigator 4, authors were quick to notice and use a powerful built-in feature: the ability of layers to load and display external HTML files. Any celebration of the feature, however, was quickly soured by the realization that only short external files could be used, since positioned elements had no built-in scrolling capabilities.

Explorer 4, on the other hand, has the ability to add system scrollbars to any element, but external file display by positioned elements is clumsy to implement and it is even clumsier to attempt an element load after initial page display. External files in positioned elements were not a priority for Explorer, since support of the <IFRAME> tag provides this functionality in an extremely elegant fashion. We'll be looking at IFRAME in our next column, when we create a cross-browser script for scrolling elements.

Authors have provided scrolling functionality for Navigator with scripts activated by "up-down" buttons and the like. These have always been awkward for users, who expect an operating-system scrollbar to appear, thumb and all, whenever an element is scrollable.

In the example below, we provide just such a scrollbar. If you are using Navigator 4, the links to the right will load other files into the layer. The scrollbar will adapt to the external file length, and function just as an operating system scrollbar would. Try it, then read on to learn how we created it.

Prerequisite

• Familiarity with layer drag-and-drop principles, developed in column 6 and column 7.

  In This Column

  We will discuss:

  • scrollbar concepts
  • the scrollbar component images
  • creating a scrollbar with images and the LAYER tag
  • creating a scrollbar with images and CSS
  • placing a scrollbar and associated content layer in a page
  • determining necessity of scrollbar
  • scrollbar thumb sizing
  • scrollbar user event capturing
  • scrolling with the arrow buttons
  • scrolling with the scrollbar thumb
  • scrolling with the scrollbar elevator bar
  • loading a new external file into a layer

  For the first time, in our columns, we will learn to use:

  • the undocumented mouseover/mouseout/mousedown/mouseup events for images
  • an alternate syntax for the setTimeout() and setInterval() methods
  • the load() method of layers

  First, let's define exactly what it is that we need to build.
  
  

  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/