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.
Click the links on the right to see new content swapped into this scroll area. These links swap between layers that exist in this page. The code supports the ability to obtain content via ajax as well.
See the documentation for some notes about problems that can occur with certain types of content being placed in the div's for scrolling.
If one of the div's does not contain enough content for scrolling to be required, the scroll controls are hidden in this example. The code supports the capability to auto hide the controls when they are not needed.
The scrolling code now supports mousewheel scrolling.
Happy Scrolling!
The code supports auto hiding the scroll controls if the scroll area has insufficient content to necessitate scrolling.
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.
Jump to Top Scroll down a ways, then click the "Jump to Top" link. A jump to top link is especially useful for situations where your users might tab among links or form elements in the div, throwing off the scrolling calculations, as described in the documentation.
Scroll to Element with ID You can instruct the code to jump or glide to an element with a specified ID. Click the "Scroll to Smile" link to test. If you set up links to make use of named anchors inside the scrolling div's, this will throw off the scroll calculations. So the scrollToId functionality was added as a substitute.
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 (getX, getY, updateDims) that make it easier for you to access or update information about the scroll area. You could use these to retain current scroll values in a cookie to retrieve again for restoring the div to the same position, for example.
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.
Instructions
The documentation contains general instructions for implementing the code, such as the script tags to be included, setting up the div's and their styles, initializing the code, etc.
See Part Two of the documentation for information about setting up the extra scroll controls demonstrated the above.
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 Licensing Information for use of the code. Please read dyn-web's Terms of Use if you plan to use our code.