Scrolling Divs Documentation Part Two
Page Topics:
Part One of the documentation for the Scrolling Divs code covers basic instructions and general information for implementing the code. This page provides supplemental information for set up of horizontal scrolling, multiple scroll areas in a document and swapping content in scroll areas. Accessiblity features of the code and a few known limitations are also covered here.
Additional documentation and examples available only to licensed users are listed, including special methods available in the code that can be used to add features and extend functionality.
Setting up Horizontal Scrolling
Part One of the documentation describes how to set up the divs for scroll areas. When setting up horizontal scrolling, steps need to be taken to prevent wrapping of content. The easiest method is to use tables for layout of the images or other content for horizontal scrolling.
You can avoid the use of tables if you prefer, with style specifications white-space: nowrap and list items displayed inline or floated.
Horizontal scrolling examples in the download file demonstrate both tables and inline list items.
Setting up Multiple Scroll Areas
The code easily supports multiple scrolling content areas in a document, as the examples demonstrate. Set up nested divs as described in Part One of the documentation for each scroll area, assigning a unique id to each. Use these ids for the style specifications for each scroll area. The elements containing the scroll controls and/or scrollbars also need unique ids and style specifications set up as described in Part One of the documentation.
An example initializing the code for two vertical scroll areas is accomplished as follows:
function init_dw_Scroll() {
var wndo1 = new dw_scrollObj('wn1', 'lyr1');
wndo1.buildScrollControls('scrollbar1', 'v', 'mouseover', true);
var wndo2 = new dw_scrollObj('wn2', 'lyr2');
wndo1.buildScrollControls('scrollbar2', 'v', 'mouseover', true);
}
As the vertical example demonstrates with four scroll areas, a document can easily accommodate several.
An example included in the download file sets up two vertical scroll areas with scrollbars.
Swapping Content in a Scroll Area
If you would like to swap content in a scroll area, you can include additional divs inside the scroll area div, attaching a unique id and optionally a class, with either the class or id 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 are 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. A link to display a 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>
An example in the download file entitled swap_content.html demonstrates.
Accessibility Features
Example documents provided in the download typically specify overflow: auto on the scroll area for those with incapable browsers or JavaScript turned off.[1] Styles for the scroll area are included in a style sheet the link for which is dynamically generated by the code (see instructions). These are by default applied only to the screen. You can include a print style sheet to enable printing of all the content of scroll areas if you like. An example is provided in the download file.
Keyboard scrolling is included in the code. 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 with other code that initially specifies display:none for a scroll area, the scroll code will not be able to calculate dimensions until displayed. Code will need to be initialized or refreshed at that time. See an example in a tab interface. The code includes a .refreshAll method 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.
More for Licensed
Example documents demonstrating the following features are available for licensed users of the code:
- Fluid scroll area (percentage width and height)
- Scroll onload to an element specified in the query string
- Retain scroll position from page to page using cookies
- Hide or swap scroll images when end of content is reached
- Scroll a data table with fixed header rows and columns
- Scrolling in a tabbed interface
- Scroll content retrieved using ajax
There are a number of special methods included in the scrolling code for the purpose of getting information about or updating the scroll values and also for extending the scrolling code. An example demonstrates a few of these capabilities. Further information about these methods and examples demonstrating their use is provided to licensed users of the code.
If you have purchased a license within the past 12 months you may access the additional demos and documentation as well as download an alert-free copy of any code updates. You will need your transaction ID and invoice number to access the code, documentation and additional demos provided to licensed users.
Feel free to contact dyn-web if you are unable to locate your invoice number and transaction ID and we will try to assist you.