Intro to the CBE Clipping Methods

Click one of the following to see the reference for that method.

• autoClip
• clip
• clipArray
• clipBottom
• clipBy
• clipHeight
• clipLeft
• clipRight
• clipTop
• clipWidth
• scrollBy

None of these methods work with Opera.

clip(iTop [, iRight, iBottom, iLeft])

clip sets the clipping area (the visible area). If the only argument is 'auto', then the clipping area is set to the current width and height. Returns void. Opera6 does not support dynamic clipping.

The values of right and bottom are not applied as "offsets from their respective sides" as is stated in the CSS2 document. The values of top, right, bottom, and left define a clipping rectangle by specifying the coordinates of the corners of the rectangle. These coordinates are relative to the element's own coordinate system, where the point (0,0) is at the top-left corner.

To clip to a width and height:
element.cbe.clip(0, width, height,0)

To clip to an offset from each side:
element.cbe.clip(offset, element.width()-offset, element.height()-offset, offset)

Example 1 Resizes E1 and centers it. E1 is then clipped with an offset of 25 from each side.

function windowOnload() {
  var e1 = document.getElementById('E1').cbe;
  e1.resizeTo(200, 200);
  e1.moveTo('center');
  e1.clip(25, e1.width()-25, e1.height()-25, 25);
}

clipTop()
clipRight()
clipBottom()
clipLeft()

These methods return the current value of the associated clip property. These values are coordinates relative to the element itself.

clipWidth()
clipHeight()

clipWidth() returns clipRight() - clipLeft()

clipHeight() returns clipBottom() - clipTop()

clipArray()

clipArray() returns an array of strings. Mostly, this method is used internally by CBE. This method returns null for NN4 and Opera.

Example 2 Displays the array returned by e1.clipArray().

clipBy(iDT, iDR, iDB, iDL)

clipBy() adds the arguments to the corresponding properties. It will not clip beyond the existing width and height of the element and will not let top/bottom and left/right coords cross.

Example 3 Centers E1 then calls e1.clipBy(50,25,50,25).

scrollBy(iDX, iDY)

This method simulates scrolling by clipping and moving.

Example 4 Enables scrolling. It removes the dragResize listener from E1 and adds the following drag listener.

function scrollingDragListener(e) {
  e.cbeCurrentTarget.scrollBy(-e.dx, -e.dy);
}

Example 4 really has to do more than just add the above listener. This is the key to setting-up scrolling: resize the element with a width set to the desired wrapping column, and with a height that will not hide any content. Then set the clipping area to the size of the scrolling window that you want. The scrollBy() method won't allow scrolling beyond the edge of the element and it won't allow the clip width nor clip height to change. Here's the code for example 4:

 e1.removeEventListener('dragResize');
 var clipX = e1.left();
 var clipY = e1.top();
 var clipW = e1.width();
 var clipH = e1.height();
 e1.sizeTo(document.cbe.width()/2, document.cbe.height());
 e1.moveTo(clipX,clipY);
 e1.clip(0,clipW,clipH,0);
 e1.addEventListener('drag', scrollingDragListener);

Example 5 Enables dragResize. It removes the drag listener that implements scrolling and adds the dragResize listener. Here's the code for example 5:

 e1.removeEventListener('drag', scrollingDragListener);
 var eleX = e1.left() + e1.clipLeft();
 var eleY = e1.top() + e1.clipTop();
 var eleW = e1.clipWidth();
 var eleH = e1.clipHeight();
 e1.resizeTo(eleW,eleH);
 e1.moveTo(eleX,eleY);
 e1.addEventListener('dragResize');

In examples 4 and 5, look at the setup for position and size. This allows you to switch between scrolling and dragging/resizing - and the position and size of the element appears not to change!

autoClip(cp, cmd, increment, endListener)

autoClip is not yet time-based, like the slide methods. It iterates clipping until the specified point is reached.

Example 6 resizes and centers E1, calls autoClip(), and enables scrolling.