Resizable and moveable div which show resize on request
These are a simple resizable and moveable DIV's which are not restricted to the Browser Window or other Elements.
The resize buttons will be only display on request, so the first DIV will show them when the DIV is active.
The other DIVs will only display them after a double click with the mouse.
Show resize when active...
Double click me !
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_bodyLimit dynDiv_showResize-active">
<p style="padding: 10px;"> Show resize when active... </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_bodyLimit dynDiv_showResize-dblclick">
DoubleClick me !
</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;
}