Documentation for the Pausing Scroller

This page contains basic setup instructions for the Pausing Scroller JavaScript. You may find it helpful to view the source code of an example document from the download file as you read the instructions below.

Setup Instructions

To set up the Pausing Scroller, follow these steps. Details on each step are provided below:

  1. Include a script tag pointing to the external JavaScript file.
  2. Place your scroller content in the document.
  3. Include styles for the scroller.
  4. Specify scroller properties and initialize.

1. Script Tag

Place a script tag for the external JavaScript file in your document:

<script src="js/dw_paus_scroller.js" type="text/javascript"></script>

2. Scroller Content

Scrollers are set up using nested div tags for containers and content. Set IDs on the outer two divs. These IDs are passed to the code as shown below.

<div id="wn">
    <div id="lyr1">
    [Scroller content goes here]
    </div>
</div>

The Pausing Scroller scrolls content in equal sized blocks, gliding each block into view in turn. Each block needs to be wrapped in a container with its size specified in the style sheet, unless you are scrolling images and each image is one block size. In that case no extra wrapper elements are needed.

If you want the scroller to loop continuously, duplicate at least the first part of your content and attach an ID to the first of the repeated elements. This ID is specified in the repeatId property as shown below. The repeated portion needs to be at least equal to the width and height of the scroller as defined in the style sheet. View examples in the download file to see.

3. Scroller Styles

The scroller div requires the following style specifications: position (absolute or relative), width and height, and overflow hidden. The following styles are from one of the examples in the download file:

div#wn {
    position:relative;
    width:166px; height:54px;
    overflow:hidden;
}
    
div#wn div.block {
    height:54px;
    text-align: center;
}

For a horizontal scroller, white-space nowrap can be applied to prevent the content from wrapping. Or you can use a table row if you prefer.

4. Scroller Properties

A script segment is placed after the script tag for the external JavaScript file. This script segment includes code to set properties and initialize the scroller. The following is copied from an example in the download file:

<script type="text/javascript">
if ( DYN_WEB.Scroll_Div.isSupported() ) {

    DYN_WEB.Event.domReady( function() {
         // arguments: id of scroll area div, id of content div
        var wndo = new DYN_WEB.Scroll_Div('wn', 'lyr');
        
        var options = {
            axis:'v', // scroll axis: 'h' or 'v' for horizontal or vertical
            bRepeat:true, // repeat scrolling in a continuous loop
            repeatId:'rpt', // id attached to repeated first element
            dur:800, // duration of glide-scroll
            bPauseResume:true, // pause/resume on mouseover/mouseout
            distance: 54, // distance of glide-scroll
            pauseDelay: 5000, // delay between glide-scrolls 
            resumeDelay: 300, // delay before resume on mouseout
            startDelay: 2000 // delay before start onload
        };
        
        wndo.makePauseAuto( options );
    } );
}
</script>

The IDs passed to the constructor (new DYN_WEB.Scroll_Div) match those attached to the container and content divs shown above. The options object containing property settings is passed to the makePauseAuto function. The repeatId property value matches the ID applied to the element that duplicates the starting content in your scroller, also mentioned above. The distance property is generally set equal to the width of the scroller when scrolling horizontally or the height of the scroller when scrolling vertically.

Download Code

The Pausing Scroller download file includes examples demonstrating both horizontal and vertical scrollers.

Back to top