DOCJSLIB Version 4.0: How to Create a Clipping Region - www.docjavascript.com

Creating a Clipping Region

The clipping region specifies the potentially-visible area of a DHTML element. It's potentially visible, because you can turn off the visibility, thus making the clipping region invisible. Netscape Navigator and Internet Explorer have different clipping region models. Netscape Navigator uses the clip object with its width and height properties that you simply assign values to. Internet Explorer keeps the clip property as a single string that includes four numbers:

• The x coordinate of the rectangle's left edge.
• The x coordinate of the rectangle's right edge.
• The y coordinate of the rectangle's bottom edge.
• The y coordinate of the rectangle's top edge.

The function provided by DOCJSLIB defaults to a (0,0) top left corner, so the left and top edges are set at x=0 and y=0:

function docjslib_createClipRegionAt00(id, clipWidth, clipHeight) {
  if (NS4) {
    eval(id).clip.width = clipWidth;
    eval(id).clip.height = clipHeight;
  } else eval(id).style.clip = "rect(0 " + eval(clipWidth) +
    " " + eval(clipHeight) + " 0)";
  // (The above two lines should be joined as one line.
  // They have been split for formatting purposes.)
}

Setting the visibility of a DHTML element has been dealt with before in our columns. In Version 4.0 we added a function to set the visibility of an element that is passed by reference, i.e. its object is passed to the function:

function docjslib_setElementVisibility(id, flag) {
  if (NS4) {
    var str = (flag) ? 'show' : 'hide';
    eval(id).visibility = str;
  }
  else {
    var str = (flag) ? 'visible' : 'hidden';
    eval(id).style.visibility = str;
  }
}

Produced by Yehuda Shiran and Tomer Shiran

Created: January 4, 1999
Revised: December 18, 1999

URL: https://www.webreference.com/js/column33/clip.html