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
244 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
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 
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

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Introduction HTML checkboxes provide the perfect way for a web developer to receive client input when the client's options might be none, one or many.  But the PHP code for processing the checkboxes can be confusing at first.  What if a checkbox is…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
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…

747 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

11 Experts available now in Live!

Get 1:1 Help Now