SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Thread: Placing a layer

  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,

    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 canbnot 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
    SitePoint Addict langedav's Avatar
    Join Date
    Apr 2002
    Location
    Rotterdam, The Netherlands
    Posts
    207
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Maybe you should try placing the layer tag inside the cell you want it positioned to relative. The tag would be like this:
    <table width="800" border="0" align="center" cellpadding="0" cellspacing="0">
    <tr>
    <td width="200">&nbsp;</td>
    <td height="50">&nbsp;</td>
    <td width="200">&nbsp;</td>
    </tr>
    <tr>
    <td width="200">&nbsp;</td>
    <td><div id="Layer1" style="position:relative; left:0px; top:0px; width:600px; height:160px; z-index:1; background-color: #990066; layer-background-color: #990066; border: 1px solid #FFFF00;"></div></td>
    <td width="200">&nbsp;</td>
    </tr>
    </table>

  3. #3
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Problem: how to place a positioned element relative to some normal html element on the page.

    langedav has presented one solution. Another solution (very similar to langedav's) is what I call the marker technique. This demo will explain the technique. The demo uses a dhtml library, but after you understand the technique you can implement it however you need to.


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
  •