The Marker Technique

A common problem with dHTML is how to place a positioned element relative to some normal html element on the page. This solution to that problem is what I call the marker technique.

On this page there is one absolutely positioned element (E1) which contains a flag image. There are also two relatively positioned elements (R1, and R2) which normally would have no content and not be visible, but for this demo I've put a '.' in each element and made them visible.

A relatively positioned element remains in the flow of HTML. It's left and top properties define an offset from what would be it's position if it were just an ordinary html element. What makes the marker technique possible is the fact that CBE makes it possible to find the absolute (page-relative) position of the relatively positioned element. We can then place our absolutely positioned element with respect to the relatively positioned element, which becomes a firm anchor in a sea of html.

Positioning an Element relative to a Table cell

We have a table with three rows and two columns. Two relatively positioned elements are in this table: R1 is before the text in 'row2,col2', and R2 is before the text in 'row3,col2'. The following links allow you to slide E1 to the absolute position of either R1 or R2.

e1.slideTo(r1.pageX(),r1.pageY(),1000)

e1.slideTo(r2.pageX(),r2.pageY(),1000)

row 1 col 1 row 1 col 2
row 2 col 1 .row 2 col 2
row 3 col 1 .row 3 col 2

Notice that I've called the CBE function cbeMouseMoveStatus(), which displays information on the status bar as the mouse is moved. It displays the id of the element under the mouse pointer, as well as it's parent's id, and other info. If you slowly move the mouse over R1 and R2 (drag the image out of the way), you'll see that CBE knows that they are there and has calculated their positions.

Top

offsetLeft()/offsetTop() and pageX()/pageY()

Using CBE, the absolute position of a relatively or an absolutely positioned element is obtained by the CrossBrowserElement methods pageX() and pageY().

I've written the methods offsetLeft() and offsetTop() especially for dealing with relatively positioned elements. They have the same meaning for relatively positioned elements as left() and top() have for absolutely positioned elements. That is, they return the position of the element relative to it's parent CrossBrowserElement object.

The CSS for E1, R1 and R2

Normally, the markers would be hidden, but for this demo I've made them visible.

.clsCBE {
  position:absolute; width:100%; height:100%;
  clip:rect(100%,100%,100%,100%); background:transparent;
}
.clsMarker {
  position:relative; visibility:visible;
  width:1px; height:12px; left:0px; top:0px;
}

The HTML for the Table containing R1 and R2

Normally, the markers would have no content, but for this demo I've put a '.' in them.

<table width='80%' border='1' cellspacing='0' cellpadding='0'>
  <tr>
    <td valign='top' width='50%'>row 1 col 1</td>
    <td valign='top' width='50%' height='34'>row 1 col 2</td>
  </tr>
  <tr>
    <td valign='top' width='50%' height='34'>row 2 col 1</td>
    <td valign='top' width='50%'>
      <span id='R1' class='clsMarker'>.</span>row 2 col 2
    </td>
  </tr>
  <tr>
    <td valign='top' width='50%' height='34'>row 3 col 1</td>
    <td valign='top' width='50%'>
      <span id='R2' class='clsMarker'>.</span>row 3 col 2
    </td>
  </tr>
</table>

The Javascript for this Page

var e1, r1, r2;
function windowOnload() {
  with (e1 = document.getElementById('E1').cbe) {
    addEventListener('drag');
    resizeTo(60,32);
    moveTo('ne',1);
    show();
  }
  r1 = cbeGetElementById('R1').cbe;
  r2 = cbeGetElementById('R2').cbe;
  cbeMouseMoveStatus();
}
E1: draggable