Solved

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

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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Preface In the first article: A Better Website Login System (http://www.experts-exchange.com/A_2902.html) I introduced the EE Collaborative Login System and its intended purpose. In this article I will discuss some of the design consideratio…
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

910 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

Need Help in Real-Time?

Connect with top rated Experts

21 Experts available now in Live!

Get 1:1 Help Now