| OLD | NEW | 
|---|
| (Empty) |  | 
|  | 1 <html> | 
|  | 2 <head> | 
|  | 3 <style> | 
|  | 4     #test { | 
|  | 5         margin: 5px; | 
|  | 6     } | 
|  | 7     .container { | 
|  | 8         position: absolute; | 
|  | 9         opacity: 0.95; | 
|  | 10     } | 
|  | 11     .shifter { | 
|  | 12         position: absolute; | 
|  | 13         background-color: black; | 
|  | 14         width: 12.5px; | 
|  | 15         height: 12.5px; | 
|  | 16     } | 
|  | 17     .shifter8x8 { | 
|  | 18         position: absolute; | 
|  | 19         background-color: black; | 
|  | 20         width: 16.5px; | 
|  | 21         height: 16.5px; | 
|  | 22     } | 
|  | 23 </style> | 
|  | 24 </head> | 
|  | 25 <body> | 
|  | 26 <div id=test> | 
|  | 27 </div> | 
|  | 28 <script> | 
|  | 29     function setupGrid10x10(leftOffset, topOffset, leftFraction, topFraction) | 
|  | 30     { | 
|  | 31         var test = document.getElementById('test'); | 
|  | 32         for (var i = 0; i < 10; i++) { | 
|  | 33             if (i == 5) | 
|  | 34                 topOffset += 5; | 
|  | 35             var leftOffsetj = leftOffset; | 
|  | 36             for (var j = 0; j < 10; j++) { | 
|  | 37                 if (j == 5) | 
|  | 38                     leftOffsetj += 5; | 
|  | 39                 var container = document.createElement("div"); | 
|  | 40                 var shifter = document.createElement("div"); | 
|  | 41                 container.setAttribute('class', 'container'); | 
|  | 42                 shifter.setAttribute('class', 'shifter'); | 
|  | 43                 container.style.left = (leftOffsetj + j * 16 + i * leftFraction)
     + "px" | 
|  | 44                 container.style.top = (topOffset + i * 16 + i * topFraction) + "
    px" | 
|  | 45                 shifter.style.left = (5 + j * leftFraction) + "px" | 
|  | 46                 shifter.style.top = (5 + j * topFraction) + "px" | 
|  | 47                 container.appendChild(shifter); | 
|  | 48                 test.appendChild(container); | 
|  | 49             } | 
|  | 50         } | 
|  | 51     } | 
|  | 52 | 
|  | 53     function setupGrid8x8(leftOffset, topOffset, leftFraction, topFraction) | 
|  | 54     { | 
|  | 55         var test = document.getElementById('test'); | 
|  | 56         for (var i = 0; i < 8; i++) { | 
|  | 57             if (i == 4) | 
|  | 58                 topOffset += 5; | 
|  | 59             var leftOffsetj = leftOffset; | 
|  | 60             for (var j = 0; j < 8; j++) { | 
|  | 61                 if (j == 4) | 
|  | 62                     leftOffsetj += 5; | 
|  | 63                 var container = document.createElement("div"); | 
|  | 64                 var shifter = document.createElement("div"); | 
|  | 65                 container.setAttribute('class', 'container'); | 
|  | 66                 shifter.setAttribute('class', 'shifter8x8'); | 
|  | 67                 container.style.left = (leftOffsetj + j * 20 + i * leftFraction)
     + "px" | 
|  | 68                 container.style.top = (topOffset + i * 20 + i * topFraction) + "
    px" | 
|  | 69                 shifter.style.left = (5 + j * leftFraction) + "px" | 
|  | 70                 shifter.style.top = (5 + j * topFraction) + "px" | 
|  | 71                 container.appendChild(shifter); | 
|  | 72                 test.appendChild(container); | 
|  | 73             } | 
|  | 74         } | 
|  | 75     } | 
|  | 76 | 
|  | 77     function setupTest() | 
|  | 78     { | 
|  | 79         // Vertical shifts: | 
|  | 80         setupGrid10x10(10, 10, 0, 0.1) | 
|  | 81         // Horizontal shifts: | 
|  | 82         setupGrid10x10(200, 10, 0.1, 0); | 
|  | 83 | 
|  | 84         // And in 8x8 (where exactly 0.5 is more common) | 
|  | 85         setupGrid8x8(10, 200, 0, 0.125); | 
|  | 86         setupGrid8x8(200, 200, 0.125, 0); | 
|  | 87     } | 
|  | 88 | 
|  | 89     setupTest(); | 
|  | 90 </script> | 
|  | 91 </body> | 
|  | 92 </html> | 
| OLD | NEW | 
|---|