Load position and/or size of a dynDiv Object
This example save and load the position and/or size of a dynDiv Object.
Please keep in mind that the Seetings are only save when the user refresh or leave the webpage and when you used unqiue IDs for each DIV.
Simple make sure that Data are stored into the cookie manual or over "dynDiv_saveSettings-..." and then simple use the class "dynDiv_loadSettings" to load the seetings.
Save and Load Size !
Save and Load Position !
Save and Load Position and Size !
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_saveSettings-size dynDiv_loadSettings">
<p style="padding: 10px;">Save and Load Size !</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_saveSettings-position dynDiv_loadSettings">Save and Load Position !</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>
<div id="testdiv_3">
<img src="../example.jpg" width="100%" height="100%" alt="">
<div id="testdiv_3_move" class="dynDiv_moveParentDiv dynDiv_saveSettings-position_size dynDiv_loadSettings">Save and Load Position and Size !</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, #testdiv_3 {
width: 295px;
height: 394px;
right: 10px;
top: 160px;
border: 1px solid #aaa;
position: absolute;
}
#testdiv_2 {
right: 10px;
top: 160px;
}
#testdiv_3 {
right: 100px;
top: 60px;
}
#testdiv_2_move, #testdiv_3_move {
text-align: center;
filter:alpha(opacity=90);
opacity:0.9;
color: #fff;
}