Discovering DHTML in Netscape 6, Part II of II (cont.)
Clipping
Clipping a layer was a real headache with the older browsers (not that it's any less of a headache now).
Netscape 4.x kept each of the clip values within its own property, and allowed access via clip.top and
clip.right and the like. In NS6 and IE5, on the other hand, you set clip values using a single string
within a style property named, aptly enough, clip. Normally, the clip property is empty unless you
assign it either with a stylesheet or the STYLE attribute of the <DIV> tag.
A proper clip value begins with "rect" (to specify the clip as rectangular, as opposed to some
other shape that may be supported in the future), followed by the top, right, bottom, and left
offset values, in pixels, in that order. Once assembled you can assign the string directly to
the <DIV>'s clip property:
var myElement = document.getElementById("sampleDiv");
myElement.style.clip = "rect(0px 50px 50px 20px)";
Manipulating an existing clip can be a little tricky. To increment or decrement the clip values,
you need to once again extract the individual values and convert them into integers. To get rid
of the "rect" and parenthesis, I use a little string magic, splitting the string into an array
and then using parseInt to retrieve the integer values and return them in an array.
myElement = document.getElementById("sampleDiv");
// assumes you've already set a clip value
var clip = myElement.style.clip
var clipVals = clip.split("rect(")[1].split(" ");
for (var i=0;i<clipVals.length;i++){
clipVals[i] = parseInt(clipVals[i]);
}
return clipVals;
Now you're free to modify these values, and reassign them to the layer. The three functions below
take a layer and re-clip it inward by ten pixels each time:
function clipInward(layerID){
var myElement = document.getElementById(layerID);
var clipVals = getClipValues(myElement);
clipVals[0] += 10;
clipVals[1] -= 10;
clipVals[2] -= 10;
clipVals[3] += 10;
var newClip = createNewClip(clipVals);
myElement.style.clip = newClip;
}
function getClipValues(element){
// assumes you've already set a clip value
var clip = element.style.clip
var clipVals = clip.split("rect(")[1].split(" ");
for (var i=0;i<clipVals.length;i++){
clipVals[i] = parseInt(clipVals[i]);
}
return clipVals;
}
function createNewClip(clipVals){
var newClip = "rect(";
for (var i=0;i<clipVals.length;i++){
newClip += clipVals[i] + "px ";
}
newClip += ")";
return newClip;
}
