Tuesday, September 23, 2008

Vertical multi-column list

function ge(obj) {
	return document.getElementById(obj);
}
/*
Reorder a list that normally flows horizontally and refactor to flow vertically in the same area. 
Assumes that the li element has a css width and uses the shortcut function ge()
*/
function vertMultiColList(parentObj) {
	var nextColHtml = '
    '; // no quotes b/c IE is weird about rewriting HTML // if this has already run take out any continued lists parentObj.innerHTML = parentObj.innerHTML.replace(/<\/ul>
      /ig,''); // Firefox parentObj.innerHTML = parentObj.innerHTML.replace(/<\/ul>
        /ig,''); // IE var arrUl = document.getElementsByTagName('UL'); for(var j=0;j= 0) { //arrUl[j].style.border='1px solid red'; var arrLi = arrUl[j].getElementsByTagName('LI'); var lenArrLi = arrLi.length; if(lenArrLi==0) { break; } // get outer width of container var padOffset = -30; var container_width = parentObj.clientWidth+padOffset; // gives a little padding if(container_width==padOffset) { //IE6 problem container_width = document.body.clientWidth+padOffset; } // get width of list item var item_width = arrLi[0].clientWidth; if(item_width==0) item_width = arrLi[0].style.width; // calculate the number of columns that can fit in the space var cols = Math.floor(container_width/item_width); // divide the number of list items by the number of columns to // find out how many items should be in a column var li_per_col = Math.ceil(lenArrLi/cols); for(var i=0;i'; } if(i>1000) { cLog('over 1000 LI'); return; break; } } parentObj.innerHTML = parentObj.innerHTML.replace(/<\/li>/ig,nextColHtml); cLog('parentObj.id: ' + parentObj.id); cLog('container_width: ' + container_width); cLog('item_width: ' + item_width); cLog('lenArrLi: ' + lenArrLi); cLog('cols: ' + cols); cLog('li_per_col: ' + li_per_col); //cLog('parentObj.innerHTML: ' + parentObj.innerHTML); } if(j>100) { cLog('over 100 UL'); return; break; } } //window.onresize = vertMultiColList; // IE can't handle this and spikes memory //parentObj.ondblclick = function() { alert(this.innerHTML); } //parentObj.onmouseover = vertMultiColList; } function cLog(s) { //alert(s); if(document.all) { return; } else { //console.log(s); return; } }