Webmaster
DHTML : Step 1: Laying the foundations
[ Contents ]
Dr Benton
And Finally...
Now we are almost ready. As you may have noticed, we say 'almost', because our created layers are still quite empty! To solve this, we will use a JavaScript script when the page is loaded.
We will also prevent the use of the browser's vertical scrollbars (in order to enforce the use of our nice scrolling control). An easy task, thanks to the onLoad event of the BODY tag:
9: <BODY MARGINWIDTH="0" MARGINHEIGHT="0" SCROLL="NO" onscroll="window.scroll(0,0)" onLoad="
10: if(is.ns4) {
11: available_width=innerWidth;
12: available_height=innerHeight;
13: } else if(is.ie4) {
14: available_width=document.body.clientWidth;
15: available_height=document.body.clientHeight;
16: }
17: choreographer('preLoad');
18: ">
On line 9, the scrollbars are hidden and scrolling is prevented. On lines 10 to 16, a conditional block identifies the visitor's browser and the appropriate instruction is executed for collecting and storing the browser's width and height in variables. These values will permit us to permanently display the image of our scroll-control in the same location, whatever the dimensions of the browser.
The <BODY> tag is such a classic one that we easily forget that it represents the only, and handy, way to permanently detect the events that are fired. So, when a scroll event occurs (yes, this is possible even without using the traditional scrollbars), the page is repositioned at the top.
Once our page is loaded, we need to call up the script. This is carried out by calling on the choreographer function, and passing it the string preload as an argument. We will see in the next section what this means.
For the moment, have a coffee, a fruit juice or a beer, and take a rest! Or you can jump straight into the next workshop if you are looking forward to discovering the continuation...