Introducing DOCJSLIB Version 2.0: Position Handling - Doc JavaScript

Position Handling

Setting the initial position is consistent across browsers, because DOCJSLIB 2.0 sets the element position in the <STYLE> HTML tag, which is, of course, standard. DOCJSLIB 2.0 includes two models, the image model and the box model. Our image model's <STYLE> tag is the following:

'<STYLE TYPE="text/css">',
    '#', imgID, ' {',
      'position: absolute;',
      'left: ', posFromLeft, ';',
      'top: ', posFromTop, ';',
      'width: ', imgWidth, ';',
      'z-index: 1',
    '}',
'</STYLE>'

Similarly, our box model's <STYLE> tag is the following:

'<STYLE TYPE="text/css">',
    '#', boxID, ' {',
      'position: absolute;',
      'left: ', posFromLeft, '; top: ', posFromTop, ';',
      'width: ', boxWidth, ';',
      'layer-background-color: ', boxBg, ';',
      'background-color: ', boxBg, ';',
      'visibility: ', visibility, ';',
      'border-width: 2;',
      'border-style: solid;',
      'border-color: ', boxColor, ';',
      padding,
      'z-index: 1',
    '}',
'</STYLE>'

Notice that our models use the absolute positioning alternative. It means that the DHTML element is positioned with respect to the window's left and top edges. Relative positioning, on the other hand, positions the element with respect to the text that comes before the DHTML element. The two positional attributes above, left and top, specify the absolute coordinates of the DHTML element. The given distances are from the left and top edges of the window (in pixels), and are specified by the caller routine.

DOCJSLIB 2.0 includes only one function for position manipulation. The function setPosFromLeft() sets the horizontal distance between the element's left side and the window's left edge. Notice the difference in referencing the left property in Netscape Navigator and Internet Explorer. They are explained in one of the previous pages. Here is the setPosFromLeft() function:

function setPosFromLeft(id, xCoord) {
  if (NS4) {eval("document." + id).left = xCoord}
  else {eval("document.all." + id).style.left = xCoord}
}

The function accepts two parameters, the element id and xCoord, the new distance from the left edge of the window (in pixels). The element id is a string that the calling application uses when creating the box with the makeBox() function.

Created: October 26, 1998
Revised: October 26, 1998

URL: https://www.webreference.com/js/column28/position.html