[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 854
  • Last Modified:

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
0
Noodle0792
Asked:
Noodle0792
  • 2
1 Solution
 
Pravin AsarCommented:
Look at the menu at

http://www.asarfamily.com/drspatel 

Do you want something like this ??


0
 
ahoffmannCommented:
assuming your table is defined like:
  <table id="foo" >

then you can get the x/y cordinates with

  x=document.getElementById("foo").offsetLeft;
  y=document.getElementById("foo").offsetTop;
0
 
Pravin AsarCommented:
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>

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

ahoffmann - that worked perfect!  Thanks!

Jason
0

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now