Netscape 4.x allows us to access each property individually:
document.layerName.clip.top
document.layerName.clip.right
document.layerName.clip.bottom
document.layerName.clip.left

So to change the values incrementally, you only need to set a new value to each property:
document.layerName.clip.bottom += 0
document.layerName.clip.left -= 20


In IE and NN6 however, all four clip values are returned together as a string: so they must be reset together:
document.getElementById(layerName).style.clip
So they must be reset together:
document.getElementById(layerName).style.clip="rect(0px 500px 500px 500px)"

What this means to us as far as changing these values incrementally is that we have to break up the clip values string returned by IE/NN6 by concatenating each variable value into the setTimeout (see last code sample) string argument contained at the end of the closeCurtain() function.
layer.clip="rect("+topVal+"px "+rightVal+"px "+bottomVal+"px "+leftVal+"px)"

Then increment/decrement the values by any amount your heart desires:
bottomVal += 5
leftVal -= 20

Here is the complete closeCurtain() function which creates the curtain effect by incrementally changing the clip values.

**NOTE: this script requires the browser sniffing script from the previous section in order to function properly.

var topVal=0; //set these vars as global so they are not reset for each setTimeout call to the function
var rightVal=500;
var bottomVal=500;
var leftVal=500;

function closeCurtain(id) {
var layer = browser(id) //get path to layer depending on browser executing this code

if(nn4){

if(layer.clip.left > 0){
layer.clip.top += 0
layer.clip.right += 0
layer.clip.bottom += 0
layer.clip.left -= 20
setTimeout("closeCurtain('"+id+"')",10)
}

} else {

if(leftVal > 0){
topVal+=0;
rightVal+=0;
bottomVal+=0;
leftVal-=20;
layer.style.clip="rect("+topVal+"px "+rightVal+"px "+bottomVal+"px "+leftVal+"px)";
setTimeout("closeCurtain('"+id+"')",10)
}

}

}

The reset function simply resets the layer's clip regions back to their original values. Pass the id name of the div to the functions when they are invoked:

<a href="javascript:closeCurtain('purple')">Thank you, goodnight!</a>

View Source | Home | Contact