Documentation for the Continuous Scroller

This page contains basic setup instructions for the Continuous 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 Continuous Scroller, follow these steps. Details on each step are provided below:

1. Script Tag

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

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

2. Scroller Content

Scrollers are set up using nested div tags for container 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>

If your scroller content includes text, we suggest you enclose the content in divs for vertical scrolling and spans for horizontal scrolling. These tags are chosen since browsers do not provide default margins for them.

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.

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:180px; height:80px; 
    overflow:hidden;
}

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', 'lyr1');
    wndo.makeSmoothAuto( {axis:'h', bRepeat:true, repeatId:'rpt1', speed:80, bPauseResume:true} );
  });
}
</script>

The IDs passed to the constructor (new DYN_WEB.Scroll_Div) match those attached to the container and content divs shown above. An object containing property settings is passed to the makeSmoothAuto function. They are shown here with code comments that describe their purpose:

{
axis:'h', // scroll axis: 'h' or 'v' for horizontal or vertical
bRepeat:true, // repeat scrolling in a continuous loop
repeatId:'rpt1', // id attached to repeated first element
speed:80, // scroll speed
bPauseResume:true // pause/resume on mouseover/mouseout
}

The repeatId property value matches the ID applied to the element that duplicates the starting content in your scroller as mentioned above.

Download Code

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

Back to top