Glide-Onclick Scrolling of Images
This page demonstrates dyn-web's JavaScript DHTML Scrolling Div's capabilities for glide-onclick scrolling which is particularly useful for displaying images. Another example demonstrates images being scrolled horizontally.
With this code you can scroll onclick by a specified amount, or to specified location either using layer coordinates or by specifying the ID of the element you wish to see displayed in the div's visible area.
Scrolling Images in a Grid Pattern
Click on numbers in the grid pattern on the right and the corresponding image will glide into view. For example: link number 8 is set up as follows to instruct the code to glide-scroll to the image with the ID of turtle onclick:
<a class="scrollToId_turtle" href="#">8</a>
Scrolling Images Vertically Onclick
Click on the down arrow and the next image will glide into view. The linked down arrow is set up as follows to perform this task:
<a class="click_down_by_180" href="#">[img here]</a>
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.
The amount to move onclick (180px) takes into consideration not only the image dimensions but spacing between them, in this case specified using padding on the div's containing the images. View the style sheet for this example.
Part Two of the documentation provides more information about setting up scroll controls for unobtrusive event handling.
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.