Resizable and moveable div which try to keep the aspect ratio.
These are a simple resizable and moveable DIV's which try to keep the aspect ratio.
The aspect ratio will be calculated when the page was loading complete.
You can also change this value over the API and the small DB System.
Please keep in mind this is a beta feature so it could be that you will notice some failures when you use it which restricted areas.
This is a Test Div with ByRei DynDiv, resize it ;)
Move Div here !
HTML Code
<link rel="stylesheet" type="text/css" href="byrei-dyndiv_0.5.css">
<script type="text/javascript" src="byrei-dyndiv_1.0rc1.js"></script>
[Custom or additional CSS Code]
<div id="testdiv_1" class="dynDiv_moveDiv dynDiv_keepAspect">
<p style="padding: 10px;">This is a Test Div with ByRei DynDiv, resize it ;)</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">
<img src="../example.jpg" width="100%" height="100%" alt="">
<div id="testdiv_2_move" class="dynDiv_moveParentDiv dynDiv_keepAspect">Move Div here !</div>
<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 {
width: 150px;
height: 150px;
background: #ccc;
border: 1px solid #aaa;
top: 300px;
left: 350px;
position: absolute;
}
#testdiv_2 {
width: 295px;
height: 394px;
right: 10px;
top: 160px;
border: 1px solid #aaa;
position: absolute;
}
#testdiv_2_move {
text-align: center;
filter:alpha(opacity=50);
opacity:0.5;
color: #fff;
}