October 19, 2001 - Parent-Child Relationship

Yehuda Shiran October 19, 2001
Parent-Child Relationship
Tips: October 2001

Yehuda Shiran, Ph.D.
Doc JavaScript

When you play around with DHTML objects, the way you set the position property is crucial. Whenever you want to set an element relative to its parent element, you need to set the parent's position property to "relative". If you omit this property, the child element will be positioned as if its coordinates are "absolute". In this case the parent element has no impact on its child's position. Let's take an example. The following is an example of good coding, because the parent element, zoomcontainer1, is positioned as "relative":

<DIV ID="zoomcontainer1" STYLE="position:relative">
<IMG ID="mmarkerRight1" SRC="marker.gif" WIDTH="10" HEIGHT="10" BORDER="0" STYLE="position:relative; 
  top:10; left:50">
<IMG ID="ratiomarker1" CLASS="mmarker" STYLE="visibility:hidden; left:1in; top:1in; 
  position: absolute" SRC="marker.gif" WIDTH="15" HEIGHT="15" BORDER="0">
</DIV>
This example is of a marker that, when clicked, shows the marker's x coordinate in inches. Play around with it:



Now let's take the same example and remove the position assignment from the first element:

<DIV ID="zoomcontainer2">
<IMG ID="mmarkerRight2" SRC="marker.gif" WIDTH="10" HEIGHT="10" BORDER="0" STYLE="position:relative; 
  top:10; left:50">
<IMG ID="ratiomarker2" CLASS="mmarker" STYLE="visibility:hidden; left:1in; top:1in; 
  position: absolute" SRC="marker.gif" WIDTH="15" HEIGHT="15" BORDER="0">
</DIV>
Play with it now. See that the tool tip is way down far from the marker. When the parent is not positioned as "relative", the child element is also not positioned with respect to that parent.



Here is the code:

<SCRIPT LANGUAGE="JavaScript">
<!--
function Init() {
  mmarkerRight1.attachEvent("onmousedown", MouseDownHandler1);
  mmarkerRight2.attachEvent("onmousedown", MouseDownHandler2);
}
function MouseDownHandler1() {
  if (event.button != 1) return;
  iPixelToInchRatio = ratiomarker1.offsetLeft;
  oPopup = window.createPopup();
  oPopupBody = oPopup.document.body;
  theText = Math.round((100 * mmarkerRight1.offsetLeft)/iPixelToInchRatio)/100;
  oPopupBody.innerHTML = theText + " in";
  oPopupBody.style.backgroundColor = "#ffff66";
  oPopupBody.style.border = "1 solid black";
  oPopupBody.style.fontSize = "12px";
  oPopupBody.style.fontFamily = "Courier New";
  oPopup.show(mmarkerRight1.offsetLeft + 5, mmarkerRight1.offsetTop - 20, 60, 16, zoomcontainer1);
  return;
}
function MouseDownHandler2() {
  if (event.button != 1) return;
  iPixelToInchRatio2 = ratiomarker2.offsetLeft;
  oPopup = window.createPopup();
  oPopupBody = oPopup.document.body;
  theText = Math.round((100 * mmarkerRight2.offsetLeft)/iPixelToInchRatio2)/100;
  oPopupBody.innerHTML = theText + " in";
  oPopupBody.style.backgroundColor = "#ffff66";
  oPopupBody.style.border = "1 solid black";
  oPopupBody.style.fontSize = "12px";
  oPopupBody.style.fontFamily = "Courier New";
  oPopup.show(mmarkerRight2.offsetLeft + 5, mmarkerRight2.offsetTop - 20, 60, 16, zoomcontainer2);
  return;
}
// -->
</SCRIPT>