...

View Full Version : (javascript & CSS) Getting mouse position to dynamicly position div.



msimmons
07-26-2002, 06:29 PM
I am 'poping up' a div (by manipulating the display style) when a user mouses down on an image. The images are moble (on a scrolling form) so I cannot know the position at design time. I can get the mouse x & y but they don't make sense to me as I need pixel values.
here is what I am doing now:


document.getElementById('roomratedetails').style.display = 'block';
document.getElementById('roomratedetails').style.top = event.x;
document.getElementById('roomratedetails').style.right = event.y;

Any suggestions?

Thanks in advance,
Michael

jkd
07-26-2002, 07:17 PM
Try clientX instead of x, and clientY instead of y.

Without seeing some more code, that's all I can suggest.

msimmons
07-26-2002, 08:11 PM
clientX returns undefined. What more code would be helpfull?
Thanks
Michael

msimmons
07-26-2002, 08:20 PM
I think I found out why it is giving odd results. The image with the event is in a span posisioned relatively. It seems to be giving the position relative to the parent... I need position relative to the screen.
Michael

msimmons
07-26-2002, 08:24 PM
Originally posted by msimmons
I need position relative to the screen.


sorry, i mean window,
Michael

Roy Sinclair
07-26-2002, 08:44 PM
Try top and left , those should relate to the window.

msimmons
07-26-2002, 08:46 PM
I don't understand what you mean. Where would i put top or left?
Michael

Roy Sinclair
07-26-2002, 08:49 PM
document.getElementById('roomratedetails').style.top = event.x;
document.getElementById('roomratedetails').style.left = event.y;


Your code in your original message showed it using "right" instead of "left".

msimmons
07-26-2002, 08:56 PM
Originally posted by Roy Sinclair


document.getElementById('roomratedetails').style.top = event.x;
document.getElementById('roomratedetails').style.left = event.y;


Your code in your original message showed it using "right" instead of "left".

I see what you mean but those are referring to the window I am 'poping up' I need it to the parent window. So the value of "event.x" (and y) is the point of concern. All my research is showing that in IE you can only get the distance from the next up parent container... which is about 5 pixels away in my case but 80px down the screen (at load time)... since the parent moves throughout the session I cant hard code that...
I think I just figured it out.
I can probably get the x of my target PLUS the x of its parent PLUS the x of its parent etc. I'll let you know :)
Michael

msimmons
07-26-2002, 08:58 PM
ok, scrap that idea... I can't figure out how to get the parent's x
Michael

msimmons
07-26-2002, 09:24 PM
I have officialy given up on that idea :) I'll just absolute position the 'pop up' somewhere else.
Thanks for all the help,
Michael

EllesDee
09-30-2003, 02:05 PM
2 things:

1. sorry for the extremely late answer
2. you have to get the absolute position of the element, meaning what you said, find out co-ordinates of the addressing element, of it's parent .. etc till you eventualy get the co-ordinates of the addressing element within body.

here's the code:


// Calculates the object's absolute position, and width and height
function GetAbsPosition(object) {
var position = new Object;
position.x = 0;
position.y = 0;

if( object ) {
position.x = object.offsetLeft;
position.y = object.offsetTop;

if( object.offsetParent ) {
var parentpos = GetAbsPosition(object.offsetParent);
position.x += parentpos.x;
position.y += parentpos.y;
}
}

position.cx = object.offsetWidth;
position.cy = object.offsetHeight;

return position;
}


this code also calculates the width and the height of the addressing element ...

have fun!

msimmons
09-30-2003, 04:19 PM
Originally posted by EllesDee
1. sorry for the extremely late answer

I don't remember what project this went to ;) I will make note of it in the future though :) thanks :thumb:

topcoder1
07-30-2006, 12:53 PM
I know it's been 3 to 4 years since the last post, but the old problem is a die hard.
I want to get my mouse position within a div, consistently across all browsers.
when my mouse moves in the div component, I display (evt.pageX, evt.pageY), this is the mouse position within the page, however, they differ on IE and firefox. So I tried
(evt.pageX-getAbsPosition(divcomp).x, evt.pageY-getAbsPosition(divcomp).y). It's getting much better, but in IE getAbsPosition(divcomp) is still different by 2pixels from firefox.
I just need a consistent way of getting the mouse position within some component. The key here is consistency. any idea what's wrong here?
thanks!




// Calculates the object's absolute position, and width and height
function GetAbsPosition(object) {
var position = new Object;
position.x = 0;
position.y = 0;

if( object ) {
position.x = object.offsetLeft;
position.y = object.offsetTop;

if( object.offsetParent ) {
var parentpos = GetAbsPosition(object.offsetParent);
position.x += parentpos.x;
position.y += parentpos.y;
}
}

position.cx = object.offsetWidth;
position.cy = object.offsetHeight;

return position;
}

vwphillips
07-30-2006, 01:13 PM
this may help

http://www.webdeveloper.com/forum/showthread.php?t=115590



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum