Multicolumned Lists

1

I’ve been trying out site design recently and decided that i wanted to have a multicolumned list but wasn’t able to attain my desired effect using css, so i wrote this little javascript that can incorporate css.

it’s very simple to use. here is the html document:

<html><head><title>Multi-Columned List by Paul Scott (paul.scotto@gmail.com)</title>
<style type="text/css">ul { float: left; clear: right; width: 60px;} body { font-family: "verdana"; font-size: 12px; }</style>
<script language="JavaScript">
	
	//THESE ARE THE VARIABLES YOU EDIT:
	var items = [["1", "?1"], ["2", "?2"], ["3", "?3"], ["4", "?4"], ["5", "?5"], ["6", "?6"], ["7", "?7"], ["8", "?8"], ["9", "?9"], ["10", "?10"]];
	var columns = 3;
	var fillStyle = 1;
	
function writeList() {
var contentArray = [];
for (i=0; i<columns; i++) { contentArray* = []; }

if (fillStyle == 1) {
var offset = 0;	for (i=0; i<columns; i++) { var itemsinCol = Math.ceil((items.length-offset)/(columns-i)); for (j=offset; j<itemsinCol+offset; j++) { contentArray*.push(items[j]); } offset += itemsinCol; 	}
} else if (fillStyle == 2) {
for (j=0; j<items.length; j++) { contentArray[j%columns].push(items[j]);}
} else { fillStyle = 1; writeList(); return; }

for (i=0; i<contentArray.length; i++) { 
document.write("<ul>");
for (j=0; j<contentArray*.length; j++) { document.write("<li><a href=\""+contentArray*[j][1]+"\">"+contentArray*[j][0]+"</a></li>"); }
document.write("</ul>"); } }

</script></head><body>

<script language="JavaScript">writeList();</script>

</body></html>

items is an array containing the information you want in the list. each item is an array with two items inside it. item*[0] is the displayed text and item*[1] is the link.

columns is the number of columns to display in the text

fillStyle is how the list is display, for example you may want your list to look something like this:

(fillStyle = 1):
a d g
b e h
c f

of

(fillStyle = 2):
a b c
d e f
g h

this is a very flexibile script so i kept it pretty simple for your customisation benefits. enjoy :thumb: