Question

I need to show a div positioned relative to where the link is that the user clicks.

The link the user clicks is actually generated dynamically as well and looks like so.

<td><a href='' onClick="showDiv(14)">Show the div</a></td> 

(14 is the ID of the record in the row which I will need for the DIV)

Here’s my showDiv() function

function showDiv(id){

// get the mouse coordinates of the link
var mouseX;
var mouseY;

$(document).mousemove( function(e) {
   mouseX = e.pageX; 
   mouseY = e.pageY;
   $('#myDiv').show().css({'top':mouseY,'left':mouseX});
});  
}

This is showing my DIV when executed, but not relative. I feel I am a bit off here, JS is not my strength.

Answer 1

I’ve went ahead and made a jsFiddle with a solution to your problem.

The key is to bind your function to the click handler:

Javascript

$("selector to your element").click(function(e) {
   mouseX = e.pageX;
   mouseY = e.pageY;

  $("#myDiv").show().css({'top':mouseY,'left':mouseX});
});

Also as documented in the fiddle, the div should be hidden with display:none;

I went ahead and extended this a little myself, because perhaps you would like to hide the div by clicking the link again? You can find that in this fiddle.