Question

I have two Divs inside a parent Div ( overflow: auto) the two Divs are big so I get scrolls for the parent, the problem is that I get variable mouse coordinates(onclick Event) for the inside Divs when I scroll up and down (sometimes even minus value) here is how I calculate relative value of mouse

jQuery(document).ready(function(){
$("#MnDiv").click(function(e){
var clientXRel = e.clientX - this.offsetLeft;
var clientYRel = e.clientY - this.offsetTop;
var clientCoords = "( " + e.clientX + ", " + e.clientY + " )";
var clientCoordsRel = "( " + clientXRel  + ", " + clientYRel  + " )";
$("span:first").text("( e.clientX, e.clientY ) : " + clientCoords);
$("span:last").text("( clientXRel  , clientYRel  ) : " + clientCoordsRel
+      " ( offsetLeft  , offsetTop  ) : " + this.offsetLeft+ ", " this.offsetTop); 
});

So the Question is How to get the right coordinates relative to the inside Div no matter where the scroll is?
The complete Example(jsfiddle) Here

Thanks in advance

Answer 1

use the jQuery event varibles .pageX and .pageY and the element offset function .offset().top and .offset().left

so it will look like

var clientXRel = e.pageX- $(this).offset().left;
var clientYRel = e.pageY - $(this).offset().top;

http://jsfiddle.net/PNLU3/3/