layout/html/tests/TestFloaters.html

   1 <BODY>
   2  <STYLE>
   3   DIV { border: 2px solid khaki; }
   4   DIV.left { border: 2px solid green; float: left; width: 100px; }
   5   DIV.left2 { border: 5px solid blue; float: left; width: 200px; }
   6  </STYLE>
   7  <SCRIPT>
   8   function getIndex()
   9   {
  10     var it = document.getElementById("getid");
  11     var index = it.value;
  12     if (index == "") index = 0;
  13     return index;
  14   }
  15   function makeFloater(clazz)
  16   {
  17     var div = document.createElement("DIV");
  18     var text = document.createTextNode("Block Text");
  19     div.appendChild(text);
  20     div.setAttribute("CLASS", clazz);
  21     return div;
  22   }
  23   function appendFloater()
  24   {
  25     var f = makeFloater("left");
  26     var it = document.getElementById("it");
  27     it.appendChild(f);
  28   }
  29   function insertFloater()
  30   {
  31     var f = makeFloater("left2");
  32     var it = document.getElementById("it");
  33     var kids = it.childNodes;
  34     var index = getIndex();
  35     if ((index < 0) || (index > kids.length)) index = 0;
  36     var before = kids[index];
  37     it.insertBefore(f, before);
  38   }
  39   function removeFloater()
  40   {
  41     var f = makeFloater("left2");
  42     var it = document.getElementById("it");
  43     var kids = it.childNodes;
  44     var index = getIndex();
  45     if ((index < 0) || (index > kids.length)) index = 0;
  46     it.removeChild(kids[index]);
  47   }
  48  </SCRIPT>
  49  <FORM>
  50   <INPUT TYPE=button ONCLICK="appendFloater();" value="Append Floater">
  51   <INPUT TYPE=button ONCLICK="insertFloater();" value="Insert Floater">
  52   <INPUT TYPE=button ONCLICK="removeFloater();" value="Remove Floater">
  53   <INPUT TYPE=text value="" ID="getid">
  54  </FORM>
  55  <HR>
  56  <DIV ID=it></DIV>
  57 </BODY>