Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 15 of 15
  1. #1
    New Coder
    Join Date
    Jul 2002
    Location
    Houston, TX
    Posts
    84
    Thanks
    0
    Thanked 0 Times in 0 Posts

    (javascript & CSS) Getting mouse position to dynamicly position div.

    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:
    Code:
    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

  • #2
    jkd
    jkd is offline
    Senior Coder jkd's Avatar
    Join Date
    May 2002
    Location
    metro DC
    Posts
    3,163
    Thanks
    1
    Thanked 18 Times in 18 Posts
    Try clientX instead of x, and clientY instead of y.

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

  • #3
    New Coder
    Join Date
    Jul 2002
    Location
    Houston, TX
    Posts
    84
    Thanks
    0
    Thanked 0 Times in 0 Posts
    clientX returns undefined. What more code would be helpfull?
    Thanks
    Michael

  • #4
    New Coder
    Join Date
    Jul 2002
    Location
    Houston, TX
    Posts
    84
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #5
    New Coder
    Join Date
    Jul 2002
    Location
    Houston, TX
    Posts
    84
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Originally posted by msimmons
    I need position relative to the screen.
    sorry, i mean window,
    Michael

  • #6
    Senior Coder
    Join Date
    Jun 2002
    Location
    Wichita
    Posts
    3,880
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Try top and left , those should relate to the window.

  • #7
    New Coder
    Join Date
    Jul 2002
    Location
    Houston, TX
    Posts
    84
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I don't understand what you mean. Where would i put top or left?
    Michael

  • #8
    Senior Coder
    Join Date
    Jun 2002
    Location
    Wichita
    Posts
    3,880
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Code:
    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".

  • #9
    New Coder
    Join Date
    Jul 2002
    Location
    Houston, TX
    Posts
    84
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Originally posted by Roy Sinclair
    Code:
    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

  • #10
    New Coder
    Join Date
    Jul 2002
    Location
    Houston, TX
    Posts
    84
    Thanks
    0
    Thanked 0 Times in 0 Posts
    ok, scrap that idea... I can't figure out how to get the parent's x
    Michael

  • #11
    New Coder
    Join Date
    Jul 2002
    Location
    Houston, TX
    Posts
    84
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I have officialy given up on that idea I'll just absolute position the 'pop up' somewhere else.
    Thanks for all the help,
    Michael

  • #12
    New to the CF scene
    Join Date
    Sep 2003
    Location
    belgrade
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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!
    Last edited by EllesDee; 09-30-2003 at 01:07 PM.

  • #13
    New Coder
    Join Date
    Jul 2002
    Location
    Houston, TX
    Posts
    84
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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:

  • #14
    New to the CF scene
    Join Date
    Jul 2006
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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!
    Quote Originally Posted by EllesDee


    // 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;
    }


  • #15
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,521
    Thanks
    3
    Thanked 507 Times in 494 Posts
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •