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:

<script src="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:

<div id="wn">
    <div id="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:

<div id="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:

div#scrollLinks {
    position:relative;
    width:180px;
}
div#scrollLinks .left {
    background-image:url('/images/left.gif');
    background-repeat:no-repeat;
    width:11px; height:11px; /* width and height of your image */
    position:absolute; left:30px;
}
div#scrollLinks .right {
    background-image:url('/images/right.gif');
    background-repeat:no-repeat;
    width:11px; height:11px; /* width and height of your image */
    position:absolute; right:30px;
}

Then include the following in the initialization shown below:

// arguments: id of scroll controls div, 'h' for horizontal scrolling
wndo.buildScrollControls('scrollLinks', 'h');

Scrollbar

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

<div id="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:

div#scrollbar .dragBar {
    position:absolute; 
    background-image: url('/images/bar.png');
    background-repeat: no-repeat;
    width:9px; 
    height:20px !important; /* include !important to override resize */
}

Auto-hide. The code will hide scroll controls when they are not needed. You can override this default behavior by using !important in css for visibility of controls div:

div#scrollbar {
    position:absolute;
    width:11px; height:170px;
    visibility:visible !important; /* override auto-hide */
}

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.

if ( dw_scrollObj.isSupported() ) {
    dw_Util.writeStyleSheet('css/scroll.css');
    dw_Event.add( window, 'load', init_dw_Scroll);
}

The init_dw_Scroll function called onload initializes scroll area(s) and builds scroll controls. The following sets up vertical scrolling with a scrollbar and mouseover scroll links:

function init_dw_Scroll() {
    // Initialize scroll area
    // arguments: id of scroll area div, id of content div
    var wndo = new dw_scrollObj('wn', 'lyr1');
    
    // Initialize scrollbar and up/down or left/right controls
    // args: id, axis ('v' or 'h'), event type for arrows, 
    // include track and dragBar? true or false
    wndo.buildScrollControls('scrollbar', 'v', 'mouseover', true);
}

Download Examples

The Scrolling Divs JavaScript download file includes several example documents demonstrating horizontal and vertical scrolling, multiple scroll areas in a document, and more.

Back to top or on to Part Two of the documentation.


  1. The function used here, dw_Util.writeStyleSheet uses document.write. Another function is available (dw_Util.addLinkCSS) which uses DOM methods to generate the link element for the style sheet. ^