I've been working for hours on this and I can't figure it out.
I've got a setup that pulls some coordinate data into javascript and parses it into an interactive map (using canvas {and excanvas for IE6 users}) on the browser for the user. Everything is working fine except for one problem: when hovering on the map after scrolling down the page, the hover is off by the amount scrolled.
This is the code as-is:
function getOffset(evt) {
var obj = document.getElementById("myCanvas");
setPageTopLeft(document.getElementById("myCanvas"));
return [(evt.clientX - obj.pageLeft), (evt.clientY - obj.pageTop)];
}
function setPageTopLeft(o) {
var top = 0, left = 0, obj = o;
alert('scrollTop w/ getElementById: ' + document.getElementById("myCanvas").scrollTop + ' scrollTop w/ .body.:' + document.body.scrollTop + ' window.pageYOffset: ' + window.pageYOffset);
top = document.getElementById("myCanvas").scrollTop;
left = document.getElementById("myCanvas").scrollLeft;
while (o.offsetParent) {
left += o.offsetLeft;
top += o.offsetTop;
o = o.offsetParent;
};
obj.pageTop = top;
obj.pageLeft = left;
}
Using doctype: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
The alert() is the tests I've run trying to get it to work. I know that firefox works with window.pageYOffset, but I need something that works with IE6 + IE7 + IE8.