www.webdeveloper.com
Results 1 to 6 of 6

Thread: Locating the exact pixel location of a table data

  1. #1
    Join Date
    Apr 2004
    Location
    Australia
    Posts
    20

    Locating the exact pixel location of a table data

    I need to know how to get the exact location of a table data cell on my web page. I have looked at the tutorial on it on this web site, but do not know how to apply it to my web page.

    Problem: my web page is created using ALOT of <!--#includes file="blah.asp"--> so the actual creation and hierarchy of the page is quite messy.

    I cannot post the code due to the fact that the site is on an intranet. And contains sensitive data.

    I really appreciate your help..

  2. #2
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    offsetLeft and offsetTop are the attributes, but take care that they are relative if object is nested (as in your case a cell in a table). So, the absolute position is got by adding the offset postion both the parent and the nested element.

    PHP Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <
    html>
    <
    head>
    <
    script>
    function 
    getP(){
    xpos document.getElementById('tab').offsetLeft+document.getElementById('cell').offsetLeft;
    ypos document.getElementById('tab').offsetTop+document.getElementById('cell').offsetTop;
    alert('The cell has the coordinates X='+xpos+' Y='+ypos)
    }
    </script>
    </head>

    <body>
    <table id="tab" width="200" border="0" align="center" cellpadding="0" cellspacing="0">
      <tr>
        <td>1</td>
        <td bgcolor="#CCCCCC" id="cell">2</td>
      </tr>
      <tr>
        <td>3</td>
        <td>4</td>
      </tr>
    </table>

    <br>
    <br>
    <a href="#" onclick="getP()">get the gray cell's position</a> 
    </body>
    </html> 

  3. #3
    Join Date
    Apr 2004
    Location
    Australia
    Posts
    20
    Ok, firstly thanks, howver, I do still have 1 problem left.

    The html code that I am creating is done via VBscript. The vbscript creates a file which contains the html that i need this bit of help with.

    The problem is that the VBscript write the html to the file like this:

    Code:
    ...
    file.WriteLine ""<div id="""aaa""">stuff</div>""
    ...
    The issue here is that i need for the div statement to use the javascript variables that the funciton you provided gets. But whenever I try to put them in the come out not as variables but rather just as i have written them:
    Ie.
    I would like it be be like this:
    Code:
    file.WriteLine "<div id="aaa" style=""left:VARIABLE"">stuff</div>"
    and it will use the javascript variable as the coordinate. But what it is doing is just hard coding the word VARIABLE to the div, thinking that its not a variable.

  4. #4
    Join Date
    Apr 2004
    Location
    Australia
    Posts
    20
    Ok, more to the point of what I am trying to do, here is the code which Kor gave me, but has been modified.

    I want the lightblue div, to show the the bottom of the grey cell.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <script>
    function getP(){
    xpos = document.getElementById('tab').offsetLeft+document.getElementById('cell').offsetLeft;
    ypos = document.getElementById('tab').offsetTop+document.getElementById('cell').offsetTop;
    alert('The cell has the coordinates X='+xpos+' Y='+ypos);
    return xpos;
    }
    
    function getDiv(){
    xpos = document.getElementById('div2').offsetLeft+document.getElementById('table2').offsetLeft+document.getElementById('cell2').offsetLeft;
    ypos = document.getElementById('div2').offsetTop+document.getElementById('table2').offsetTop+document.getElementById('cell2').offsetTop;
    alert('The cell has the coordinates X='+xpos+' Y='+ypos);
    return xpos;
    }
    </script>
    </head>
    
    <body>
    <table id="tab" border="1" width="100" cellpadding="0" cellspacing="0">
      <tr>
        <td>1</td>
        <td bgcolor="#CCCCCC" id="cell">2</td>
      </tr>
    </table>
    
    
    <div id="div2" style="position:absolute; left:getP(); top:79px; width:135px; height:45px; z-index:2;">
    <table id="table2">
      <tr>
        <td bgcolor="lightblue" id="cell2">here i am</td>
      </tr>
    </table>
    </div>
    
    <br>
    <br>
    <a href="#" onclick="getP()">get position</a>
    <a href="#" onclick="getDiv()">get position</a>
    </body>
    </html>
    But it not working

    Thanks in advance

  5. #5
    Join Date
    Dec 2002
    Location
    Pleasanton, CA
    Posts
    2,132
    I think this is what you want..
    You will need to add the height of the 'cell' to ypos.

    left:getP(); in your div2 style should be some fixed value

    PHP Code:
    function getP(){
    xpos document.getElementById('tab').offsetLeft+document.getElementById('cell').offsetLeft;
    ypos document.getElementById('tab').offsetTop+document.getElementById('cell').offsetTop;
    alert('The cell has the coordinates X='+xpos+' Y='+ypos);
    document.getElementById('div2').style.top ypos;
    document.getElementById('div2').style.left xpos;


  6. #6
    Join Date
    Apr 2004
    Location
    Australia
    Posts
    20
    You are beautiful!!!

    You dont know how much that helps me

    Thank You

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles