Horizontal Scrolling
This page demonstrates dyn-web's JavaScript DHTML Scrolling Div's capabilities for scrolling horizontally. The scroll areas below demonstrate horizontal scrolling onmouseover, with a gliding motion onclick, and with a graphical scrollbar.
 |
 |
 |
 |
|
|
|
|
|
|
|
|
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.
Tables are used for layout of the images for horizontal scrolling to avoid the wrapping of content that would otherwise occur. The ID of the table needs to be passed to the constructor in order to obtain the width of the content:
// id of outer div, id of content div, id of table containing images
function init_dw_Scroll() {
var wndo1 = new dw_scrollObj('wn1', 'lyr1', 't1');
var wndo2 = new dw_scrollObj('wn2', 'lyr2', 't2');
var wndo3 = new dw_scrollObj('wn3', 'lyr3', 't3');
...
}
View the style sheet for this example to see how specifications on table cells are applied to accommodate differences in widths of the images.
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.