icio
July 18th, 2005, 08:29 PM
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[i] = []; }
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[i].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[i].length; j++) { document.write("<li><a href=\""+contentArray[i][j][1]+"\">"+contentArray[i][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[i][0] is the displayed text and item[i][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:
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[i] = []; }
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[i].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[i].length; j++) { document.write("<li><a href=\""+contentArray[i][j][1]+"\">"+contentArray[i][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[i][0] is the displayed text and item[i][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: