Save position and/or size of a dynDiv Object
You can simple save the position and/or the size of a dynDiv Object into a Cookie.
You only need to place "dynDiv_saveSettings-size" or "dynDiv_saveSettings-position" into the same class definition as "dynDiv_moveDiv" or "dynDiv_moveParentDiv".
The Script will save the Informations when the User refresh the website or leave the website.
To use this Feature you need to make sure that you give the DIVs unqiue IDs.
Please keep in mind this example only save the position or the size and display the cookie Information.
But this example will not load the Data to save and load the Data you need to take a look at the example "Load Position and/or Size of a dynDiv Object".
Save Size
Save Position
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">
<p style="padding: 10px;">Save 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">Save 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>
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;
}