Question

I need a popup div that will appear right below the anchor that i clicked. Now, I want to determine the x and y coordinates onClick event of an anchor. What’s the best practice of doing it? What are the advisable event properties to use?

Answer 1

offsetX and offsetY are relative to the parent container, whereas pageX and pageY are relative to the document. Don’t confuse this with .offset() and .position(), in which .offset() is relative to the document and .position() is relative to the parent container’s .offset().

Something like this example should work (JQuery):

$('a').click(function(){
    var offset = $(this).offset();
    $('#popup_div').css('top',offset.top + 'px').css('left',offset.left + 'px').show();
});

http://api.jquery.com/offset/

http://api.jquery.com/position/