| OLD | NEW | 
| (Empty) |  | 
 |   1 <!DOCTYPE html> | 
 |   2 <html> | 
 |   3 <head> | 
 |   4 <style> | 
 |   5     #test {  | 
 |   6         margin: 5px; | 
 |   7     } | 
 |   8     .container { | 
 |   9         position: absolute; | 
 |  10         opacity: 0.95; | 
 |  11     } | 
 |  12     .shifter { | 
 |  13         position: absolute; | 
 |  14         background-color: black; | 
 |  15         width: 12.5px; | 
 |  16         height: 12.5px; | 
 |  17     } | 
 |  18 </style> | 
 |  19 </head> | 
 |  20 <body> | 
 |  21 <div id=test> | 
 |  22 </div> | 
 |  23 <script> | 
 |  24     function setupGrid(leftOffset, topOffset, leftFraction, topFraction, multipl
    ier) | 
 |  25     { | 
 |  26         var test = document.getElementById('test'); | 
 |  27         for (var i = 0; i < 10; i++) { | 
 |  28             if (i == 5) | 
 |  29                 topOffset += 5; | 
 |  30             var leftOffsetj = leftOffset; | 
 |  31             for (var j = 0; j < 10; j++) { | 
 |  32                 if (j == 5) | 
 |  33                     leftOffsetj += 5; | 
 |  34                 var container = document.createElement("div"); | 
 |  35                 var shifter = document.createElement("div"); | 
 |  36                 container.setAttribute('class', 'container'); | 
 |  37                 shifter.setAttribute('class', 'shifter'); | 
 |  38                 container.style.left = (leftOffsetj + j * multiplier + i * leftF
    raction) + "px" | 
 |  39                 container.style.top = (topOffset + i * multiplier + i * topFract
    ion) + "px" | 
 |  40                 shifter.style.left = (5 + j * leftFraction) + "px" | 
 |  41                 shifter.style.top = (5 + j * topFraction) + "px" | 
 |  42                 container.appendChild(shifter); | 
 |  43                 test.appendChild(container); | 
 |  44             } | 
 |  45         } | 
 |  46     } | 
 |  47  | 
 |  48     function setupTest() | 
 |  49     { | 
 |  50         // Vertical shifts: | 
 |  51         setupGrid(10, 10, 0, 0.1, 16) | 
 |  52         // Horizontal shifts: | 
 |  53         setupGrid(300, 10, 0.1, 0, 16); | 
 |  54  | 
 |  55         // And in 8x8 (where exactly 0.5 is more common) | 
 |  56         setupGrid(10, 200, 0, 0.125, 20); | 
 |  57         setupGrid(300, 200, 0.125, 0, 20); | 
 |  58     } | 
 |  59  | 
 |  60     setupTest(); | 
 |  61 </script> | 
 |  62 </body> | 
 |  63 </html> | 
| OLD | NEW |