Setting Clipping Region with JavaScript

show clip values of purple layer before
Thank you, goodnight!
show clip values of purple layer after

Netscape 4.x allows us to access each property individually:

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:
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(layer.clip.left > 0){ += 0
layer.clip.right += 0
layer.clip.bottom += 0
layer.clip.left -= 20
} else {
if(leftVal > 0){
leftVal-=20;"rect("+topVal+"px "+rightVal+"px "+bottomVal+"px "+leftVal+"px)";
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