Solved

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

Posted on 2007-04-06
4
844 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 28

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 500 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 28

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

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

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

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Html CheckBox obtain Its Value 5 28
Make Session back to empty 9 30
Responsive Font Size 6 29
How to check if a check box is active using Java Script? 2 21
Preface This is the third article about the EE Collaborative Login Project. A Better Website Login System (http://www.experts-exchange.com/A_2902.html) introduces the Login System and shows how to implement a login page. The EE Collaborative Logi…
Introduction Since I wrote the original article about Handling Date and Time in PHP and MySQL (http://www.experts-exchange.com/articles/201/Handling-Date-and-Time-in-PHP-and-MySQL.html) several years ago, it seemed like now was a good time to updat…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

829 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