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

Scrollbars for Navigator 4 LAYERs, Part I
final functions

The in-page example we have used, repeated below, loads three different files into our scrollable layer, all of different lengths. The first, "oscar.html", is very short and does not warrant a scrollbar. The second, "raven.html", causes a properly-sized thumb to appear in the scrollbar. The last, "usher.html", creates a 10 pixel thumb, the minimum size available, since the content is very long.

Load layer with external files: short one long one longest one

The links on the right were created with this HTML:

<A HREF=#
   onClick="if(NS4)loadnew(0);return false">short one</A><BR>
<A HREF=#
   onClick="if(NS4)loadnew(1);return false">long one</A><BR>
<A HREF=#
   onClick="if(NS4)loadnew(2);return false">longest one</A>

In all cases the loadnew() function is called if NS4 is being used, with a single integer argument.

The loadnew() function looks like this:

function loadnew(num){
    switch (num) {
        case 0:
            newFile = "oscar.html";
            break;
        case 1:
            newFile = "raven.html";
            break;
        case 2:
            newFile = "usher.html";
            break;
    }
    
    elMain.load(newFile,376);
}

There are, of course, other ways of determing the file to load, shorter and easier ones. The important statement here is:

elMain.load(newFile,376);

When we need to load a new file into a layer, we use the layer's load() method, which takes two arguments: the file to load, and the wrapping width of the layer. Use this syntax when loading a new file. It can be used directly in an HTML event handler or part of a function like above.

NOTE: Never use the layerName.src = filename way of loading a new file. It is buggy. Always use the load() method.

When the new file loads into the content layer (elMain, in our example), the layer's onLoad handler will kick in and call initScroll() all over again to set up our scrollbar.

Last but not Least

Don't forget that all DHTML content is lost when a user resizes a Navigator window. We, therefore, reload the page from the cache to re-layout the DHTML, using the script developed in DHTML Diner.

origWidth = innerWidth;
origHeight = innerHeight;
function reDo() {
    if (innerWidth != origWidth || innerHeight != origHeight)
       location.reload();
}
onresize = reDo;

The complete script is, naturally, repeated on our last page, but first some final thoughts.

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/NSscrRpt.html