Intro

This example positions the scrolling layers in a cell of a centered table. The links to the left load new content into the layer for scrolling.

Scrollbars are optional. If scrollbars are not included only one 5.4K external JavaScript file is required.

If you prefer that the scroll arrows be activated onclick rather than onmouseover, you can use the glide-scroll code instead. The only modification required would be to the scroll links themselves.

The code includes a bug fix necessary for Netscape 6+/Mozilla when scrolling vertically in tables. Without this fix the table would shrink and expand while scrolling for all but the most recent versions of Mozilla.

The bug fix is often needed for horizontal scrolling as well. Without it, some Gecko-based browsers will tend to scramble the layout.

The function, GeckoTableBugFix, removes the scrolling layers from the table and uses the relative positioned containing layer's position to superimpose the layers over the table.

Setting Up the Layers

Div's are nested three deep for scrolling layers inline. The outer-most layer (usually assigned an id of hold or holder) is relative positioned, has width and height settings, and overflow hidden.

The scroll area itself is defined by a "window" div (usually assigned an id of wn or wn1), with width, height and clip settings, and overflow hidden.

The content that scrolls is contained in the innermost div (or div's). You can add as many content layers as you like within any given "window" div.

Scroll areas to be positioned absolute do not require the outermost (hold) layer, although it is often a convenient container for the scroll links.

For best cross-browser cooperation, do not fundamentally change the style specifications for the layers, other than adjusting width and height. Removing clip or overflow settings or changing the position to relative on the window or content layers may cause some browsers to cease functioning properly.

Implementing Scrollbars

You can set up scrollbars using graphics of your choice and adjust their style specifications accordingly.

The code automatically adjusts the size of the dragBar according to the amount of content in the layer currently visible in the scroll area. You can turn off this feature if you like.

The main presentation page for scrolling layers contains more detailed information about the scrollbars and how to set them up.

Multiple Scroll Areas

You can follow this format to add more than 1 scroll area. See the example with multiple scrolling areas for guidance. Even though that example uses absolute positioning, the pattern for setting up the layers remains the same. Just remember that all id's need to be unique.

Remember to pass the id's for areas that scroll in tables to the GeckoTableBugFix function so Netscape 6 and Mozilla will be able to extract their layers and function properly. (See code comments in the head of the document for more information.)

Scroll links and links that load new layers ultimately invoke methods on the instance(s) of dw_scrollLayer you define. However, in order to avoid errors should a user activate links before the page has completed loading, we use intermediary functions to determine whether the necessary objects exist.

To accomplish this we assign each new instance of dw_scrollLayer as an element of a wndo array. I.e., the first scroll area in a document is created with wndo[0] = new dw_scrollLayer. The second scroll area in a document would be assigned to wndo[1]. These wndo array element numbers are then used as arguments to the functions called in links for scrolling and loading layers, for example dw_startScroll(0,'down').