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..
    Full of Kramy goodness

  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.
    Full of Kramy goodness

  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
    Full of Kramy goodness

  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
    Full of Kramy goodness

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