Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations TouchToneTommy on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Best way to Implement Relative Positioning for a PopUp Menu? 1

Status
Not open for further replies.
rudy23

rudy23

Programmer
Feb 12, 2004
31
US
Hello everybody,

I am currently implementing a popupmenu for a demo site.

Screenshot
The Problem is that the table cells keep moving along a Horizontal Line and hence the XY co-ordinates of the Popup must change accordingly. I can pass the X and Y co-ordinates to the PopUp Menu. How can I calculate position of say the <td> so that I can calculate the co-ordinates for the popup. I am not too well versed in Javascript so I want to know what is the Best approach of implementing this. I wouldnt mind placing an invisble gif in the <td> to get accurate positioning. What I dont want to do is position relative to link as then it will be difficult to get the pop up aligned below the Cell each time.

Any help greatly appreciated.
 
Sort by date Sort by votes
Sorry, I didn't check your page because I'm lazy (excuse is headache) but hopefully this helps..

If you get the position of the cell, add the height = accurately possitioned :)

If I remember rightly, the position of myCell on the page can be found using:

Code: 
var cNode = document.getElementById('myCell');
var x = 0;
var y = cNode.offsetHeight;

while (cNode.tagName!='BODY'){
x += cNode.left;
y += cNode.top;
cNode = cNode.offsetParent;
}

The absolute position of the popup would then be

..style.top=y;
..style.left=x;

----------
I'm willing to trade custom scripts for... [see profile]
 
Upvote 0 Downvote
forgive my ignorance but I didnt understand this part.
Code: 
..style.top=y;
..style.left=x;

If I just give alerts for x and y its says NaN (Not a number)

How do I get the actual co-ordinates for the cell?

My testpage Layout
Code: 
<BODY>
<TABLE border=1>
<TR>
	<TD>Cell One</TD>
	<TD id="myCell">Cell Two</TD>
</TR>
</TABLE>
<script language="javascript">
var cNode = document.getElementById('myCell');
var x = 0;
var y = cNode.offsetHeight;

while (cNode.tagName!='BODY'){
x += cNode.left;
y += cNode.top;
cNode = cNode.offsetParent;
}

alert("x="+x);
alert("y="+y);
</script>
</BODY>

My actual Mouseover Script for PopUp
Code: 
onmouseover="CMenuPopUpXY('clientaccounts', X, Y)"
Where X= X co-ordinate
Y = Y co-ordinate


Thanks
 
Upvote 0 Downvote
Re: NaN. I think I made an error and the following is better... *oops*

Incase I'm still wrong, see the msdn on positioning:
Code: 
var cNode = document.getElementById('myCell');
var x = 0;
var y = cNode.height;

while (cNode.tagName!='BODY'){
x += cNode.offsetLeft;
y += cNode.offsetHeight;
cNode = cNode.offsetParent;
}

---


By ..style.left=x; I meant document.getElementById('myObject').style.left=x;


----------
I'm willing to trade custom scripts for... [see profile]
 
Upvote 0 Downvote
The Y coordinate has too high a value to be real. If I set y=0 then it doesnt pick the value dynamycally even if I change the position of the Cell. Also IE and Netscape return different values for the same cell. Thats weird.

Looks kinda tough to adapt this to my script. Any other ideas?
 
Upvote 0 Downvote
Code: 
var cNode = document.getElementById('myCell');
var x = 0;
var y = cNode.offsetHeight;

while (cNode.offsetParent) {
   x += cNode.offsetLeft;
   y += cNode.offsetTop;
   cNode = cNode.offsetParent;
}

You almost had it :)
Add the offsetTop during each loop (the distance between the object and it's parent) instead of the offsetHeight. Also... you begin by setting y = cNode.offsetHeight. I assume this means you want to calculate the y coordinate of the bottom of the td. If you want the y coordinate of the top of the td, begin with y = 0.
 
Upvote 0 Downvote
Yup thats working as expected except for one thing which could render the whole exercise futile. . The X and Y co-ordinates for both IE and Netscape are different.
Any Solution?
 
Upvote 0 Downvote
Humn, maybe the borders are messing it up. There seems to be some issues with the BODY tag :/

<style>
BODY {
border:none;
margin:0px;
padding:0px;
}
</style>

As long as the values are syncronised NS/IE shouldn't disagree. There shouldn't be a problem in the first place... so... humn...

Maybe there is a discrepency with the rendering elsewhere in the page? Try adding a <!DOCTYPE declaration and see if that helps.

----------
I'm willing to trade custom scripts for... [see profile]
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

trevil620
  • Locked
  • Question
SoThink DHTML Menu Conversion
Replies
0
Views
809
trevil620
trevil620
Rayj0000
  • Locked
  • Question
How to disable an html button for subsequent website visitors?
Replies
0
Views
708
Rayj0000
Rayj0000
Kennelbloke
  • Locked
  • Question
Can't Get Markers to show on Map
Replies
0
Views
1K
Kennelbloke
Kennelbloke
Mike Lewis
  • Locked
  • Question
Anyone here got any experience of Grid.JS (a sortable Javascript grid) 1
Replies
5
Views
2K
Mike Lewis
Mike Lewis
lexer
  • Locked
  • Question
Passing fields from (html-JavaScript) table to JavaScript Function
Replies
0
Views
833
lexer
lexer

Part and Inventory Search

Sponsor

Back
Top