Simple DHTML scrolling control

Submitted by davidc on Fri, 27/12/2002 - 00:32

This article examines the construction of a scroller control, enabling selection from a group of items where the currently selected element is visible and new elements are scrolled in to replace it. It makes use of the CSS clip property to control the scrolling. This code could also be used as a basis for other scrolling transitions, such as in a slideshow.

Example

Here is a simple example with the faces of 5 people I have randomly chosen to alienate. The left and right arrows fire the back and forward methods. I've put a transparent circular border in front just for visual effect. The text box is updated as an example of the onChange event and could easily be a hidden element.

A real-world example, including integration into the surrounding form, ~~can be found at 99dogs.com~~ is no longer available due to the death through mismanagement of my former work.

Usage

First, create a containing DIV to hold the scrollable elements, with CSS class scrollerContainer. Inside this, place DIVs for each element you wish to be available in the scroller, with CSS class scrollerItem. Be careful not to put anything else inside - all children of the scrollerContainer will become elements. Note that only the initially selected item should be visible.

Next, define the CSS classes. The two class names given are suggestions only - they are not used by the code, only to reference the following stylesheet. The width and height on the container are obligatory in order for the code to size the elements correctly. The width should be set on the item so that horizontal alignment and word-wrapping occurs correctly.


.scrollerItem   {
                width: 100px;
                position: absolute;
                }

.scrollerContainer {
                width: 100px; height: 100px;
                overflow: hidden;
                position: relative;
                }

Next, load Scroller.js and instantiate a Scroller object and give it the id of the root container of the scrollable elements. This can occur in the document head as it does not use any DOM calls until the first call to one of its methods.

Finally, you will need somewhere to actually trigger the back and forward methods.


< Back |
Forward >

Event handlers

Optionally, you can specify various event handlers on the instantiated object. These are simply methods on the object which will be called when the event fires, and are not related to DHTML events.

onScrollStart	Fires when scrolling begins
onScrollStop	Fires when scrolling ends. Note if the user clicks multiple times, this event will not fire until the scroller comes to a full and complete halt
onChange	Fires whenever a new item is selected. This occurs every time a new element is fully in view, even if the scroller is still moving. It fires prior to any onScrollStop method, if applicable.

Example:


mugScroller.onChange = function ()
{
  document.getElementById('who').value = mugs[mugScroller.state.current];
}

Optional configuration

There are also several configuration variables that can be set on the class to affect its behavior. These should be written to the object properties after instantiation.

scroller.config.movingPeriod	Time (in milliseconds) to transition between one element and the next.
scroller.config.movingSteps	Number of steps to use during the transition period. The greater this value, the smoother the motion, but if it's too high, it will be jerky. 30 fps seems to work for well (e.g. 15 steps with a 500ms period).

Compatibility

This code should be compatible with any DOM-compatible browser that supports the CSS clip property. It has been tested in IE6 and Mozilla 1.0+. (TODO wasn't there something funny about clip in IE5?)

Remember that Mozilla doesn't load images if they're not visible, so you'll probably want to preload any images that are not part of the default selection.

Files

Scroller.js
scroller_demo.html