Dynamic add Elements and add the dynDiv Object

This example is a little bit complex, so this is only for advance User.
There are some situations where you add Objects after the pageload, but this is also no Problem with dynDiv, because you can simple add an dynDiv Object over a simple command.

Click for testing
Add dynamic Elements

HTML Code

<script type="text/javascript" src="byrei-dyndiv_1.0rc1.js"></script>

<div id="divis"> - </div>

[Custom JavaScript Code]

JavaScript Code

<script type="text/javascript">
var iii = 0;
function add() {
 if (typeof ByRei_dynDiv !== 'undefined') {
    var divis = document.getElementById('divis');
    if (divis) {
      var
       dynDiv1 = document.createElement('div'),
       dynDiv2 = document.createElement('div'),
       resizeDiv1 = document.createElement('div'),
       resizeDiv2 = document.createElement('div'),
       resizeDiv3 = document.createElement('div'),
       resizeDiv4 = document.createElement('div');

      // dynDiv 1 - Define and add Object
      dynDiv1.style.width = '100px';
      dynDiv1.style.height = '100px';
      dynDiv1.style.border = '1px solid red';
      dynDiv1.style.background = '#ccc';
      dynDiv1.style.position = 'absolute';
      dynDiv1.style.top = (200 + (iii*25)) + 'px';
      dynDiv1.style.left = (100 + (iii*25))+ 'px';
      dynDiv1.innerHTML = iii + ': Hallo Welt';
      dynDiv1.className = 'dynDiv_moveDiv dynDiv_bodyLimit';
      divis.appendChild(dynDiv1);

      // dynDiv 2
      dynDiv2.style.width = '100px';
      dynDiv2.style.height = '100px';
      dynDiv2.style.border = '1px solid green';
      dynDiv2.style.background = '#ccc';
      dynDiv2.style.position = 'absolute';
      dynDiv2.style.top = (200 + (iii*25)) + 'px';
      dynDiv2.style.left = (250 + (iii*25))+ 'px';
      dynDiv2.innerHTML = '   ' + iii ;
      dynDiv2.className = 'dynDiv_moveDiv dynDiv_bodyLimit';

      // dynDiv 2 - Add Resize Button
      resizeDiv1.style.width = resizeDiv2.style.width = resizeDiv3.style.width = resizeDiv4.style.width = '10px';
      resizeDiv1.style.height = resizeDiv2.style.height = resizeDiv3.style.height = resizeDiv4.style.height = '10px';
      resizeDiv1.style.position = resizeDiv2.style.position = resizeDiv3.style.position = resizeDiv4.style.position = 'absolute';
      resizeDiv1.style.border = resizeDiv2.style.border = resizeDiv3.style.border = resizeDiv4.style.border = '1px solid red';
      resizeDiv1.style.background = resizeDiv2.style.background = resizeDiv3.style.background = resizeDiv4.style.background = '#a00';
      resizeDiv1.style.top = resizeDiv2.style.top = 0;
      resizeDiv3.style.bottom = resizeDiv4.style.bottom = 0;
      resizeDiv1.style.left = resizeDiv3.style.left = 0;
      resizeDiv2.style.right = resizeDiv4.style.right = 0;

      // Defined Resize Direction
      resizeDiv1.className = 'dynDiv_resizeDiv_tl';
      resizeDiv2.className = 'dynDiv_resizeDiv_tr';
      resizeDiv3.className = 'dynDiv_resizeDiv_bl';
      resizeDiv4.className = 'dynDiv_resizeDiv_br';

      // dynDiv 2 - Add Object
      dynDiv2.appendChild(resizeDiv1);
      dynDiv2.appendChild(resizeDiv2);
      dynDiv2.appendChild(resizeDiv3);
      dynDiv2.appendChild(resizeDiv4);
      divis.appendChild(dynDiv2);

      // Add dynDiv Object to new created Object
      ByRei_dynDiv.add(dynDiv1, iii);
      ByRei_dynDiv.add(dynDiv2, iii*100);

      // Add dynDiv Object for resize Buttons as well
      ByRei_dynDiv.add(resizeDiv1, iii*200);
      ByRei_dynDiv.add(resizeDiv2, iii*200);
      ByRei_dynDiv.add(resizeDiv3, iii*200);
      ByRei_dynDiv.add(resizeDiv4, iii*200);

     iii++;
    }
 }
}
</script>

ByRei - dynDiv

Simple dynamic Divs by Markus Bordihn

Dynamic add Elements and add the dynDiv Object

HTML Code

JavaScript Code