Demonstrating Scrolling Divs
Demos on this page:
Examples on this page demonstrate the many features of the Scrolling Divs Code. See vertical and horizontal scrolling, with and without the optional custom scrollbar. See glide onclick scrolling demonstrated with scrolling on both dimensions in a grid pattern.
See the scrolling divs code capabilities for dynamic refresh, which demonstrates that when the content of a scroll area is changed the code can update the relevant values. Check back for more to come!
Scrolling Div Demonstration
Capable browsers (including reasonably recent versions of Internet Explorer, Firefox, Opera, Safari, and Chrome) will display scrolling demos here.
Although the content in scroll areas would generally be available for browsers not supporting JavaScript, that is not the case for the examples shown on this page, which are retrieved using Ajax and other JavaScript techniques.
About Vertical Scrolling
The scroll areas above demonstrate vertical scrolling, with and without the optional custom scrollbar. Image maps can be used to provide a range of speed options for mouseover scrolling. Mousewheel and touch screen scrolling are also supported.
The scrollbars can be designed using styles and graphics of your choice. The scrollbar can include mouseover or mousedown scroll arrows at top and bottom. You can click on the track or drag the bar to scroll.
Horizontal scrolling is also demonstrated.
About Horizontal Scrolling
Horizontal scrolling is especially well suited for images. You can also scroll text horizontally. Part Two of the documentation includes information for setting up horizontal scrolling so the content doesn't wrap.
Mousewheel scrolling is supported for horizontal scroll areas. Users of touch devices can drag the scroll area.
About Glide Onclick Scrolling
Click on numbers in the grid pattern to the right of the image above and the corresponding element will glide into view.
You can lay out your content in the scroll area vertically, horizontally, or both, as shown in this example. Links to glide-scroll to the specified element can be laid out any way you like.
Attach id's and have the links target those id's. For example: link number 8 is set up as follows to instruct the code to glide-scroll to the element with the id of turtle onclick:
<a href="#turtle">8</a>
About Dynamic Update Capabilities
Scroll area content can be replaced or modified and the code can recalculate dimensions as needed.
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 scroll area. An unlimited number of hidden divs can be nested within scroll areas for the purpose of swapping content. The documentation has information for setup of this feature.
Retrieving Content Using Ajax. Click the Ajax links above to observe the scroll code's support for content obtained from the server using 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.
Refreshing Values. 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 scroll area. 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.
The "Toggle Display" link swaps in another previously hidden div in the scroll area. It demonstrates the ability of the code to respond to changing dimensions of content within a div when display is toggled between none and block on elements within the scroll area.
More information about these and other advanced features of the code are available to licensed users.
More Information
The Scrolling Divs code supports touch devices, keyboard and mousewheel scrolling in addition to the mouseover, mousedown and scrollbar controls.
See the features list for more on the code and its many capabilities. See the Documentation which includes basic instructions as well as more detailed information about advanced features of the code.
The download file contains basic example documents to assist you in the process of implementation to suit your purposes. Additional examples are provided to those who purchase a license.
Please read dyn-web's Terms of Use if you plan to use our code.