Auto-Sorting Pseudo Columns

Here we have a script that automatically puts elements (in this case checkboxes and supporting text) into multiple pseudo-columns based on the number of elements, the element width, and the window width. Please note that the order of the objects is down, then across.



You can copy the page html from the textarea below and save it to your local system.

<!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" xml:lang="en" lang="en">

<head>

<title>temptitle</title>

<meta http-equiv="content-type" content="text/html; charset=UTF-8" />

<script type="text/javascript">
<!--
//Original Design by Andrew Kimoto (webmaster-at-kimoto.us)
//here is the array that is used to build the columns
colArray = new Array(10)
colArray[0]=new Array('checkbox','chk01','01','F','Choice 01')
colArray[1]=new Array('checkbox','chk02','02','F','Choice 02')
colArray[2]=new Array('checkbox','chk03','03','F','Choice 03')
colArray[3]=new Array('checkbox','chk04','04','F','Choice 04')
colArray[4]=new Array('checkbox','chk05','05','F','Choice 05')
colArray[5]=new Array('checkbox','chk06','06','F','Choice 06')
colArray[6]=new Array('checkbox','chk07','07','F','Choice 07')
colArray[7]=new Array('checkbox','chk08','08','F','Choice 08')
colArray[8]=new Array('checkbox','chk09','09','F','Even Longer Choice 09')
colArray[9]=new Array('checkbox','chk10','10','F','Long Choice 10')

//This global variable is used to adjust between document.width and columnDiv
var widthReduction=32

function buildColumns(){

var colWidth=0
for (i=0;i<colArray.length;i++){
colWidth=(colArray[i][4].length>colWidth?colArray[i][4].length:colWidth)
}
colWidth=eval(colWidth*10)
//if gecko
if (document.width==undefined){
var maxCols=parseInt((document.body.clientWidth-widthReduction)/colWidth)
//else assume ie
}else{
var maxCols=parseInt((document.width-widthReduction)/colWidth)
}
var extraRow=(colArray.length%maxCols==0?0:1)
var maxRows=parseInt(colArray.length/maxCols)+extraRow
var columnData=''
k=colArray.length%maxCols
for (i=0;i<maxRows;i++){
curmaxRows=maxRows
for (j=0;j<maxCols;j++){
h=(j>k?1:0)
curmaxRows=curmaxRows+(maxRows-h)
if( i+(j*(maxRows))<colArray.length){
columnData=columnData + '<div style="font-size:0.81em;color:#666;float: left;text-align:right;width:'+colWidth+'px;">'+colArray[(i+ (j*(maxRows)) )][4]+' <input type="'+colArray[(i+(j*(maxRows)))][0]+'" id="'+colArray[(i+(j*(maxRows)))][1]+'" name="'+colArray[(i+(j*(maxRows)))][1]+'" value="'+colArray[(i+(j*(maxRows)))][2]+'" /></div>'
}
}
columnData=columnData+'<div style="clear:both;"> </div>'
}
document.getElementById('columnDiv').innerHTML=columnData
}

window.onresize=buildColumns

//-->
</script>

<style type="text/css">
#main {margin-top:10px;}
h1,select,textarea,form,p { margin-left: 10px;}
span {color:#666;font-size:0.81em;}
#dateDiv {
margin-left:10px;
color: #666;
font-size: 0.81em;
}

/* Hides from IE5-mac \*/
* html #main {height: 1%;}
/* End hide from IE5-mac */
</style>

</head>

<body onload="buildColumns()">

<div id="main" style="overflow:auto;">
<h1>Auto-Sorting Pseudo Columns</h1>
<p>Here we have a script that automatically puts elements (in this case checkboxes and supporting text) into multiple pseudo-columns based on the number of elements, the element width, and the window width. Please note that the order of the objects is down, then across.</p>
<div id="columnDiv"></div>
<br /><br />

<p>You can copy the page html from the textarea below and save it to your local system.</p>
<!--<textarea rows="15" cols="40">//-->
<div style="font-size:0.81em;margin-left:10px;border:1px solid #666;overflow:scroll;width: 80%;height: 300px;">
<!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" xml:lang="en" lang="en">

<head>

<title>temptitle</title>

<meta http-equiv="content-type" content="text/html; charset=UTF-8" />

<script type="text/javascript">
<!--

//Original Design by Andrew Kimoto (webmaster-at-kimoto.us)
//here is the array that is used to build the columns
colArray = new Array(10)
colArray[0]=new Array('checkbox','chk01','01','F','Choice 01')
colArray[1]=new Array('checkbox','chk02','02','F','Choice 02')
colArray[2]=new Array('checkbox','chk03','03','F','Choice 03')
colArray[3]=new Array('checkbox','chk04','04','F','Choice 04')
colArray[4]=new Array('checkbox','chk05','05','F','Choice 05')
colArray[5]=new Array('checkbox','chk06','06','F','Choice 06')
colArray[6]=new Array('checkbox','chk07','07','F','Choice 07')
colArray[7]=new Array('checkbox','chk08','08','F','Choice 08')
colArray[8]=new Array('checkbox','chk09','09','F','Even Longer Choice 09')
colArray[9]=new Array('checkbox','chk10','10','F','Long Choice 10')

//This global variable is used to adjust between document.width and columnDiv
var widthReduction=32

function buildColumns(){

var colWidth=0
for (i=0;i<colArray.length;i++){
colWidth=(colArray[i][4].length>colWidth?colArray[i][4].length:colWidth)
}
colWidth=eval(colWidth*10)
//if gecko
if (document.width==undefined){
var maxCols=parseInt((document.body.clientWidth-widthReduction)/colWidth)
//else assume ie
}else{
var maxCols=parseInt((document.width-widthReduction)/colWidth)
}
var extraRow=(colArray.length%maxCols==0?0:1)
var maxRows=parseInt(colArray.length/maxCols)+extraRow
var columnData=''
k=colArray.length%maxCols
for (i=0;i<maxRows;i++){
curmaxRows=maxRows
for (j=0;j<maxCols;j++){
h=(j>k?1:0)
curmaxRows=curmaxRows+(maxRows-h)
if( i+(j*(maxRows))<colArray.length){
columnData=columnData + '<div style="font-size:0.81em;color:#666;float: left;text-align:right;width:'+colWidth+'px;">'+colArray[(i+ (j*(maxRows)) )][4]+' <input type="'+colArray[(i+(j*(maxRows)))][0]+'" id="'+colArray[(i+(j*(maxRows)))][1]+'" name="'+colArray[(i+(j*(maxRows)))][1]+'" value="'+colArray[(i+(j*(maxRows)))][2]+'" /></div>'
}
}
columnData=columnData+'<div style="clear:both;"> </div>'
}
document.getElementById('columnDiv').innerHTML=columnData
}

window.onresize=buildColumns

//-->
</script>

<style type="text/css">
</style>
</head>
<body onload="buildColumns()">
<h1>Pseudo Columns</h1>
<p>Here we have a script that automatically puts elements (in this case checkboxes and supporting text) into multiple pseudo-columns based on the number of elements, the element width, and the window width. Please note that the order of the objects is down, then across.</p>
<div id="columnDiv"></div>
</body>
</html>

</div>


</body>
</html>