require you to save the file below to a file and open it in a browser.
I use Mozilla 1.5, so the problem I describe below should be
reproducible with that version at least.
BACKGROUND:
===========
When you open this page in your browser, you will see a 4 cell table.
The cells contain the following items respectively:
1) Gray background
2) Pink background showing the current mouse X position
3) White background showing the X-coord of the left edge of Cell #1
4) Yellow background showing a traversal of nodes from Cell #1 up the
tree to the root node
I need to dynamically calculate the X-coord value of the left edge of
the gray box. By placing the mouse on the left edge of the gray box,
and observing the value in the Pink cell, you can find out what the
"correct" value should be.
The way I calculate the X-coord of the left edge of the Gray cell is
to walk up the tree till I hit the root, accummulating the offSetLeft
values along the way. In theory this should give me the x-coord value
of my cell. This is the value you see in the White cell. In the yellow
cell, you see each node along the way and its offset value.
PROBLEM:
========
Now here is the issue: The "correct" value and the computed value
differ (approx 10 VS 18). I am trying to figure out why. I have found
that FORM tag adds 8 pixels to the computed value.... even though it
is completely invisible and doesn't affect the actual onscreen
placement of its child nodes. You can try it yourself by removing the
form tag.
So does anyone know how to get around this issue? Why does an
invisible form tag add 8 pixels? Is there some alternate/easier way to
get the X coord of the left edge of an Element??
------------------------------------------------------------------------
<HTML>
<HEAD>
<SCRIPT language="JavaScript1.2">
<!--
var IE = document.all?true:false;
// If NS -- that is, !IE -- then set up for mouse capture
if (!IE) document.captureEvents(Event.MOUSEMOVE)
// Set-up to use getMouseXY function onMouseMove
document.releaseEvents(Event.MOUSEMOVE);
document.onmousemove = getMousePos;
// Temporary variables to hold mouse x-y pos.s
var mouseX = 0
// Main function to retrieve mouse x-y pos.s
function getMousePos(e) {
if (IE) // grab the x pos.s if browser is IE
mouseX = event.clientX + document.body.scrollLeft;
else // grab the x pos.s if browser is NS
mouseX = e.pageX;
// catch possible negative values in NS4
if (mouseX < 0){mouseX = 0}
document.getElementById('MOUSE_XPOS').childNodes[0].data = mouseX;
return true;
}
function getLeftXCoord(element)
{
currElement = element;
xOffSet = 0;
document.getElementById('TRAVERSAL_TEXT').childNod es[0].data =
'\tTag=' + currElement.tagName + ',\tOffset=' + currElement.offsetLeft
+ ',\tCummulative Offset=' + xOffSet + '\n';
while (currElement.parentNode != null)
{
xOffSet += currElement.offsetLeft;
currElement = currElement.parentNode;
document.getElementById('TRAVERSAL_TEXT').childNod es[0].data
+= '\tTag=' + currElement.tagName + ',\tOffset=' +
currElement.offsetLeft + ',\tCummulative Offset=' + xOffSet + '\n';
}
// alert(xOffSet + '; ' + element.scrollTop)
// alert(xOffSet + ' | ' + window.status);
return xOffSet;
}
//-->
</SCRIPT>
</HEAD>
<FORM name="myForm">
<BODY>
<table border=1 >
<TR>
<TD
bgcolor="gray"
name="TABLE_CELL"
id="TABLE_CELL"
Gray Box
</TD>
</TR>
<TR>
<TD bgcolor="pink">Mouse X Position: <PRE
name="MOUSE_XPOS" id="MOUSE_XPOS">0</PRE>
</TD>
</TR>
<TR>
<TD>Left Edge of Gray Box:
<input
type="text"
value="xxx"
name="TABLE_TEXT"
id="TABLE_TEXT"
onMouseOver="javascript:getElementById('TABLE_TEXT ').value =
getLeftXCoord(document.getElementById('TABLE_CELL' ));"
</TD>
</TR>
<TR>
<TD bgcolor="yellow">Tree Traversal from Gray Box to
Root: <BR>
<PRE name="TRAVERSAL_TEXT"
id="TRAVERSAL_TEXT">XXX</PRE>
</TD>
</TR>
</TABLE>
</BODY>
</FORM>
</HTML>
