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
247 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
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
Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
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

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying 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
Placeholder text not disappearing in Contact Form 7 2 23
Else condition 9 23
jQuery Scroll To Top 5 38
JQuery Syntax... 4 36
I've been trying to accomplish this for a while and it just struck me yesterday how to accomplish this task. I have done searches all over the internet looking for ways to email pages from my applications and finally I have done it!!! Every single s…
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
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…

839 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