?
Solved

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

Posted on 2007-04-06
4
Medium Priority
?
856 Views
Last Modified: 2013-11-19
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
Comment
Question by:Noodle0792
  • 2
4 Comments
 
LVL 29

Expert Comment

by:Pravin Asar
ID: 18869524
Look at the menu at

http://www.asarfamily.com/drspatel 

Do you want something like this ??


0
 
LVL 51

Accepted Solution

by:
ahoffmann earned 2000 total points
ID: 18869535
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
 
LVL 29

Expert Comment

by:Pravin Asar
ID: 18869565
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
 

Author Comment

by:Noodle0792
ID: 18869930
pravinasar - that wasn't quite what I was looking for, but thanks for the input!

ahoffmann - that worked perfect!  Thanks!

Jason
0

Featured Post

Learn to develop an Android App

Want to increase your earning potential in 2018? Pad your resume with app building experience. Learn how with this hands-on course.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
The viewer will learn how to count occurrences of each item in an array.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

599 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question