Copy found at Wayback Machine archive.
Clipping in the earlier releases of Mozilla and with Navigator 6.0 followed the CSS 2.0 release specification. Clipping boundaries are set at “0” for all four sides of the rectangle containing the content — to clip, you would offset the values, using positive numbers only.
This differed from the original implementation of IE 4.x and up and Navigator 4.x, and the original CSS-P specification submission. With these, the element’s right and bottom clipping value is set to the width and height of the element by default. To offset the top and left, increment the top, left values. To offset the right and bottom, decrement these same values.
Having a different clipping region framework was a challenge when it came to cross-browser development.
However, beginning with Mozilla build M16 (and Navigator 6.0 PR 2.0 and up), clipping for the new browsers is the same as it was for Navigator 4.x and for IE 4.x and up. Supposedly, the W3C will be issuing errata for CSS 2.0 to change the clipping framework to match this common usage.
On to the X-Objects
The X-Object does have several methods exposed on the interface to handle clipping:
- objSetClipRect – set the clipping values
- objGetClipRect – get the current clipping value, if any
- objGetClipLeft – get the clipping rectangle’s left value
- objGetClipRight – get the clipping rectangle’s right value
- objGetClipTop – get the clipping rectangle’s top value
- objGetClipBottom – get the clipping rectangle’s bottom value
Adding support for Mozilla/Navigator 6.0 didn’t change the implementation for clipping with the original cross-browser objects. The implementation for Navigator 4.x is still:
// clip object
function nsobjSetClipRect (top,left,bottom,right) {
if (top == null) top = this.objGetClipTop();
if (left == null) left = this.objGetClipLeft();
if (bottom == null) bottom = this.objGetClipBottom();
if (right == null) right = this.objGetClipRight();
this.css2.clip.left = left;
this.css2.clip.right = right;
this.css2.clip.top = top;
this.css2.clip.bottom = bottom;
}
function nsobjGetClipRect () {
var strng;
var left = this.css2.clip.left;
var right = this.css2.clip.right;
var bottom = this.css2.clip.bottom;
var top = this.css2.clip.top;
strng = "rect(" + top + "px, " + right + "px, " +
bottom + "px, " + left + "px)";
return strng;
}
// get current clip right
function nsobjGetClipRight() {
return this.css2.clip.right;
}
// get current clip left
function nsobjGetClipLeft() {
return this.css2.clip.left;
}
// get current clip top
function nsobjGetClipTop() {
return this.css2.clip.top;
}
// get current clip bottom
function nsobjGetClipBottom() {
return this.css2.clip.bottom;
}
Navigator 4.x implemented the clipping values as separate values, which actually made the use of this CSS attribute a little easier than how it was implemented in IE. However, the IE implementation is one that can be shared by Mozilla/Navigator 6.0 — though it is more complicated:
// return clipping rectangle
function domGetClipRect() {
return this.css2.style.clip;
}
// clip object
function domSetClipRect(top, left, bottom, right) {
if (top == null) top = this.objGetClipTop();
if (left == null) left = this.objGetClipLeft();
if (bottom == null) bottom = this.objGetClipBottom();
if (right == null) right = this.objGetClipRight();
strng = "rect(" + top + "px, " + right + "px, " +
bottom + "px, " + left + "px)";
this.css2.style.clip = strng;
}
// clip object on left
function domGetClipLeft() {
return get_entry(this,"left");
}
// clip object on right
function domGetClipRight() {
return get_entry(this, "right");
}
// clip object at top
function domGetClipTop() {
return get_entry(this,"top");
}
// clip object at bottom
function domGetClipBottom() {
return get_entry(this,"bottom");
}
The main difference between the Navigator 4.x and IE implementation is that the IE treats the clipping property as one setting rather than four distinct settings. Based on this when accessing the existing the clipping property, it has to be parsed to get each of the clipping rectangle’s values.
| Microsoft did provide read only properties to access each value of the clipping rectangle. However, as these aren’t usable with Mozilla/Navigator 6.0, I left the code within the object as is, and used parsing. |
The parsing is handled through two helper functions, convert and get_entry, which are not exposed on the X-Object’s interface:
// convert string to value
function convert(strng) {
var i = parseInt(strng);
return i;
}
// get clipping value for specific dimension
function get_entry(obj,indx) {
strng = obj.css2.style.clip;
if (strng.length > 0) {
strng = strng.slice(5,strng.length-1);
var entries = strng.split(" ");
}
else {
var entries = new Array(5);
for (i = 0; i < entries.length; i++)
entries[i] = "auto";
}
if (indx == "top") {
if (entries[0] == "auto")
return 0;
else
return convert(entries[0]);
}
else if (indx == "left") {
if (entries[3] == "auto")
return 0;
else
return convert(entries[3]);
}
else if (indx == "bottom"){
if (entries[2] == "auto") {
return obj.objGetHeight();
}
else
return convert(entries[2]);
}
else if (indx == "right") {
if (entries[1] == "auto")
return obj.objGetWidth();
else
return convert(entries[1]);
}
}
Let’s try the X-Object clipping functionality, with an example application created specifically for testing clipping.
Clipping Test Application
The test page has two different blocks in the page, each created in separate positioned DIV blocks. The topmost block contains an HTML form and form buttons, used to clip the second block’s left, top, right, and bottom rectangle’s values:
<BODY onload="create_objects(); setup()"> <DIV style="position:absolute; left:10; top:10; background-color: yellow; layer-background-color: yellow; padding-top: 20px; overflow: hidden; width: 500; height:150; clip: auto"> <form action=""> <center> <INPUT type="button" value="Clip to the Left" onclick="clip_left()"> <INPUT type="button" value="Clip to the right" onclick="clip_right()"><p> <INPUT type="button" value="Clip on the top" onclick="clip_top()"> <INPUT type="button" value="Clip the bottom" onclick="clip_bottom()"><p> <input type="button" value="Show the clip property" onclick="show_clip()"> </center> </FORM> </DIV> <DIV id="info" style="position:absolute; left: 250px; top: 180px; background-color: red; width: 300px; height: 300px; overflow: hidden; layer-background-color: red"> <H1>Block with info</H1> <p> This is a block that contains two HTML elements: a header and a paragraph </p> </DIV> </BODY>
A function is called when the page is loaded, setup, which sets the clipping region of the target DIV block, using values that differ based on browser type:
function setup() {
theobjs["info"].objSetClipRect(0,0,300,300);
}
}
These values set the clipping region to fit the existing DIV block parameters (300px wide, 300px tall).
The functions to create the clipping effect are:
// clip element
function clip_left() {
var lft = theobjs["info"].objGetClipLeft();
lft+= 10;
theobjs["info"].objSetClipRect(null,lft,null,null);
}
function clip_right() {
var rt = theobjs["info"].objGetClipRight();
rt-= 10;
theobjs["info"].objSetClipRect(null,null,null,rt);
}
function clip_top() {
var top = theobjs["info"].objGetClipTop();
top+= 10;
theobjs["info"].objSetClipRect(top,null,null,null);
}
function clip_bottom() {
var bt = theobjs["info"].objGetClipBottom();
bt-= 10;
theobjs["info"].objSetClipRect(null,null,bt,null);
}
function show_clip() {
alert(theobjs["info"].objGetClipRect());
}
Try out the Clipping Example for yourself, using IE 4.x and up, Navigator 4.x, or Mozilla/Navigator 6.0.
| For more complicated demonstrations of clipping, check out the associated article Demonstrating PhotoShop functionality using DHTML and X-Objects, which has four DHTML demonstrations using various effects, including clipping. |