Scrolling Divs Documentation Part Two

Part One of the documentation for the Scrolling Divs JavaScript covers basic setup information. This page provides information on horizontal scrolling, multiple scroll areas in a document, swapping content in scroll areas, accessiblity features, and a few known limitations of the code.

Setting up Horizontal Scrolling

When setting up horizontal scrolling, you may find that the content wraps inside the visible portion of the scroll area. To avoid this problem, you can apply the style specification white-space:nowrap to the content in the scroll area. Or you could use a table row or list items displayed inline for layout of the content. Horizontal scrolling examples in the download file demonstrate all these options.

Setting up Multiple Scroll Areas

The Scrolling Divs JavaScript supports multiple scrolling content areas in a document as the horizontal and vertical examples demonstrate. To set up multiple scroll areas, replicate the pattern described for a single scroll area in part one of the documentation. That is, create a new set of divs: container and content divs and scroll controls or scrollbar divs, and apply unique IDs to each component. Use these IDs to specify styles for each of these components in the style sheet. Then you pass these IDs to the code in the initialization.

The following demonstrates initializing two vertical scroll areas:

function init_dw_Scroll() {
    var wndo1 = new dw_scrollObj('wn1', 'lyr1');
    wndo1.buildScrollControls('scrollbar1', 'v', 'mouseover', true);
    
    var wndo2 = new dw_scrollObj('wn2', 'lyr2');
    wndo2.buildScrollControls('scrollbar2', 'v', 'mouseover', true);
}

An example in the download file demonstrates.

Swapping Content in a Scrolling Div

To swap content inside a scroll area, alternately showing and hiding nested divs, include additional content divs inside the scroll area div, and attach a unique ID to each content div. You can also add a class name to the content divs; then either the class or ID is used in the style sheet to set visibility hidden:

<div id="wn"><!-- scroll area div -->
    <div id="lyr1" class="content"> 
    [Content to scroll goes here]
    </div>
    
    <div id="lyr2" class="content"> 
    [Content in second hidden div goes here]
    </div>
</div>

Styles for divs that will be swapped can be set up as follows:

div.content { /* hide content to be swapped in */
    position:absolute; visibility:hidden;
    left:0px; top:0px; 
}
div#lyr1 { /* show first div */
    visibility:visible;
}

Links to swap the visibility of content divs contained within a scroll area are set up using class names that begin with load_. For example, a link to display a content div with ID lyr2 within a scroll area with ID wn is set up as follows:

<a class="load_wn_lyr2" href="#">Swap Content</a>

Finally, add a call to the setUpLoadLinks function at the end of the initialization, after buildScrollControls, passing the ID of an element that contains the links:

// for links to swap content 
wndo.setUpLoadLinks('load_links');

An example in the download file demonstrates.

Accessibility Features

Content in scroll areas can be made accessible to incapable browsers or those with JavaScript turned off by specifying overflow: auto on scroll areas. Styles for scroll areas are included in a style sheet that will only be applied for capable browsers (see documentation). A style sheet for printing can be provided to enable printing of all the content of scroll areas. An example is provided in the download file.

The Scrolling Divs JavaScript supports keyboard scrolling. Users can tab to activate a scroll area, and then use PageUp/Down, Home, End, and arrow keys to navigate the scroll area.

Known Issues

Conflict with Display:none. If you are using the Scrolling Divs JavaScript with other code that initially specifies display:none for a scroll area, the scrolling divs code will not be able to calculate dimensions until the scroll area is displayed. The scrolling divs code will need to be initialized or refreshed at that time. The Scrolling Divs JavaScript includes updateDims and refreshAll methods that can be called upon to address this issue.

Flash and DHTML Layers. If you wish to use Flash in conjunction with DHTML layers such as the scrolling components, you need to specify wmode transparent for the Flash object. See an Adobe Technote on the subject for more information. This is evidently a read-only property and cannot be set dynamically. Also, there may be some browsers that do not support the wmode property. This is a limitation of Flash and not an issue that we would be able to assist you with.

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