I am currently working on a code snippet that is supposed to provide the screen coordinates of a given object:
<!DOCTYPE HTML>
<html>
<head>
</head>
<body style="margin:0px;padding:0px;">
<div id="help" style="top:100px;right:100px;height:200px;width:200px;position:fixed;border:1px solid #000"></div>
<div id="what">what</div>
<div style="position:relative;margin-top:10000px;"></div>
<script>
function getoffset(element) {
var xPosition = 0;
var yPosition = 0;
while(element) {
yPosition += (element.offsetLeft - element.scrollLeft + element.clientLeft);
xPosition += (element.offsetTop - element.scrollTop + element.clientTop);
element = element.offsetParent;
}
return [xPosition, yPosition];
}
function cl(){
var help = document.getElementById('help');
var what = document.getElementById('what');
var where = getoffset(what);
help.innerHTML= where;
}
setInterval(function (){cl()},100);
</script>
</body>
The code runs smoothly on IE, Chrome, Opera, and Firefox until I introduce the <!DOCTYPE HTML> directive to enforce proper div positioning in IE. After adding that line, the code starts returning the same values repeatedly (except for Chrome). What could be causing this issue?