Simple API Example for dynDiv
This is a very simple Example, its display the current height, width and position of the Div.
Because in this case the Div has an ID we will also display this ID.
Please keep in Mind that dynDiv only started when the document was loaded completely, so don't try to access this variables before the document was loaded.
Its also a good Idea to attach this to an mouse event like MouseRelease because when the User release the Mouse it is sure that he don't resize or move the Div.
Please Move or Resize the DIVs to see the Output here.
API 1 Test
API 2 Test
JavaScript Code
<script type="text/javascript">
function api_test() {
if (ByRei_dynDiv && ByRei_dynDiv.target_div) {
var
id = ByRei_dynDiv.target_div.id,
moving = ByRei_dynDiv.move_selected_div,
resizing = ByRei_dynDiv.resize_selected_div,
width = ByRei_dynDiv.target_div.clientWidth,
height = ByRei_dynDiv.target_div.clientHeight,
top = ByRei_dynDiv.target_div.offsetTop,
left = ByRei_dynDiv.target_div.offsetLeft;
document.getElementById('debug').innerHTML = ''
+ '<br>ID: ' + id
+ '<br>Width: ' + width
+ '<br>Height: ' + height
+ '<br>Top: ' + top
+ '<br>Left: ' + left
+ '<br>Moving: ' + moving
+ '<br>Resizing: ' + resizing
+ '';
}
}
setInterval(api_test,100);
</script>
HTML Code
<link rel="stylesheet" type="text/css" href="byrei-dyndiv_0.5.css">
<script type="text/javascript" src="byrei-dyndiv_0.5.js"></script>
[Custom or additional CSS Code]
<div id="testdiv_1" class="dynDiv_moveDiv">
<p style="padding: 10px;"> API 1 Test </p>
<div class="dynDiv_resizeDiv_tl"></div>
<div class="dynDiv_resizeDiv_tr"></div>
<div class="dynDiv_resizeDiv_bl"></div>
<div class="dynDiv_resizeDiv_br"></div>
</div>
<div id="testdiv_2" class="dynDiv_moveDiv">
<p style="padding: 10px;"> API 2 Test </p>
<div class="dynDiv_resizeDiv_tl"></div>
<div class="dynDiv_resizeDiv_tr"></div>
<div class="dynDiv_resizeDiv_bl"></div>
<div class="dynDiv_resizeDiv_br"></div>
</div>
Additional CSS Code
#testdiv_1, #testdiv_2 {
width: 150px;
height: 150px;
background: #ccc;
border: 1px solid #aaa;
top: 300px;
left: 350px;
position: absolute;
}
#testdiv_2 {
left: 100px;
}