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 code 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.
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.
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 code 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 code to respond to changing dimensions of content within a div when
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:
More information about these and other advanced features of the code are available to licensed users.