Scrolling Divs JavaScript Documentation

This page provides basic instructions for setting up dyn-web's Scrolling Divs JavaScript. It covers how to set up the divs, styles, scroll controls and/or scrollbar, and how to initialize the code. Part Two of the documentation provides information on more advanced features and accessibility.

The best starting point when implementing the code is to choose an example document from the download file that most closely resembles your desired implementation. Follow the pattern set there and read below for details and clarification.

Instructions for Setting Up Scrolling Divs JavaScript

To set up the Scrolling Divs JavaScript, follow these steps. Details on each step are provided below:

1. Script Tag

Place a script tag for the external JavaScript file in the head of your document:

<scriptsrc="js/dw_scroll_c.js"type="text/javascript"></script>

2. Scroll Area Divs and Styles

Scroll areas are set up using nested div tags: a container and content. Assign each a unique ID:

<divid="wn"><divid="lyr1">
[Content to scroll goes here]
</div></div>

Here are some typical style specifications for the container div:

div#wn{position:relative;width:280px;height:200px;overflow:hidden;
}

The container div (wn in this example) can be positioned absolute or relative. Width, height, and overflow hidden are required specifications. The scrolling content div (lyr1 in the HTML shown above) is positioned absolute in the code. JavaScript calculates the dimensions of the content div, so exercise care if you apply styles directly to this element or to elements contained within it since some settings (such as height or float) may interfere with the code's ability to obtain dimensions.

3. Scroll Controls and Scrollbar

Include a div where you would like the scroll controls or scrollbar in your markup and assign it a unique ID. A buildScrollControls function inserts the components of the scroll controls for you as shown in the initialization routine below. You pass the ID of your scroll control div to this function along with other arguments that tell the code whether you want horizontal or vertical scrolling, mouseover or mousedown scroll links, and a scrollbar.

For example, to provide left/right arrows for horizontal mouseover scrolling, include the following where you want them in your document:

<divid="scrollLinks"></div>

Images are placed in the background in the style sheet rather than in the markup. You can use images of your choice and size and position them to suit your layout. Here is an example of how you might specify styles for left/right images for horizontal scrolling:

Scrollbar

The following demonstrates how to include a scrollbar for vertical scrolling. First, included a div and attach an ID:

<divid="scrollbar"></div>

The following style specifications for a vertical scrollbar are copied from an example in the download file:

div#scrollbar{position:absolute;width:11px;height:170px;}div#scrollbar.up{background-image:url('/images/btn-up.gif');background-repeat: no-repeat;width:11px;height:11px;/* width and height of your image */position:absolute;top:0;}div#scrollbar.down{background-image:url('/images/btn-dn.gif');background-repeat: no-repeat;width:11px;height:11px;position:absolute;bottom:0;}div#scrollbar.track{position:absolute;/* track must be positioned */left:0;top:12px;/* top based on height of image */width:11px;height:146px;background-color:#336;/* can use background-image if you like */}div#scrollbar.dragBar{position:absolute;/* dragBar must be positioned */background-color:#ceced6;/* can use background-image if you like */width:9px;height:20px;top:1px;left:1px;/* optional, small gap between track and dragBar */}

Generally, you will want to adjust the height of the scrollbar and track according to the height of your scroll area and set the position of the track based on the size of your scroll control images.

Override dragBar Autosize. Examples give the dragBar a background color in the style sheet. By default, the dragBar will be resized by the code according to the relative dimensions of the content and container. However, you can use an image and specify a fixed size for the dragBar if you like. Then you would add !important to the style specification for height or width of the dragBar to override resize. An example vertical scrollbar with dragBar height fixed:

Initializing the Scrolling Divs JavaScript

The code checks whether the browser supports the necessary features and then assigns a function to be called onload. A link element for the style sheet is dynamically generated[1] so that the contents will be accessible for those without the necessary JavaScript support. You can link in the style sheet containing the scroll specifications in the usual manner if you prefer.