Refreshing Scroll Areas
This page demonstrates dyn-web's JavaScript DHTML Scrolling Div's capabilities for dynamic update. The code supports swapping in new content, refreshing values such as scroll distance and scrollbar size when content is dynamically updated, and hiding scroll controls and scrollbars when they are not needed.
Try the links beside the scroll area to see these features demonstrated. Read below for explanation and description.
Dynamic Update of Scroll Area
Click the links on the right to see new content swapped into this scroll area. The "Swap Content" and "Original Content" links swap between layers that exist in this page.
The code supports the ability to obtain content via 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 layer is loaded into this scroll area to demonstrate the code's capability of updating the scroll controls to adapt to changes in content.
If one of the div's does not contain enough content for scrolling to be required, the scroll controls can be hidden. The code supports the capability to auto hide the controls when they are not needed.
The scrolling code now supports mousewheel scrolling.
Happy Scrolling!
Back to top
Hiding Unneeded Scroll Controls
The code supports auto hiding the scroll controls if the scroll area has insufficient content to necessitate scrolling.
When you click to Add Content the need for scroll controls will be reevaluated.
Swap Content: Click the "Swap Content" link above to see new content displayed in the scroll area. It was originally hidden. Notice that the scrollbar and arrows are hidden since the content is insufficient to require scrolling. Click the "Original Content" link to see the first div restored along with the now needed scrollbars.
See the documentation for setup information on hiding scroll controls when they are not needed.
Refreshing Values Click the "Add Content" link above and you will notice a slight adjustment in the size of the scrollbar. The code now sports new methods that make it easier for you to access or update information about the scroll area. These methods would be helpful if your scroll area contained elements whose display was to be toggled by the viewer for example, or if content is dynamically added to or deleted from the scroll area. More information and possible uses of these and other advanced features of the code are available in Part Two of the documentation.
Retrieving Content via Ajax Click the "Get Content" link above to observe the scroll code's support for content obtained from the server using ajax. The very basic ajax code contained in the head of this document demonstrates the use of the dw_scrollObj.loadLayer method for updating the scroll area when new data is received.
Hidden Iframe for Scrolling External Content Another technique for updating scroll areas makes use of a hidden iframe, as described in the Iframes Tutorial. More information about using the scrolling code with a hidden iframe is available upon request to licensed users of the code.
More Information
See Documentation for basic instructions as well as more detailed information about advanced features of the code. The download file contains numerous examples to simplify the process of implementation for you. See the list of examples in the right column to see other features demonstrated.
See Part Two of the documentation for information about setting up the extra scroll controls demonstrated the above.
See Licensing Information for use of the code. Please read dyn-web's Terms of Use if you plan to use our code.