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.

The download file contains these examples in separate documents to facilitate implementation.

Demonstration

Mouseover scrolling. Speed is adjustable and increases onmousedown. Image maps can be used to add more speed options.

Glide-onclick scrolling. Once scroll links receive focus, scrolling can be activated using enter key.

Scrollbar. Click on track or drag on bar. Arrows can be set up for mouseover or mousedown scrolling.

The code supports the capability to either hide or swap the scroll control images when the end is reached on either axis. Further information is available in Part Two of the documentation.

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.[1] 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');
    ...
}

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.

Back to top

  1. The style specification of white-space: nowrap and the non-standard nobr tag are other possibilities, but have not been fully tested for cross-browser support in conjunction with this code. ^