SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    SitePoint Zealot
    Join Date
    Feb 2002
    Posts
    127
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to set position of layer relative to a table cell??

    Hi All

    I am trying to make a layer that mimics a particular cell in a table (please dont ask me why, its complicated). I have created the layer so that its dimensions exactly match the table cell in question. Now I want to create a function that sets the top and left position of the layer to exactly match the top and left position of the cell in question. I have already had a try myself, but for the life of me can't quite figure it out.

    I tried giving the cell in question and 'id' tag (id="centerCol") and then referencing the left and top values of the object. See the following code:

    PHP Code:
    document.getElementById('layerHeader').style.left document.getElementById('centerCol').style.left
    Any suggestions on what I am doing wrong?

    Thanks in advance, ben
    Experience is that thing which lets you know you've made the same mistake yet again.

  2. #2
    ♪♪ ♪ ♪ ♪ ♪♪ ♪ ♪♪ Markdidj's Avatar
    Join Date
    Sep 2002
    Location
    Bournemouth, South UK
    Posts
    1,551
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    can u not use same variable

    you use a variable to place the first? can't you use that?
    LiveScript: Putting the "Live" Back into JavaScript
    if live output_as_javascript else output_as_html end if

  3. #3
    SitePoint Guru dale_burrell's Avatar
    Join Date
    Aug 2002
    Location
    Wellington, New Zealand
    Posts
    861
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Have you set the position attribute? I'm not sure that the positioning stuff will work without it.

    You may need to create a <div> tag inside the table cell as I think table cells might have slightly different behaviour.

    I have managed to overlay 2 different layers within a cell using <div> tags.

    I assume you're using absolute positioning from the edge of the window? I remember having a lot of difficulties with that, in the end I made a <div> tag with absolute positioning then created a new layer using relative positioning.

  4. #4
    SitePoint Zealot
    Join Date
    Feb 2002
    Posts
    127
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Dale

    I don't quite follow what you mean. Set the position attribute of what? Could you possibly give me some more details? A simple example might make things a little clearer.

    Thanks, Ben
    Experience is that thing which lets you know you've made the same mistake yet again.

  5. #5
    SitePoint Zealot tss68nl's Avatar
    Join Date
    Nov 2002
    Location
    Netherlands
    Posts
    165
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    To find the position of the table cell relative to the page itself, you will have to go up through the document structure looking for offset parents.

    The left property of the TD is probably 0, as it is positioned inside the table you are using.

    [VBS]
    function element_left(e)
    {
    var eo = 0
    while (e)
    {
    if (e.tagName != "TABLE")
    eo += e.offsetLeft
    if (e.tagName == "BODY" && lastElement == "TABLE")
    eo += lastOffset
    lastElement = e.tagName
    lastOffset = e.offsetLeft

    e = e.offsetParent
    }
    return eo
    }

    [/VBS]

    Something like that might work for you, it looks for the offsetParents of the object until it runs out of them. It's probably wise to let it calculate the left and top at the same time, and return an [x,y] array of the valuas, as searching through the objects is sometimes quite slow.

    Another way is to create the object inside the TD, use relative positioning, and set it to 0. If that is possible in your situation, go for that, as that is the fastest and most flexible way.

  6. #6
    SitePoint Guru dale_burrell's Avatar
    Join Date
    Aug 2002
    Location
    Wellington, New Zealand
    Posts
    861
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here is the HTML that I used to position text over an image in a table cell. I've never scripted it to know if its done the same though.

    <html>
    <head>
    <style>
    #outer {position:relative; border-width:0px; margin:0px; padding:0px; background-color:#990000; z-index:2}
    #inner {position:absolute; border-width:0px; margin:0px; padding:0px; width:360px; height:200px; top:0px; left:0px; z-index:1}
    </style>
    </head>
    <body>
    <table border="0" cellpadding="0" cellspacing="0" style="width:778px; height:520px">
    <tr>
    <td style="width:360px; height:200px"><div id="outer"><div id="inner"><a href="crystal/ccfram.html" style="text-decoration: none"><p class=crystaltitle>Crystal Clear Coaching</p><p>&nbsp;</p><p class=crystalpara>Life Coaching: Have the life you dream of now by using a coach to go beyond personal limitations</p></a></div><a href="crystal/ccfram.html"><img src="2001-2.jpg" width="360" height="200" style="border-width:0px" alt=""></a></div></td>
    <td><p>&nbsp;</p></td>
    </tr>
    </table>
    </body>
    </html>
    If you aren't living life on the edge
    - you're taking up too much space
    Creative Dreaming Ltd / Ask The Local / Amanzi Travel

  7. #7
    SitePoint Zealot tss68nl's Avatar
    Join Date
    Nov 2002
    Location
    Netherlands
    Posts
    165
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That doesn't make sense at all.

    The table is totally useless, and the z-index settings are totally useless as they are created inside of eachother, not beside eachother.

  8. #8
    SitePoint Guru dale_burrell's Avatar
    Join Date
    Aug 2002
    Location
    Wellington, New Zealand
    Posts
    861
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you for your kind comments - as it works, and quite well at that, I guess that says something about your ability to understand it.
    If you aren't living life on the edge
    - you're taking up too much space
    Creative Dreaming Ltd / Ask The Local / Amanzi Travel

  9. #9
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by dale_burrell
    Here is the HTML that I used to position text over an image in a table cell. I've never scripted it to know if its done the same though.
    Why not just use a background-image? What am I missing?
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev




  10. #10
    SitePoint Guru dale_burrell's Avatar
    Join Date
    Aug 2002
    Location
    Wellington, New Zealand
    Posts
    861
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I can't remember why - but believe me it didn't work.

    I spent hours and hours to some to this solution - which was the only one I could come up with which worked on IE & NS.

    What the actual problem was has long since been lost in the archives of time.

    Anyway the point, was not what my code does, but an illustration of what was required to get my layer stuff working - which may or may not be of use to the " ben_m_gunn"
    If you aren't living life on the edge
    - you're taking up too much space
    Creative Dreaming Ltd / Ask The Local / Amanzi Travel

  11. #11
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Easiest way that I can think of is
    Code:
    <html>
    <head>
    <style>
    div#myContainer {
    	position: relative;
    	}
    div#myLayer {
    	position: absolute;
    	top: 0px;
    	left: 0px;
    	width: 100%;
    	text-align: right;
    	}
    table#myTable {
    	border-collapse: collapse;
    	}
    table#myTable td {
    	width: 300px;
    	border:1px solid black;
    	}
    </style>
    </head>
    <body>
    <table id="myTable">
    	<tr>
    		<td>Hello</td>
    		<td>
    			<div id="myContainer">
    				This<br>
    				is<br>
    				some<br>
    				text
    				<div id="myLayer">
    					This<br>
    					is<br>
    					some<br>
    					text
    				</div>
    			</div>
    		</td>
    		<td>Hello</td>
    	<tr>
    </table>
    </body>
    </html>
    Which is pretty much the same as your's dale, but a bit less convoluted
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev




  12. #12
    SitePoint Zealot
    Join Date
    Feb 2002
    Posts
    127
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thats guys, that does help.

    One other quick question though. If I want to maker the layer floating (i.e. a chaser layer), is there a way to place the layer outside of the cell (read "not nested") so that the left position on the layer is always aligned with the left position of a particular table cell. I am trying to find a method that enables me to fix the x-coordinate (left position) to another object, but at the same time be free to manipulate the y-coordinate (top position).

    Ben
    Experience is that thing which lets you know you've made the same mistake yet again.

  13. #13
    SitePoint Zealot tss68nl's Avatar
    Join Date
    Nov 2002
    Location
    Netherlands
    Posts
    165
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by dale_burrell
    Thank you for your kind comments - as it works, and quite well at that, I guess that says something about your ability to understand it.
    I understand it quite well, all I said is that these elements are obsolete. Cut them out and it still works.
    I never said it didn't work, I just said it didn't make sense to put all these elements in, as it will only produce bloated code.

    As for the second question:
    If you have positioned your element over another, just adjust it's top property to move it in a vertical direction. This will leave your DIV attached though....so if you reposition the object it is positioned to, it will copy dx -and- dy to itself in most cases.

    If you positioned against the browser window, it will not move at all when you move the object you positioned it to. Then you will have to write a function which sets the new value every time something changes.
    Last edited by tss68nl; Nov 28, 2002 at 19:36.

  14. #14
    SitePoint Guru dale_burrell's Avatar
    Join Date
    Aug 2002
    Location
    Wellington, New Zealand
    Posts
    861
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Arr, but I guess what you didn't take into account is that

    1) It is only a snippet of code, not the entire code.
    2) You don't know what I was trying to do (nor do I anymore, but I know it solved the problem I was trying to solve)

    But that aside you could try being polite in your posts.
    If you aren't living life on the edge
    - you're taking up too much space
    Creative Dreaming Ltd / Ask The Local / Amanzi Travel


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
  •