Example how you can integrate an OS like dynamic Div which is re sizable, movable and minimize and maximize.
This is a complex example and could have some bugs, but it looks very cool and worked very good ;)
Please don't copy the images and create your own OS like images. ;)
Notice:
The CSS is keep to be simple so there is a lot to that can be optimized.
The Example can be also be optimize to used class instead of different id in the CSS Style.
Text-Window
This is a Test Div with ByRei DynDiv, resize or move it ;)
Its look like an OS Window cool or ? ;)
When you used it or like it, please give me a credit at you web page.
Image-Window nice ;)
HTML Code
<script type="text/javascript" src="byrei-dyndiv_0.8.js"></script>
[Custom CSS Code]
<div id="testdiv_1">
<div id="testdiv1_minmax" class="dynDiv_minmaxDiv dynDiv_minmax_Height-33" style="z-index: 10;"></div>
<div id="testdiv_move" class="dynDiv_moveParentDiv dynDiv_bodyLimit">Text-Window<div id="testdiv_move_l"></div><div id="testdiv_move_r"></div></div>
<div id="testdiv_win">
<div id="testdiv_cont">
<p style="padding: 5px;">
This is a Test Div with ByRei DynDiv, resize or move it ;)<br>
Its look like an OS Window cool or ? ;)<br>
When you used it or like it, please give me a credit at you web page.<br>
</p>
</div>
</div>
<div id="testdiv_resize" class="dynDiv_resizeDiv_br"></div>
</div>
<div id="testdiv_2">
<div id="testdiv2_minmax" class="dynDiv_minmaxDiv dynDiv_minmax_Height-33" style="z-index: 10;"></div>
<div id="testdiv2_move" class="dynDiv_moveParentDiv dynDiv_bodyLimit"> Image-Window nice ;)<div id="testdiv2_move_l"></div><div id="testdiv2_move_r"></div></div>
<div id="testdiv2_win">
<div id="testdiv2_cont">
<img src="../example.jpg" width="100%" height="100%" alt="">
</div>
</div>
<div id="testdiv2_resize" class="dynDiv_resizeDiv_br"></div>
</div>
Custom CSS Code
#testdiv_1 {
width: 150px;
height: 150px;
top: 300px;
left: 350px;
position: absolute;
padding-right: 10px;
}
#testdiv_2 {
width: 295px;
height: 394px;
right: 10px;
top: 160px;
position: absolute;
padding-right: 10px;
}
#testdiv_resize, #testdiv2_resize {
width: 12px;
height: 12px;
border: 0;
bottom: -33px;
right: 7px;
background: url('resize.png') no-repeat;
position: absolute;
}
* html #testdiv_resize, * html #testdiv2_resize {
/* \*/
bottom: -2px;
right: 14px;
/* */
}
#testdiv_move, #testdiv2_move {
height: 30px;
width: 100%;
background: url(titel_middle.png);
position: relative;
margin: auto;
margin-left: 3px;
text-align: center;
line-height: 30px;
color: #fff;
border: 0;
top: 0;
left: 0;
}
#testdiv_move_l, #testdiv2_move_l {
background: url(titel_left.png) no-repeat;
left: -3px;
top: 0;
position: absolute;
width: 30px;
height: 30px;
cursor:default;
}
#testdiv_move_r, #testdiv2_move_r {
background: url(titel_right.png) no-repeat;
right: -3px;
top: 0;
position: absolute;
width: 30px;
height: 30px;
cursor:default;
}
* html #testdiv_move_r, * html #testdiv2_move_r {
/* \*/
right: -4px;
/* */
}
#testdiv_win, #testdiv2_win {
width: 100%;
height: 100%;
background: #0011c8;
padding: 3px;
}
#testdiv_cont, #testdiv2_cont {
overflow: scroll;
width: 100%;
height: 100%;
margin: auto;
background: #eee;
}
#testdiv1_minmax, #testdiv2_minmax {
background: url(min_max.png) no-repeat;
width: 17px;
height: 17px;
position: absolute;
right: 10px;
top: 7px;
z-index: 5px;
}
* html #testdiv1_minmax, * html #testdiv2_minmax {
/* \*/
top: 7px;
right: 17px;
/* */
}