SitePoint Sponsor

User Tag List

Results 1 to 10 of 10

Thread: Placing a layer

Hybrid View

  1. #1
    SitePoint Addict
    Join Date
    Dec 2001
    Location
    Market Harborough, UK
    Posts
    206
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Placing a layer

    Hi,

    I posted this in the "Using the DOM" sub-forum, but have been unlucky so far, so my apologies for re-posting here.

    How do I work out the coordinates of an item on the screen so that I can place the top-left-hand corner of a layer there?

    I have a cell in a table (which I've given an ID to be able to refer to it). I need a layer to be displayed at the top-left of this cell. Obviously, I cannot predict where the cell will be in absolute x-y terms, so how do I read it's co-ordinates from the DOM?

    All help gratefully appreciated.

    Paul
    Paul Simpson, BSc, MCNI, MCNE

  2. #2
    ♪♪ ♪ ♪ ♪ ♪♪ ♪ ♪♪ Markdidj's Avatar
    Join Date
    Sep 2002
    Location
    Bournemouth, South UK
    Posts
    1,551
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Code:
    <head>
    <style type="text/css">
    #myDiv {position:absolute;left:15px;top:105px;width:100px;height:200px;border:1px outset}
    </style>
    <script>
    function getPosXY(ObjId) {
     Obj = document.getElementById(ObjId)
     ObjTop = Obj.offsetTop;ObjLeft = Obj.offsetLeft;
     while(Obj.offsetParent!=null) { 
      ObjParent = Obj.offsetParent 
      ObjTop += ObjParent.offsetTop
      ObjLeft += ObjParent.offsetLeft
      Obj = ObjParent} 
     alert(ObjTop)
     alert(ObjLeft)
    }
    </script>
    </head>
    <body>
    <div>
    <div style="position:relative;top:100px;left:200px">
    <div id="myDiv" onclick='getPosXY("myDiv")'>Click</div>
    </div></div>
    </body>
    Will work with nested objects
    hope it helps
    hope it helps
    LiveScript: Putting the "Live" Back into JavaScript
    if live output_as_javascript else output_as_html end if

  3. #3
    SitePoint Addict
    Join Date
    Dec 2001
    Location
    Market Harborough, UK
    Posts
    206
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank for that, Mark.

    It works fine, unless the <div id="myDiv"> is held within a cell in a table. Then the co-ords come back as "-1,-1" Doh!

    I've tried giving the <TD> the id and attempting to locate that, but then I get co-ords of (0,0)

    The problem is that the page is formatted using a table and the anchor-point that I'm trying to locate is in one of the cells.....

    Any ideas?

    TIA
    Paul Simpson, BSc, MCNI, MCNE

  4. #4
    SitePoint Addict
    Join Date
    Dec 2001
    Location
    Market Harborough, UK
    Posts
    206
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Can anyone think of a way of doing this? I just need to find the co-ordinates of the top left of a cell in a table (or an object in that cell, if that's easier.....)

    Paul
    Paul Simpson, BSc, MCNI, MCNE

  5. #5
    ♪♪ ♪ ♪ ♪ ♪♪ ♪ ♪♪ Markdidj's Avatar
    Join Date
    Sep 2002
    Location
    Bournemouth, South UK
    Posts
    1,551
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Do you want to put something new into the TD? Or make it appear like it has been added?
    You could use innerHTML to change the contents of the TD or a contained division.
    LiveScript: Putting the "Live" Back into JavaScript
    if live output_as_javascript else output_as_html end if

  6. #6
    SitePoint Addict
    Join Date
    Dec 2001
    Location
    Market Harborough, UK
    Posts
    206
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sort of....

    What I have is a page which looks like a multi-tabbed dailog box. I need, therefore, to have a load of layers to be located on top of each other in the cell. I then use the OnChange method of the tabs (which are <a> links with a graphic as the link) to hide or reveal the appropriate layer. The code is all working, except that the various "pages" appear one below the next.
    Paul Simpson, BSc, MCNI, MCNE

  7. #7
    SitePoint Guru Vincent Puglia's Avatar
    Join Date
    Feb 2000
    Location
    where the World once stood
    Posts
    700
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,
    have you tried using pixelTop/Left ?

    Vinny
    Where the World Once Stood
    the blades of grass
    cut me still

  8. #8
    SitePoint Addict
    Join Date
    Dec 2001
    Location
    Market Harborough, UK
    Posts
    206
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    For which? The TD or the DIV?

    Assuming you mean the DIV, the problem is what value to place there!
    Paul Simpson, BSc, MCNI, MCNE

  9. #9
    SitePoint Guru Vincent Puglia's Avatar
    Join Date
    Feb 2000
    Location
    where the World once stood
    Posts
    700
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul,

    Assuming you mean the DIV, the problem is what value to place there!
    ??? I'm assuming the value is what you want to get.
    something like:
    alert(document.all['myDiv'].pixelTop)
    see the dHTML scripts/tutorials at my site (GrassBlade).

    Vinny
    Where the World Once Stood
    the blades of grass
    cut me still

  10. #10
    SitePoint Addict
    Join Date
    Dec 2001
    Location
    Market Harborough, UK
    Posts
    206
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, I've tried this (using you suggestion)
    Code:
      
    <head>
    </head>
    <body>
    <TABLE>
    <tr><td>line 1 cell 1</td><td>line 1 cell2</td></tr>
    <tr><td>Line 2 cell 1</td><td id="here">Line 2 cell 2</td></tr>
    <tr><td>line 3 cell 1</td><td>line 3 cell2</td></tr>
    </TABLE>
    <script>
    alert(document.all['here'].pixelTop)
    </script></body>
    And the Alert box says "Undefined"......
    Paul Simpson, BSc, MCNI, MCNE


Bookmarks

Posting Permissions

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