Solved

How to get left and top (pixels) positions of a table in a page? and to position a "DIV" at the same location.

Posted on 2002-04-19
6
250 Views
Last Modified: 2008-03-10
I use VBScript and ASP pages to generate the pages.

1.
I want to use JavaScript to find out where
a specific table upper left corner is at the page in pixels.

2.
I would also like to know how to place a DIV at the same pixelcoordinates that we found in the first place.

The reading and positioning of x,y pixels should be from the page upper left corner. Pixels (0,0).

The table is widthin a DIV tag and has an ID.
(<DIV ID="thisTable"><table> Tablecontent </table></DIV>

I would like it to work with both IE, NE and Opera.
(For NE: (4.08 and above)), (for IE and opera as far back as possible).

I allready got the code to detect what browser is beeing used.

Just want to be able to read the coordinates in pixels, and want to be able to position another "DIV" at excact that location....:-)

Example code please.

Erot



0
Comment
Question by:erot
[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
6 Comments
 
LVL 22

Expert Comment

by:CJ_S
ID: 6953358
In Netscape you can only read the coordinates if the table is contained within a layer (div)

So, your page could look like:

<html>
 <head>
  <style type="text/css">
  #thisTable{position:relative;}
  #divOther{position:absolute;visibility:visible;}
  </style>
  <script language="javascript">
  <!--
   function rePosition()
   {
      lObj = (document.layers?document.layers["thisTable"]:document.all["thisTable"]);
      x = (document.layers?lObj.left:lObj.offsetLeft);
      y = (document.layers?lObj.top:lObj.offsetTop);
      alert("x position: " + x + "\ny position: " + y);
     
      lObj = (document.layers?document.layers["divOther"]:document.all["divOther"].style;
      lObj.left = x;
      lObj.top = y;
   }
   window.onload=rePosition;
  //-->
  </script>
 </head>

 <body>
  <DIV ID="thisTable"><table> Tablecontent </table></DIV>
  <div id="divOther">other data</div>
 </body>
</html>
0
 
LVL 22

Expert Comment

by:CJ_S
ID: 6953360
I forgot something, sorry

<html>
<head>
 <style type="text/css">
 #thisTable{position:relative;}
 #divOther{position:absolute;visibility:visible;}
 </style>
 <script language="javascript">
 <!--
  function rePosition()
  {
     lObj = (document.layers?document.layers["thisTable"]:document.all["thisTable"]);
     x = (document.layers?lObj.left:lObj.offsetLeft);
     y = (document.layers?lObj.top:lObj.offsetTop);
     alert("x position: " + x + "\ny position: " + y);

     lObj = (document.layers?document.layers["divOther"]:document.all["divOther"].style);
     lObj.left = x;
     lObj.top = y;
  }
  window.onload=rePosition;
 //-->
 </script>
</head>

<body>
 <DIV ID="thisTable"><table> Tablecontent </table></DIV>
 <div id="divOther">other data</div>
</body>
</html>
0
 

Author Comment

by:erot
ID: 6955835
Hi and thanks for reply. Have tested it and had some problems with NE and OPERA. have a look at this htm. page and hopefully come back with some great suggestions :-)
Erot


<html>
<head>
<style type="text/css">
#thisTable{position:relative;}
#divOther{position:absolute;visibility:visible;}
</style>
<script language="javascript">
<!--
function rePosition()
{
//#thisTable{position:absolute; left:300; top:300} vas working without table around div
//#divOther{position:absolute;visibility:visible;} was also working, did also work widthout visibility


lObj = (document.layers?document.layers["thisTable"]:document.all["thisTable"]);
x = (document.layers?lObj.left:lObj.offsetLeft);
y = (document.layers?lObj.top:lObj.offsetTop);
alert("x position: " + x + "\ny position: " + y);

lObj = (document.layers?document.layers["divOther"]:document.all["divOther"].style);
lObj.left = x;
lObj.top = y;
}
window.onload=rePosition;
//-->
</script>
</head>

<body>
 
  <div align="center">
  <table border="0" width="650" bgcolor="#CCCCCC" cellborder="0" cellpadding="0" cellspacing="0" background="">
    <tr>
    <td>
     
        <div align="left">
           <table border="1" width="650" align="left" cellpadding="0" cellspacing="0" bgcolor="#CCCCCC">
           
            <tr>
              <td>
                <table height="10" width="650" align="left" cellborder="0" cellpadding="0" cellspacing="0" bgcolor="#CCCCCC"><tr><td> </td></tr></table>
              </td>
            </tr>
           
            <tr>
              <td align="left">
                 <table width="650" align="left" border="1" cellborder="0" cellpadding="0" cellspacing="0" bgcolor="#CCCCCC">
                   <tr width="650">
                     <td width="100"><font face="Arial" size="1"> </font></td>
                                         
                     <td align="left" width="550">
                       <font face="Arial" size="3" color="#777777">Project title comes here </font>
                     </td>
                     
                     

                   </tr>
                 </table>
              </td>
            </tr>
           
           
            <tr>
              <td>
                <table height="10" width="650" align="left" border="1" cellborder="0" cellpadding="0" cellspacing="0"><tr><td> </td></tr></table>
              </td>
            </tr>

           
            <tr>
              <td align="left">
                 <table width="650" align="left" border="1" cellborder="0" cellpadding="0" cellspacing="0" bgcolor="#CCCCCC">
                   <tr width="650">
                   
                     <td width="100"><font face="Arial" size="1"> </font></td>
                                         
                     <td align="left" width="550">
                       <font face="Arial" size="3" color="#777777"></font>
                       <img id="thisTable" border="0" src="../images/Art12/Frog2-S.jpg" width="125" height="81">
                     </td>
                     
                     

                   </tr>
                 </table>
              </td>
            </tr>


            <tr>
              <td>
                <table height="10" width="650" align="left" border="1" cellborder="0" cellpadding="0" cellspacing="0"><tr><td> </td></tr></table>
              </td>
            </tr>

   
         
        </table>
       </div>
     
      </td>
      </tr>
     </table>
     </div>

<br>
<br>
<div id="divOther"><font color="FF0000">HereComesAMenu</font></div>

<br>
<br>

<table align="center" width="650"><tr><td align="left"><a style="color: rgb(128,128,0)"><font face="Arial" size="3">
1. Now see what happens if you resize the window!<br><br>

<a STYLE="cursor: hand" style="color: rgb(128,128,0)" href="javascript:rePosition()">
2. Click to reposition to new location after you have resized the window.
</a><br><br>

<a style="color: rgb(128,128,0)">
In Explorer this works fine because I manage to find the new top/left pos of image after
resizing the window. And then I can activate the rePosition function to move the "menu"
to that new location.
</a>
<br><br>

<a style="color: rgb(128,128,0)">
I could not make your example work in Netscape 4.08 and Opera 6.01 using the DIV.<br>
So I got the idea to place an invisible gif image at the position where I want the
menu to be positioned.<br>
I really hope that it's possible to read the top and left pos of an image in NE and Opera
relatively to the page(0,0) pos.<br>
As you can se and probably allready know about is that when the window resizes the position of
the Image changes and so should the position of the menu.<br><br>

To the BIG questions!<br><br>
Q1. Is it possible to read that image (unique in a page) left and top position in NE 4.0 above
and Opera 6.01 and above as with this example that works with IE?<br><br>
Q2. If the above is possible then... Is it possible to detect when/if the user resizes the
window and trigger a function that rePosition() the menu "DIV" to the new location
(still width the cross browser compatibility)?

Looking forward to hear from you again :-)

