Refreshing 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 refreshing 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 exist in this page.

The Scrolling Divs JavaScript supports the ability to obtain content using ajax as well. Try the two ajax links to 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 div for the purpose of swapping content.

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

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

Toggling Display in Scroll Divs

The links below demonstrate the scrolling divs capability to adapt to changing size of content. Clicking the links will toggle 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.

Swap Content. Click the "Swap Content" link above to see new content displayed in the scroll area. It is another div, originally hidden, within the scrolling div. An unlimited number of hidden divs can be nested within scroll areas for the purpose of swapping content, also known as loading new layers.

Ajax Content. Click the Ajax links above to observe the Scrolling Divs handling of Ajax. Whether the content of the scroll area is replaced or updated using Ajax or any other dynamic means, the code has the capability of refreshing values for scrolling the new or amended content.

Modifying Using innerHTML or DOM Methods. Click the "Add Content" link above and you will notice a slight adjustment in the size and position of the scrollbar as a bit of text is added to the scrolling div. The Scrolling Divs JavaScript includes methods that make it easy to access or update information about the scroll area. These methods can be invoked any time content is modified in the scroll area.

Expand/Contract. The "Toggle Display" link loads another previously hidden layer in the scrolling div. It demonstrates the ability of the Scrolling Divs JavaScript to respond to changing dimensions of content within a div when display is toggled between none and block on elements inside the scroll div.

Methods for Loading New Content and Updating Values

A .loadLayer method is used to show and hide divs inside a scroll area. The documentation has information for setup of this feature. Two methods are provided for use when the content of a scroll div is replaced or modified: .updateDims and .refreshAll.

Back to top