Updating Content and Values in Scrolling Divs

The content inside a scrolling div may be modified or replaced in a variety of ways: using Ajax, changing visibility or display on elements inside the scrolling div, or by using innerHTML or DOM methods. The Scrolling Divs JavaScript is able to accommodate these changes by providing methods for recalculating and updating values as needed. The example below demonstrates.

Demonstrating Dynamic Update

Refreshing Scrolling Divs

Click the links on the right to see new content swapped into this scroll area. The "Swap Content" and "Original Content" links toggle the visibility of divs that are nested within this scroll area.

The Scrolling Divs JavaScript supports Ajax as well. Try the two Ajax links on the right to see.

The "Add Content" link will add a bit of content to whatever div is visible in this scroll area to demonstrate the code's ability to adapt to changes in content.

If one of the divs does not contain enough content for scrolling to be required, the scroll controls will be hidden by default, although you can easily override this feature if you prefer.

Swapping Content

This content is in another div originally hidden within the scroll area. An unlimited number of hidden divs can be nested within a scroll area for the purpose of swapping content.

The documentation has information on setting up divs and links for swapping.

The "Toggle Display" link swaps another div in this scroll area and shows how the scrolling divs code can respond to changes in content size when elements inside are expanded and contracted.

The scroll controls can be hidden if the amount of content in the div is not sufficient to require scrolling.

Toggling Display in Scroll Divs

The links below demonstrate the scrolling divs capability to adapt to changes in content size. Clicking the links toggles display between none and block.

Custom scrollbar
You can control the appearance using the styles and graphics of your choice.
Auto-hide controls
The scrollbar and/or scroll links can be hidden when no scrolling is required.
Swap content
You can place hidden divs in the scroll area and provide links to swap their visibility.

Methods for Updating Scroll Areas

Two methods are provided for use when the content of a scroll area is replaced or modified: updateDims and refreshAll. The updateDims method recalculates maximum values for scrolling based on any changes that may have been made to affect the scroll area dimensions. It also updates the scrollbar. If you have code that makes changes to scroll area content affecting its dimensions, you could include the following to update the scroll values:

var wndo = dw_scrollObj.col['wn']; // scroll area id
wndo.updateDims();

The refreshAll method applies updateDims to all scroll areas you have implemented in your document. It can be invoked as follows:

dw_scrollObj.refreshAll();