Movetable and Resizeable Div with minimize and maximize and several Restricted Areas
This is a complex Example, which shows you that you can set several restricted Area and also Div without no Areas.
Please keep in Mind you should understand the other Examples before you try such an example on you own.
Restricted to red
[x]
Restricted to red
Restricted to blue
[x]
Restricted to blue
Restricted to green
[x]
Restricted to green
Not Restricted
[x]
Not Restricted
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 style="width: 300px; height: 300px; border: 2px solid red; float: left;" class="dynDiv_setLimit">
<div id="test1a">
<div class="dynDiv_moveParentDiv"> Restricted to red<div class="dynDiv_minmaxDiv">[x]</div></div>
<div class="dynDiv_resizeDiv_bl"></div>
<div class="dynDiv_resizeDiv_br"></div>
</div>
<div id="test2a" class="dynDiv_moveDiv">
<p style="padding: 10px;"> Restricted to red </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>
<div style="width: 400px; height: 300px; border: 2px solid blue; float: left;" class="dynDiv_setLimit">
<div id="test1b">
<div class="dynDiv_moveParentDiv"> Restricted to blue<div class="dynDiv_minmaxDiv">[x]</div></div>
<div class="dynDiv_resizeDiv_bl"></div>
<div class="dynDiv_resizeDiv_br"></div>
</div>
<div id="test2b" class="dynDiv_moveDiv">
<p style="padding: 10px;"> Restricted to blue </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>
<div style="width: 300px; height: 300px; border: 2px solid green; float: left;" class="dynDiv_setLimit">
<div id="test1c">
<div class="dynDiv_moveParentDiv"> Restricted to green<div class="dynDiv_minmaxDiv">[x]</div></div>
<div class="dynDiv_resizeDiv_bl"></div>
<div class="dynDiv_resizeDiv_br"></div>
</div>
<div id="test2c" class="dynDiv_moveDiv">
<p style="padding: 10px;"> Restricted to green </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>
<div id="test1c">
<div class="dynDiv_moveParentDiv dynDiv_bodyLimit"> Not Restricted<div class="dynDiv_minmaxDiv">[x]</div></div>
<div class="dynDiv_resizeDiv_bl"></div>
<div class="dynDiv_resizeDiv_br"></div>
</div>
<div id="test2c" class="dynDiv_moveDiv dynDiv_bodyLimit">
<p style="padding: 10px;"> Not Restricted </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>
Additonal CSS Code
#test1a, #test1b, #test1c, #test1d {
width: 150px;
height: 150px;
background: #ccc;
border: 1px solid #aaa;
top: 25px;
left: 25px;
position: absolute;
overflow: hidden;
}
.dynDiv_setLimit {
position: relative;
}
#test2a, #test2b, #test2c, #test2d {
width: 150px;
height: 150px;
right: 10px;
top: 120px;
border: 1px solid #aaa;
position: absolute;
overflow: hidden;
text-align: center;
background: #aaa;
filter:alpha(opacity=50);
opacity:0.5;
color: #000;
}