<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript">
function shiftDivs() {
var divs = document.getElementsByTagName('div');
var curHeight = 0; var al = '';
var curDivCol = 1;
var shiftDivCounter = 0; //just a counter to fill the array of found elements and their position they should go
var divsAndPosition = new Array(new Array()); //2 dimensional array holding divs and their position like [element1, 1],[element2, 1],[element3, 2]
// [the element, the div they go into]
for (var i = 0; i < divs.length; i++) { //loop through all element
if (divs[i].id.indexOf('shift', 0) != -1) { //if the id starts with shift, its one we want to check and if needed move
curHeight = curHeight + divs[i].offsetHeight; //calculate the total height so far
//offsetHeight is what you want as your divs have no set pixel height .style.height wont work
if (curHeight > 500) //this div should already shift to right;
{
curDivCol++; // so we up the column (div) number it should go to
curHeight = 0; //reset for new measuring
}
//fill the array with the current div we are working with, and the column we want it to go to
divsAndPosition[shiftDivCounter] = [divs[i], curDivCol];
//up the array index we are filling
shiftDivCounter++;
//
}
}
//for each element in our array set the new parent element (column)
for (var x = 0; x < divsAndPosition.length; x++) {
setParent(divsAndPosition[x][0], divsAndPosition[x][1]);
}
}
function setParent(el, newParent) {
//important the container columns should have an ID starting with: divCol
//and need to have the numbers behind it in order like divCol1, divCol2, divCol3 etc
//see the divCol divs below.
var targetDiv = document.getElementById('divCol' + newParent);
targetDiv.appendChild(el);
}
//all the way at the bottom is where we call this function. Don;t call it here as the browser
//hasnt rendered the contect yet and doesnt know how high the divs are.
</script>
</head>
<body>
<div>
<div id="example" style="width: 900px; height: 500px; padding: 0px 15px 0px 15px;
z-index: 99; background: #e6e6e6;">
<div style="width: 170px; height: 500px; background-color: #FF0000; float: left;"
id="divCol1">
<div style='border: 1px solid black; width: 170px;' id='shift1'>
1test<br />
test<br />
test<br />
test<br />
</div>
<div style='border: 1px solid black; width: 170px;' id='shift2'>
2test<br />
test<br />
test<br />
test<br />
test<br />
test<br />
test<br />
</div>
<div style='border: 1px solid black; width: 170px;' id='shift3'>
3test<br />
test<br />
test<br />
test<br />
</div>
<div style='border: 1px solid black; width: 170px;' id='shift4'>
4test<br />
test<br />
test<br />
</div>
<div style='border: 1px solid black; width: 170px;' id='shift5'>
5test<br />
test<br />
test<br />
test<br />
test<br />
</div>
<div style='border: 1px solid black; width: 170px;' id='shift6'>
6test<br />
test<br />
</div>
<div style='border: 1px solid black; width: 170px;' id='shift7'>
7test<br />
test<br />
test<br />
</div>
<div style='border: 1px solid black; width: 170px;' id='shift8'>
8test<br />
test<br />
test<br />
test<br />
</div>
<div style='border: 1px solid black; width: 170px;' id='shift9'>
9test<br />
test<br />
test<br />
</div>
</div>
<div style="width: 170px; height: 450px; background-color: #00FF00; float: left;"
id="divCol2">
</div>
<div style="width: 170px; height: 450px; background-color: #FF00FF; float: left;"
id="divCol3">
</div>
<div style="width: 170px; height: 450px; background-color: #0000FF; float: left;"
id="divCol4">
</div>
</div>
<script type="text/javascript">
shiftDivs();
</script>
</div>
</body>
</html>
Setting it up on halfdollarhosting.com home page failed
Linear Mode
