<!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=iso-8859-2" />
<title>clonePosition function test</title>
<script type="text/javascript" language = "javascript" src="js/Prototype_1_7_1.js"></script>
<style type="text/css">
#container{
width: 500px;
height: 600px;
background-color: lightgray;
position: absolute;
top: 30px;
left: 30px;
}
#target_div{
width: 200px;
height: 300px;
margin-top: 20px;
margin-left: 10px;
background-color: green;
}
#display{
position: absolute;
top: 30px;
left: 550px;
width: 300px;
background-color: wheat;
}
#target_display{
border: 1px solid red;
height: 300px;
overflow: auto;
}
h2{
padding: 0;
margin: 3px 10px;
}
*.block{
display: block;
margin: 5px 10px;
}
*.vertical_space{
padding-top: 10px;
}
</style>
<script language="javascript" type="text/javascript">
Event.observe(window, 'load', function(){
var target = $('target_div');
var target_display = $('target_display');
var template = "<span class=\"vertical_space block\">#{key}" + " : #{value}</span>";
var tLayout = new Element.Layout(target,true);
var tObj = tLayout.toObject();
var keys = Object.keys(tObj);
keys.each(function(key){
target_display.innerHTML += template.interpolate({key: key, value: tObj[key]});
});
alert('left : ' + tLayout.get('left') + '\n top: ' + tLayout.get('top'));
});
</script>
</head>
<body>
<div id="container">
<div id="target_div">target_div</div>
</div>
<div id="display">
<div id="target_display"><h2>target data</h2></div>
</div>
</body>
</html>