Intro to the CBE Positioning Methods

Notes

See the object reference for an explanation of the parameter syntax used on this site, and for complete details on these methods.

It is the object's top-left corner which is positioned. The point (0,0) is always at the top-left corner of the object's containing object (it's parent).

Positioning An Element

left([iX])

left sets the x-coordinate. Returns the current x-coordinate.

top([iY])

top sets the y-coordinate. Returns the current y-coordinate.

Example 1 Sets E1's x-coordinate to 0, and sets E2's y-coordinate to 0.

function windowOnload() {
  var e1 = document.getElementById('E1').cbe;
  e1.left(10);
  var e2 = document.getElementById('E2').cbe;
  e2.top(0);
}

Example 2 Sets E2's top-left corner at it's parent's center.

function windowOnload() {
  var e2 = document.getElementById('E2').cbe;
  var x = e2.parentNode.width() / 2;
  var y = e2.parentNode.height() / 2;
  e2.left(x);
  e2.top(y);
}

Top

moveBy(iDx, iDy)

moveBy adds the arguments to the current coordinates. Returns void.

moveTo(iX, iY [, xEndListener ]) - pixel coordinates

moveTo sets the (x,y) coordinates (moves the object to the specified point). Returns void.

Example 3 Moves E1 to the same position as E3, then moves it by the width and height of E3.

function windowOnload() {
  var e1 = document.getElementById('E1').cbe;
  var e3 = document.getElementById('E3').cbe;
  e1.moveTo(e3.pageX(), e3.pageY());
  e1.moveBy(e3.width(), e3.height());
}

Top

moveTo(sCardinal [, iMargin [, bOutside [, xEndListener ]]]) - cardinal coordinates

moveTo moves the object to a cardinal position - north, south, etc. (see the object reference for details). Returns void.

Example 4 Moves both E1 and E2 to the center of their respective containers.

function windowOnload() {
  var e1 = document.getElementById('E1').cbe;
  e1.moveTo('center')
  e1.firstChild.moveTo('center');
}

Example 5 Moves E1 to the center, then moves E2 half-way off the 'east' edge of it's container.

function windowOnload() {
  var e1 = document.getElementById('E1').cbe;
  var e2 = document.getElementById('E2').cbe;
  e1.moveTo('center')
  e2.moveTo('e', -e2.width()/2, true);
}