title: Mouse coordinates relative to Div inside parent div with scrolls
body: <p>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</p>
  
  <pre><code>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); 
  });
  </code></pre>
  
  <p>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) <a href="http://jsfiddle.net/alamin84/PNLU3/embedded/result/" rel="nofollow">Here</a></p>
  
  <p>Thanks in advance</p>