| home / experts / dhtml / column23 |    |
|
Our script can be either included in the HEAD of our document, or imported as an external file.
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.
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:
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:
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
Jupitermedia Corporation has two divisions: Jupiterimages and JupiterOnlineMedia
Legal Notices, Licensing, Reprints, Permissions, Privacy Policy.
Advertise | Newsletters | Tech Jobs | Shopping | E-mail Offers
All Rights Reserved. Legal Notices.
Created: Jan 12, 1999
Revised: Jan 12, 1999
URL: http://www.webreference.com/dhtml/column23/NSscrLoad.html
