How to position div relative to mouse pointer using jQuery?

Question

Suppose I have one link on my page, and I want that when I put my mouse only on the link, the div will show it according to the mouse x, y.

How can I accomplish this using jQuery?

Answer 1

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 above function will make a DIV throughout the link, wherever it is on the page. It slowly disappears when the link freezes. You can also use .hover (). From there, the div will remain, so if you want the div to disappear when the mouse leaves, then

 $(".classForHoverEffect").mouseout(function(){ $('#DivToShow').fadeOut('slow'); }); 

If you are already positioning a DIV, you can simply use

 $('.classForHoverEffect').hover(function(){ $('#DivToShow').fadeIn('slow'); }); 

Also, remember that your DIV style must be set to display:none; so that it can disappear or appear.

Answer 2

There are many examples of using jQuery to get mouse coordinates, but no one fixed my problem.

The body of my webpage is 1000 pixels wide, and I center it in the middle of the user 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 the div to display at the mouse position.

The problem is that using the e.pageX value was not entirely correct. This will work well if I resize the browser window to a width of about 1000 pixels. Then the pop div will appear in the correct position.

But if you increase the size of my browser window to, say, 1200 pixels wide, the div will appear about 100 pixels to the right of where the user clicked.

The solution is to combine e.pageX with the bounding box of the body element. When a user resizes his browser window, the value of the element on the left of the "body element changes, and we must 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 It took me a while to fix this! Hope this is helpful for other developers!

Answer 3

You do not need to create $(document).mousemove( function(e) {}) to handle the x, y mouse. Get the event in the $.hover function, and from there you can get the x and y positions of the mouse. See 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'); }); 

Answer 4

 <script type="text/javascript" language="JavaScript"> 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 && 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 < 1) { return; } document.getElementById(d).style.display = "none"; } function ShowContent(d) { if (d.length < 1) { return; } var dd = document.getElementById(d); AssignPosition(dd); dd.style.display = "block"; } function ReverseContentDisplay(d) { if (d.length < 1) { return; } var dd = document.getElementById(d); AssignPosition(dd); if (dd.style.display == "none") { dd.style.display = "block"; } else { dd.style.display = "none"; } } //--> </script> <a onmouseover="ShowContent('uniquename3'); return true;" onmouseout="HideContent('uniquename3'); return true;" href="javascript:ShowContent('uniquename3')"> [show on mouseover, hide on mouseout] </a> <div id="uniquename3" style="display:none; position:absolute; border-style: solid; background-color: white; padding: 5px;"> Content goes here. </div>