CODEWITHSUNDEEP
javascript
Karina
Karina

Reputation: 998

What is the difference between offsetX,offsetY and pageX,pageY?

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?

Upvotes: 25

Views: 50154

Answers (2)

Praveen Prasad
Praveen Prasad

Reputation: 32117

2 extracts from Jquery Documentation website

The .position() method allows us to retrieve the current position of an element relative to the offset parent

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

The .offset() method allows us to retrieve the current position of an element relative to the document.

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

Upvotes: 2

SeanCannon
SeanCannon

Reputation: 78006

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/

Upvotes: 41

Related Questions