Skip to content

Instantly share code, notes, and snippets.

@Roach
Created June 14, 2011 01:04
Show Gist options
  • Save Roach/1024119 to your computer and use it in GitHub Desktop.
Save Roach/1024119 to your computer and use it in GitHub Desktop.
offsetLeft test
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>offsetLeft Test</title>
<style type="text/css">
html{margin:0 20px;}
#main{background:#DDD;height:250px;margin:0 auto;width:300px;}
#marker{background:red;height:5px;position:absolute;width:5px;z-index:42000;}
</style>
</head>
<body>
<div id="marker"></div>
<div id="main"></div>
<script>
function findPos(obj) {
var curleft = curtop = 0;
var elem = null;
if (obj.offsetParent) {
do {
curleft += obj.offsetLeft;
curtop += obj.offsetTop;
elem = obj;
}
while (obj = obj.offsetParent);
document.getElementById('marker').style.left = curleft+"px";
document.getElementById('marker').style.top = curtop+"px";
console.log("Left: "+curleft+" - Top: "+curtop)
return [curleft,curtop];
}
}
if(console){console.log(findPos(document.getElementById('main')))};
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment