Question

this is my setup

<div id="uxcParent">
 <div id="uxcClickable"></div>
</div>

now when a user clicks in the inner element i want the mouse position with respect to the parent div and not the page.

this what i tried.

 var x= e.pageX- obj.offsetLeft;
 var y= e.pageY- obj.offsetTop;

this works fine only when i don’t scroll the page. I want the function to return the same values no matter where my elements are on the same page.

update:

i think it was not clear enough. am detailing more now..

consider that the elements are in the document in x position with respect to the document. the page has a scroll bar. now i can scroll to any part of the page and the position is still going to be x. but the position with respect to the view port would have changed. so pageX and pageY will give different values. this is my catch.

my elements can be anywhere in the view port and when i go over the inner element i should get co-ordinates with respect to the parent only(should not be influenced by where the parent is)

hope i am clear now.

Answer 1

If scrolling was the only thing messing you up then I would think adding in scrollLeft and scrollTop would fix the problem.