<!DOCTYPE html>
<html>
<head>
<style>
#test {
margin: 5px;
}
.container {
position: absolute;
}
.shifter {
position: absolute;
background-color: black;
width: 12.5px;
height: 12.5px;
}
</style>
</head>
<body>
<div id=test>
</div>
<script>
function setupGrid(leftOffset, topOffset, leftFraction, topFraction, multiplier)
{
var test = document.getElementById('test');
for (var i = 0; i < 10; i++) {
if (i == 5)
topOffset += 5;
var leftOffsetj = leftOffset;
for (var j = 0; j < 10; j++) {
if (j == 5)
leftOffsetj += 5;
var container = document.createElement("div");
var shifter = document.createElement("div");
container.setAttribute('class', 'container');
shifter.setAttribute('class', 'shifter');
container.style.left = Math.round(leftOffsetj + j * multiplier + i * leftFraction) + "px"
container.style.top = Math.round(topOffset + i * multiplier + i * topFraction) + "px"
shifter.style.left = (5 + j * leftFraction) + "px"
shifter.style.top = (5 + j * topFraction) + "px"
container.appendChild(shifter);
test.appendChild(container);
}
}
}
function setupTest()
{
// Vertical shifts:
setupGrid(10, 10, 0, 0.1, 16)
// Horizontal shifts:
setupGrid(300, 10, 0.1, 0, 16);
// And in 8x8 (where exactly 0.5 is more common)
setupGrid(10, 200, 0, 0.125, 20);
setupGrid(300, 200, 0.125, 0, 20);
}
setupTest();
</script>
</body>
</html>
Codebase Browser
chromium