Layer positioning

[Rik Comery]

Can someone please tell me how i can get this piece of code to work. Basically, i have a table with a <div> in. all i want to know is what the exact left position of the DIV is. As the table is centered, the value will change as the screen is re-sized.

This code always returns a value of 0


<table border="1" width="80%" align="center">
<tr>
<td><div id="menu">test</td></td>
</tr>
</table>

<script>
document.writeln (document.all('menu').style.pixelLeft);
</script>

Any help would be greatly appreciated

[BestZest]

You need to close the DIV tag

<td><div id="menu">test</div></td></td>

Hope this works

BestZest

[Khalid Ali]

pixelLeft works (I think) just like offsetLeft,which gives you the position of the element with relation to the immidiate parent element.
In this case div elements left position is zero with regards to immidiate parent that is a td element.

[v@ng0dl05]

This is my first post in this forum, so I hope I am doing it right.

My problem was related to the one described here.

Like the author of the original post, I have a div within a table. This div doesn't have a style with left and top. This means that it will behave as part of the table. This behavior is what I want to keep.

The div in the table contains an image. This image can be zoomed in to with javascript. Too bad it zooms to the right, so it makes the explorer window bigger than 100%. You have to scroll horizontally.. I don't like this.

So I want to move the div with the image to the left while zooming. To move this div, I believe I have to have the location. Code on a div with undefined left and top simply doesn't work.

I want to share with you that you can define the location of a div in a table by %:
<div id="div1" style="position:relative;left:0%;top:0%;">
relative is necessary if you use it in a table
div1.offsetLeft then gives the value of left for the div. :D

This may be silly or incredibly simply to some of you, but I'm happy now :-) (solved this while writing the question here...)

[Rik Comery]

This is the answer that was eventually given to me. Unfortunatly, I cannot remember the persons name, so cannot give due credit.

Sorry if it looks a bit messy. I just quickly stripped it out of a larger script.

Hope it works for you.

<script>
function getOffset(obj, dim)
{
if(dim=="left")
{
oLeft = obj.offsetLeft;
while(obj.offsetParent!=null)
{
oParent = obj.offsetParent
oLeft += oParent.offsetLeft
obj = oParent
}
return oLeft
}
else if(dim=="top")
{
oTop = obj.offsetTop;
while(obj.offsetParent!=null)
{
oParent = obj.offsetParent
oTop += oParent.offsetTop
obj = oParent
}
return oTop
}
else if(dim=="width")
{
oWidth = obj.offsetWidth
return oWidth
}
else if(dim=="height")
{
oHeight = obj.offsetHeight
return oHeight
}
}
</script>


<table border="0" cellpadding="0" cellspacing="0" width="50%" align="center">
<tr>
<td><div id="divLayer">Test</div></td>
</tr>
<tr>
<td>
<a href="javascript:alert(getOffset(document.all.divLayer,'left'))">Get Left Position</a><br>
<a href="javascript:alert(getOffset(document.all.divLayer,'top'))">Get Top Position</a><br>
<a href="javascript:alert(getOffset(document.all.divLayer,'width'))">Get Layer Width</a><br>
<a href="javascript:alert(getOffset(document.all.divLayer,'height'))">Get Layer Height</a></td>
</tr>
</table>