Erot

</a>


</font></a></td></tr></table>



</body>
</html>

0
Industry Leaders: 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!

 
LVL 12

Expert Comment

by:ahosang
ID: 8124250
This question has been abandoned. I will make a recommendation to the moderators on its resolution in a week or so. I appreciate any comments that would help me to make a recommendation.
 
In the absence of responses, I may recommend DELETE unless it is clear to me that it has value as a PAQ. Silence = you don't care
 
ahosang
0
 
LVL 12

Expert Comment

by:ahosang
ID: 8240066
No comment has been added lately, so it's time to clean up this TA.
I will leave a recommendation in the Cleanup topic area that this question is:

PAQ
Please leave any comments here within the next seven days.
 
PLEASE DO NOT ACCEPT THIS COMMENT AS AN ANSWER!
 
ahosang
EE Cleanup Volunteer
0
 

Accepted Solution

by:
SpideyMod earned 0 total points
ID: 8303746
per recommendation

SpideyMod
Community Support Moderator @Experts Exchange
0

Featured Post

On Demand Webinar - Networking for the Cloud Era

This webinar discusses:
-Common barriers companies experience when moving to the cloud
-How SD-WAN changes the way we look at networks
-Best practices customers should employ moving forward with cloud migration
-What happens behind the scenes of SteelConnect’s one-click button

Question has a verified solution.

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

In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
This article discusses how to implement server side field validation and display customized error messages to the client.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. 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.: (CODE)
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…

705 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