How do I position a div relative to the mouse pointer using jQuery

Question

Suppose I have one link in my page and I want that when I place my mouse just over the link  a div will show there according to mouse x y   How can I accomplish this using jQuery

User · Answer

You don not need to create a   document  mousemove  function e      to handle mouse x y  Get the event in the   hover function and from there it is possible to get x and y positions of the mouse  See the code below      foo   hover function e       var pos    e pageX-150 e pageY          foo1   dialog   option    position   pos           foo1   dialog  open      function           foo1   dialog  close

User · Answer

lt script type  text javascript  language  JavaScript  gt     var cX   0    var cY   0    var rX   0    var rY   0     function UpdateCursorPosition e        cX   e pageX      cY   e pageY         function UpdateCursorPositionDocAll e        cX   event clientX      cY   event clientY        if  document all        document onmousemove   UpdateCursorPositionDocAll      else       document onmousemove   UpdateCursorPosition         function AssignPosition d        if  self pageYOffset          rX   self pageXOffset        rY   self pageYOffset        else if  document documentElement  amp  amp  document documentElement scrollTop          rX   document documentElement scrollLeft        rY   document documentElement scrollTop        else if  document body          rX   document body scrollLeft        rY   document body scrollTop            if  document all          cX    rX        cY    rY            d style left    cX   10     px       d style top    cY   10     px          function HideContent d        if  d length  lt  1          return            document getElementById d  style display    none          function ShowContent d        if  d length  lt  1          return            var dd   document getElementById d       AssignPosition dd       dd style display    block          function ReverseContentDisplay d        if  d length  lt  1          return            var dd   document getElementById d       AssignPosition dd       if  dd style display     none           dd style display    block         else         dd style display    none                 -- gt   lt  script gt     lt a onmouseover  ShowContent  uniquename3    return true   onmouseout  HideContent  uniquename3    return true   href  javascript ShowContent  uniquename3    gt   show on mouseover  hide on mouseout   lt  a gt   lt div id  uniquename3  style  display none  position absolute  border-style  solid  background-color  white  padding  5px   gt    Content goes here   lt  div gt

User · Answer

There are plenty of examples of using JQuery to retrieve the mouse coordinates  but none fixed my issue      The Body of my webpage is 1000 pixels wide  and I centre it in the middle of the user s browser window   body       position absolute      width 1000px      left  50       margin-left -500px      Now  in my JavaScript code  when the user right-clicked on my page  I wanted a div to appear at the mouse position   Problem is  just using e pageX value wasn t quite right   It d work fine if I resized my browser window to be about 1000 pixels wide   Then  the pop div would appear at the correct position   But if increased the size of my browser window to  say  1200 pixels wide  then the div would appear about 100 pixels to the right of where the user had clicked   The solution is to combine e pageX with the bounding rectangle of the body element   When the user changes the size of their browser window  the  left  value of body element changes  and we need to take this into account      Temporary variables to hold the mouse x and y position var tempX   0  var tempY   0   jQuery document  ready function            document  mousemove function  e            var bodyOffsets   document body getBoundingClientRect            tempX   e pageX - bodyOffsets left          tempY   e pageY                Phew   That took me a while to fix    I hope this is useful to other developers

User · Answer

var mouseX  var mouseY    document  mousemove  function e       mouseX   e pageX      mouseY   e pageY            classForHoverEffect   mouseover function          DivToShow   css   top  mouseY  left  mouseX   fadeIn  slow          the function above will make the DIV appear over the link wherever that may be on the page  It will fade in slowly when the link is hovered  You could also use  hover   instead  From there the DIV will stay  so if you would like the DIV to disappear when the mouse moves away  then       classForHoverEffect   mouseout function          DivToShow   fadeOut  slow          If you DIV is already positioned  you can simply use      classForHoverEffect   hover function          DivToShow   fadeIn  slow          Also  keep in mind  your DIV style needs to be set to display none  in order for it to fadeIn or show

[jquery] How do I position a div relative to the mouse pointer using jQuery?

Examples related to jquery