Solved

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

Posted on 2007-04-06
4
846 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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 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 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

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
This article discusses how to implement server side field validation and display customized error messages to the client.
Viewers will learn about basic arrays, how to declare them, and how to use them. Introduction and definition: Declare an array and cover the syntax of declaring them: Initialize every index in the created array: Example/Features of a basic arr…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

733 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