SitePoint Sponsor |
|
User Tag List
Results 1 to 10 of 10
Thread: Placing a layer
-
Jul 21, 2003, 05:57 #1
- 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.
PaulPaul Simpson, BSc, MCNI, MCNE
-
Jul 21, 2003, 18:18 #2
- 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>
hope it helps
hope it helpsLiveScript: Putting the "Live" Back into JavaScript
if live output_as_javascript else output_as_html end if
-
Jul 23, 2003, 04:41 #3
- 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
-
Jul 30, 2003, 06:14 #4
- 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.....)
PaulPaul Simpson, BSc, MCNI, MCNE
-
Jul 30, 2003, 11:07 #5
- 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
-
Jul 31, 2003, 06:02 #6
- 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
-
Jul 31, 2003, 06:02 #7
- 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 ?
VinnyWhere the World Once Stood
the blades of grass
cut me still
-
Jul 31, 2003, 07:20 #8
- 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
-
Jul 31, 2003, 09:33 #9
- 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!
something like:
alert(document.all['myDiv'].pixelTop)
see the dHTML scripts/tutorials at my site (GrassBlade).
VinnyWhere the World Once Stood
the blades of grass
cut me still
-
Jul 31, 2003, 09:55 #10
- 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>
Paul Simpson, BSc, MCNI, MCNE
Bookmarks