Relative mouse position if element bigger than screen

Question

How can I get the current mouse position relative to a div element that is bigger than the screen with jQuery?

In my example the user can scroll around on x and y-Axis but if he clicks I want to get the mouse position relative to the divs origin, not just the pageX and pageY.

score 0 · Accepted Answer · answered Feb 08 '15 at 12:35

You can use offset of your big parent element:

var relOffset = $(event.target).offset();
var mousePos = {
    x: event.pageX,
    y: event.pageY
};
var resultPos = {
    x: event.pageX - relOffset.left,
    y: event.pageY - relOffset.top
}

Here is jsfiddle with an example: http://jsfiddle.net/sx8efuyt/

Relative mouse position if element bigger than screen

1 Answers1