DHTML Lab: Scrollbars for Netscape Navigator Layers - dhtmlab.com | 10

Scrollbars for Navigator 4 LAYERs, Part I
script overhead

Our script can be either included in the HEAD of our document, or imported as an external file.

Image Preloading

The very first thing we must accomplish is the pre-loading of our images. We want our images to load and be ready immediately to minimize the possibility of our scrollbar actually looking like a series of images. We therefore use the elegant array technique for loading images, introduced in column 1:

arImLoad = ["barBg","barBgBl","bg","bgBl",
            "butBd","butBu","butTd","butTu",
            "tmbBg","tmbBgL","tmbBot","tmbTop"];
arImList = [];
for (counter in arImLoad) {
    arImList[counter] = new Image();
    arImList[counter].src = arImLoad[counter] + ".gif";
}

Notice that we use literal definitions of the two arrays. That is, [], instead of new Array(). This is possible in JavaScript 1.2, and since the script is being read only by NS4, we use it for a cleaner look, and, of course, less code.

Global Variables

We must initialize several global variables that we will later access from more than one function:

docIncr = 8;
barWidth = 16;
thumbMinHeight = 10;
origInt = 500;
repeatInt = 50;
initTimer = null;
scrollTimer = null;
bgTimer = null;
thumbTimer = null;
curY = null;
butImage = null;

The first five are parameter variables that help customize the look and behavior of the scrollbar:

docIncr

This is the content incrementation in pixels for a single arrow button click. In our example, whenever the user clicks the arrows, the scrolled content will move up or down by eight pixels, then the thumb position will be adjusted. Can be set to whatever value is best for your content.

barWidth

The scrollbar width. The Win32 standard is 16 pixels, and the images we use conform to this standard. You will have to modify the images if this value is changed.

thumbMinHeight

The minimum height of the thumb. The thumb is sized porportionally to the content length. However, with lengthy documents, the thumb may be reduced to an unusable size, even one pixel. We therefore set a minimum pixel size, so that we can always grab it.

origInt

The time interval between an initial scroll and the beginning of the fast, repetitive scroll, expressed in milliseconds. In our example, when the users mouses down on an arrow button or the elevator bar, a scroll is executed, then the script waits 500 milliseconds (half a second), before repeating the scroll in shorter intervals.

repeatInt

The short time interval between repeated scrolls, when the user keeps the mouse button pressed.

The next four initialize the four timers used by the script with setTimeout() or setInterval(). Their use will be discussed when we actually use them.

initTimer = null;
scrollTimer = null;
bgTimer = null;
thumbTimer = null;

The last two, are also simple initializations:

curY

The present vertical position of an object. The object referenced will depend on the context. We use it when dragging and when the elevator bar is clicked.

butImage

The current arrow button. Used to identify the arrow button pressed.

Ensuring Load

We placed an onLoad handler in elMain that calls initScroll(). Since we want to size the scrollbar, we need to make sure that the scrollbar has been defined. The only sure way is to define it after page load. We create a variable, pageLoaded, to track the load of the complete page (window), and set the window's onload handler to call initScroll() as well:

pageLoaded = false;
onload = initScroll;
function initScroll(){
    if (!pageLoaded) {pageLoaded=true;return}		
    makeScroll();
}

initScroll() is now called both on the initial load of elMain and on the window load. The first time it is called, either by window or elMain, it sets pageLoaded to true and returns. The second time initScroll() is called it will execute makeScroll(). Subsequent loads of elMain will also now directly go to makeScroll().

These load-related statements apply only to our hard-coded example. They will be omitted in our final script.

Let's move now to makeScroll(), size our thumb and define our event handling.

Produced by Peter Belesis and

All Rights Reserved. Legal Notices.
Created: Jan 12, 1999
Revised: Jan 12, 1999

URL: https://www.webreference.com/dhtml/column23/NSscrLoad.html