asked on

How do I find out the x position of a table?

Hi-

I got a DHTML floating menu that I want to incorperate onto my page. The script has a var for the x position of the menu (it floats vertically). I would like to find the x pos of a table thats on my page and set the x pos of the menu to that (minus the width of the menu). That way, the menu will float right along the side of the table, no matter the viewers window size or screen resolution. Thanks in advance.

Jason

Pravin Asar

Look at the menu at

http://www.asarfamily.com/drspatel

Do you want something like this ??

ASKER CERTIFIED SOLUTION

ahoffmann

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Pravin Asar

Here is a complete example and javascript code

<html>
<body>
<script language="javascript">
// Absolute Position
function GetTagPixels(StartTag, Direction) {
var PixelAmt = (Direction == 'LEFT') ? StartTag.offsetLeft : StartTag.offsetTop;
while ((StartTag.tagName != 'BODY') && (StartTag.tagName != 'HTML')) {
StartTag = StartTag.offsetParent;
PixelAmt += (Direction == 'LEFT') ? StartTag.offsetLeft : StartTag.offsetTop;
}
return PixelAmt;
}

// Relative to container

function GetTagPosition (tagObj) {
this.x = tagObj.offsetLeft;
this.y = tagObj.offsetTop;
return (this);
}

function GetTagDimension (tagObj) {
this.width = tagObj.offsetWidth;
this.height = tagObj.offsetHeight;
return (this);
}
function InqAbsPosition (dTag) {
var xpos = GetTagPixels (dTag, "LEFT");
var ypos = GetTagPixels (dTag, "TOP");
var dim = GetTagDimension (dTag);
window.status = "X: " + xpos + ", Y: " + ypos + " Width : " + dim.width + " Height: " + dim.height;
}
function InqRelPosition (dTag) {
var pos = GetTagPosition (dTag);
var dim = GetTagDimension (dTag);
window.status = "X: " + pos.x + ", Y: " + pos.y + " Width : " + dim.width + " Height: " + dim.height;
}
</script>
<table onmouseover="InqAbsPosition (this);" style="background-color: #ff9933; position: absolute; top: 300px; left: 100px; border: black solid 1; width: 100px; height: 200px;">
<tr>
<td>(mouseover to get absolute position)</td>
</tr>
</table>

<span style="position: absolute; top: 300px; left: 300px; padding: 10px; border: black solid 1; width: 100px; height: 100px;">

<table style="background-color: #ff2233;" onmouseover="InqRelPosition (this);">
<tr>
<td>
(mouseover to get relative position), This one contained in another HTML element
</td>
</tr>
</table>
</span>

</body>
</html>

Noodle0792

ASKER

pravinasar - that wasn't quite what I was looking for, but thanks for the input!

ahoffmann - that worked perfect! Thanks!

Jason