O'Reilly logo

JavaScript & DHTML Cookbook by Danny Goodman

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Scrolling div Content

NN 7, IE 5

Problem

You want to let users scroll up and down through content located in a separate positioned viewable area on the page, without resorting to system (overflow) scrollbars.

Solution

This solution requires some HTML elements that are used as both scrollable content containers and the buttons that control the scrolling. You can see the HTML portion in Example 13-5 of the Discussion. You then use the scrollButtons.js library, shown in Example 13-6 of the Discussion, as the script basis for controlling scrollable regions on your page.

Your HTML page needs to link in and initialize two JavaScript libraries: DHTMLAPI.js from Recipe 13.3 and scrollButtons.js. Initializations should go in the onload event handler of the body:

<body onload="initDHTMLAPI( ); initScrollers( )">

The initScrollers( ) function invokes a function that is not necessarily part of the scrollButtons.js library because it specifies HTML details of each instance of a scrollable region on the page. For example, the following initScrollers( ) function creates a JavaScript object that governs the scrolling activity for one region:

function initScrollers( ) {
    scrollBars[0] = new scrollBar("outerWrapper0", "innerWrapper0", "lineup0", 
        "linedown0");
    scrollBars[0].initScroll( );
}

Discussion

The vital HTML portion of this recipe is shown in Example 13-5. The scrolling region consists of a series of nested div elements. The content container is a pair of nested containers. The outer wrapper ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required