Placing a layer

**pauls** · Jul 21, 2003, 05:57

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

**Markdidj** · Jul 21, 2003, 18:18

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

**pauls** · Jul 23, 2003, 04:41

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

**pauls** · Jul 30, 2003, 06:14

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

**Markdidj** · Jul 30, 2003, 11:07

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.

**pauls** · Jul 31, 2003, 06:02

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.

**Vincent Puglia** · Jul 31, 2003, 06:02

Hi,
have you tried using pixelTop/Left ?

Vinny

**pauls** · Jul 31, 2003, 07:20

For which? The TD or the DIV?

Assuming you mean the DIV, the problem is what value to place there!

**Vincent Puglia** · Jul 31, 2003, 09:33

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

**pauls** · Jul 31, 2003, 09:55

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"......

The SitePoint Forums have moved.

User Tag List

Thread: Placing a layer

Thread Tools

Display

Placing a layer

Bookmarks

Bookmarks

Posting Permissions