Resizable and moveable div, you can move the div overall or over an special area
This Example show 2 moveable and resizable Divs, but the Div with the Background Image is not restricted.
The other smaller Div is restricted to a area in this case the first Div, but you can use every parent div in you webpage for this.
Move Div here !
This is a Test Div with ByRei DynDiv which is limited to the Image, resize it ;)
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_2" class="dynDiv_setLimit">
<img src="../example.jpg" width="100%" height="100%" alt="">
<div id="testdiv_2_move" class="dynDiv_moveParentDiv"> 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 id="testdiv_1" class="dynDiv_moveDiv">
<p style="padding: 10px;"> This is a Test Div with ByRei DynDiv which is limited to the Image, resize it ;) </>
<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>
Additonal CSS Code
#testdiv_1 {
width: 150px;
height: 150px;
background: #ccc;
border: 1px solid #aaa;
top: 25px;
left: 25px;
position: absolute;
overflow: hidden;
}
#testdiv_2 {
width: 295px;
height: 394px;
right: 10px;
top: 160px;
border: 1px solid #aaa;
position: absolute;
overflow: hidden;
}
#testdiv_2_move {
text-align: center;
filter:alpha(opacity=50);
opacity:0.5;
color: #fff;
}