Intro to the CBE Sizing Methods

Notes

When you pass a value to the CBE width() or height() method in a browser that implements the css box model, CBE first finds the sizes of the padding and borders, subtracts that value from your argument, then sets the css width or height with the result. This is equivalent to being able to set the native offsetWidth and offsetHeight properties (which are read-only).

See the object reference for complete details of each function, and for an explanation of the paramter syntax used here. Notice that you resize the element before repositioning it, because centering the element is based on it's size.

Sizing An Element

width([uW])

Sets the width. Does not change the clipping area. Returns the current width.

height([uH])

Sets the height. Does not change the clipping area. Returns the current height.

Example 1 Sets E1's width to 100 and height to 50, and sets E2's width and height to half the value of it's parent's. They are both moved to 'center'.

Normally you will use resizeTo() since it also changes the clipping to match the new size.

function windowOnload() {
  var e1 = document.getElementById('E1').cbe;
  e1.width(100);
  e1.height(50);
  e1.clip('auto');
  e1.moveTo('center');
  var e2 = document.getElementById('E2').cbe;
  e2.width( e1.width()/2 );
  e2.height( e1.height()/2 );
  e2.clip('auto');
  e2.moveTo('center');
}

Top

sizeTo(uW, uH)

sizeTo sets the width and height. Does not change the clipping area. Returns void.

sizeBy(iW, iH)

sizeBy adds the arguments to the current width and height. Does not change the clipping area. Returns void.

resizeTo(uW, uH)

resizeTo sets the width and height and calls clip('auto'). Returns void.

resizeBy(iW, iH)

resizeBy adds the arguments to the current width and height and calls clip('auto'). Returns void.

Example 2 Sets E1's size to half it's parent's size, moves it to the center of it's parent, then decreases it's width and height by half it's own size. This has the effect of sizing E1 to a quarter of it's parent's size and placing it's bottom-right corner at the center of the window.

function windowOnload() {
  var e1 = document.getElementById('E1').cbe;
  e1.resizeTo( e1.parentNode.width()/2, e1.parentNode.height()/2);
  e1.moveTo('center');
  e1.resizeBy(-e1.width()/2, -e1.height()/2);
}

Example 3 Maximizes E1 within the visible area of it's container. This function is called when you click the maximize link on E1 or E2.

function maximize(id) {
  var cbe = document.getElementById(id).cbe;
  cbe.moveTo(cbe.parentNode.scrollLeft(), cbe.parentNode.scrollTop());
  cbe.resizeTo(cbe.parentNode.width(), cbe.parentNode.height());
}

Example 4 Resizes E3, a relatively positioned element. The alert() is used so you can see the effect of the first resize, before the next resize. Resizing relatively positioned elements doesn't work well in Opera and NN4.

function windowOnload() {
  var e3 = document.getElementById('E3').cbe;
  e3.resizeBy(100,100);
  alert("pause");
  e3.resizeBy(-100,-100);
}

Top

All clipping examples moved to here