How Can I Find Mouse Position Inside of a Div Tag?

Discussion in 'Javascript' started by vunet.us@gmail.com, Jan 5, 2007.

  1. Guest

    I have a DIV element. How can I find mouse position (top and left)
    inside of this DIV?

    <div onMouseMove="getPositions();"
    style="width:200px;height:100px"></div>

    function getPositions(ev){
    ????????????????
    }
    , Jan 5, 2007
    #1
    1. Advertising

  2. pcx99 Guest

    wrote:
    > I have a DIV element. How can I find mouse position (top and left)
    > inside of this DIV?
    >
    > <div onMouseMove="getPositions();"
    > style="width:200px;height:100px"></div>
    >
    > function getPositions(ev){
    > ????????????????
    > }
    >


    function getPositions(ev) {
    if (ev == null) { ev = window.event }
    _mouseX = ev.clientX;
    _mouseY = ev.clientY;
    }

    --
    http://www.hunlock.com -- Musings in Javascript, CSS.
    $FA
    pcx99, Jan 5, 2007
    #2
    1. Advertising

  3. wrote:
    > I have a DIV element. How can I find mouse position (top and left)
    > inside of this DIV?


    This is difficult. The event object has clientX and clientY properties
    which describe where the event occurred relative to the browser window
    in pixels. If you then add the amount by which the page has been
    scrolled then you know where the event occurred relative to the web
    page. Now if you can determine the position of the div relative to the
    web page then you will can subtract the position of the div from the
    position of the event and they you have your answer. Determining the
    position of the mouse relative to the page is relatively easy.
    Determining the position of the div relative to the page may be very
    difficult in general but easy in certain cases.

    Peter
    Peter Michaux, Jan 6, 2007
    #3
  4. pcx99 Guest

    Peter Michaux wrote:
    > wrote:
    >> I have a DIV element. How can I find mouse position (top and left)
    >> inside of this DIV?

    >
    > This is difficult. The event object has clientX and clientY properties
    > which describe where the event occurred relative to the browser window
    > in pixels. If you then add the amount by which the page has been
    > scrolled then you know where the event occurred relative to the web
    > page. Now if you can determine the position of the div relative to the
    > web page then you will can subtract the position of the div from the
    > position of the event and they you have your answer. Determining the
    > position of the mouse relative to the page is relatively easy.
    > Determining the position of the div relative to the page may be very
    > difficult in general but easy in certain cases.
    >
    > Peter
    >


    http://www.quirksmode.org/js/findpos.html

    Quirksmode has a function which returns the top and left position of the
    target element, that can be subtracted from the current mouse position
    to obtain relative positions. It's a useful clip, I think the
    javascript faqs have something similar too.

    --
    http://www.hunlock.com -- Musings in Javascript, CSS.
    $FA
    pcx99, Jan 6, 2007
    #4
  5. pcx99 wrote:
    >
    > http://www.quirksmode.org/js/findpos.html
    >
    > Quirksmode has a function which returns the top and left position of the
    > target element, that can be subtracted from the current mouse position
    > to obtain relative positions. It's a useful clip, I think the
    > javascript faqs have something similar too.


    The quirksmode script will only work for very limited set of simple
    pages where there are not scrolled elements and other various trickier
    situations. The Yahoo! UI, ajaxtoolbox, and Flanagan's book have
    better but not generally applicable position reporting functions which
    is a difficult problem in general.

    Peter
    Peter Michaux, Jan 6, 2007
    #5
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. shruds
    Replies:
    1
    Views:
    749
    John C. Bollinger
    Jan 27, 2006
  2. M Wells
    Replies:
    0
    Views:
    130
    M Wells
    Oct 6, 2004
  3. unixfreak compiler

    element position inside scrollable div tag

    unixfreak compiler, Feb 17, 2006, in forum: Javascript
    Replies:
    0
    Views:
    122
    unixfreak compiler
    Feb 17, 2006
  4. James Black
    Replies:
    0
    Views:
    391
    James Black
    May 28, 2006
  5. visu
    Replies:
    4
    Views:
    277
Loading...

Share This Page