Refreshing Content and Values in Scrolling Divs
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 "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.
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 accommodate changing size of content. Clicking the links will toggle display between
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.
display is toggled between
block on elements inside the scroll div.
Methods for Loading New Content and Updating Values
.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: