This script will take an html list (ul or ol) and reformat it after a page loads so that the list spans multiple columns. The list and list items are converted to block display (see notes).
The script uses DOM-compliant coding and as a result older browsers (such as Netscape Navigator 4.x) will not perform any of the operations. Also, the functionality of the script was design so that if javascript were disabled or the page accessed by an older browser the user would still be able to view the content of the page.
A W3C DOM-compliant browser with JavaScript and CSS support enabled. Tested in both standards mode and quirks mode.
Tested and functional:
Tested and non-functional:
Attach the JS file (formatted or size-optimized)
to a document using <script src...></script> or some
other mechanism.
Include in the html document a stylesheet that contains the basic style information. Additional styling can be defined as desired, but the basic style information must be included for the script to function as expected.
The menu uses a list (ul or ol) with a class attribute
containing "multiColumnList" as
it's source.
Modify user parameters as desired. The following parameters can be set on the web page referencing this script after the script reference.
<html><head><title>Multi-Column List</title><link rel="stylesheet" type="text/css" href="multiColumnList.css" /><script type="text/javascript" src="multiColumnList.js"></script> </head><body><ul class="multiColumnList"><li><p><a href="http://www.google.com">Google</a></p></li><li><p><a href="http://www.google.com">Google</a></p></li><li><p><a href="http://www.google.com">Google</a></p></li><li><p><a href="http://www.google.com">Google</a></p></li><li><p><a href="http://www.google.com">Google</a></p></li><li><p><a href="http://www.google.com">Google</a></p></li></ul></body></html>Comments on the sample:
Line 4 - Link to the Multi-Column List stylesheet.
Line 5 - Link to the Multi-Column List javascript.
See the demo page for a demonstration of the features of this script.
The following functions are included in the show/hide code library. Additional line-item documentation is provided in the code itself. Source information for public, externally developed functions is provided; documentation for these functions is available from the source.
| Function | mcl_bwcheck |
|---|---|
| Source | DHTML Central http://www.dhtmlcentral.com/projects/lib/reference.asp?m=58 Creates an object that stores information about the user agent |
| Parameters | None |
| Notes | 2006-05-05 (bsweeney@aaas.org)
2005-09-20 (bsweeney@aaas.org)
|
| Function | mcl_addEvent |
|---|---|
| Source | Scott Andrew LePera http://www.scottandrew.com/weblog/articles/cbs-events Cross-browser code to add an event handler to a DOM object |
| Parameters |
|
| Notes | 2005-09-20 (bsweeney@aaas.org)
|
| Function | mcl_init |
|---|---|
| Details | This function initializes the multi-column list. The page is parsed for
lists that have a class of "multiColumnList" which are then pushed into
an array. These lists are assigned another class of "mclList".
Next the list items are given a percentage width consistent with the
number of columns and processed to determine the total height. The height
is divided by the number of columns and the list items are processed
again for the first column. Once the first column is set, subsequent
columns are determined based on its height. Subsequent columns are created
by providing a negative top margin of the first item in each column
and giving all items in each column a left margin. The last item in the
list is given a height to make up space between it and the max column
height so that content following the list does not overlap it. The height
of the list is determined and stored in a temporary variable. Lastly,
the mcl_correct function
is called. |
| Parameters | None (used as event handler) |
| Notes | None |
| Function | mcl_correct |
|---|---|
| Details | This function checks the height of each list with the previously stored height. If there is a discrepancy the list is reprocessed to determine the height of the first column so that the top margin of the first list item in each subsequent column, and the height of the last list item, can be set. This process is needed because these values are set in pixels. If these values are next set as the list changes dimensions the columns will not be aligned correctly. |
| Parameters | None (parses array of list DOM nodes, called recursively) |
| Notes | None |
Update the addEvent script to handle IE memory leak problems.
Update the script to use a common code library. Some functions (addEvent,
lib_bwcheck, etc) are common across
a number of the scripts that have been written. Should these functions
be consolidated in a CCL?
Fully check the code to make sure it appropriately degrades and won't affect older browsers (unless modified).
Determine if it is possible to display the list item markers correctly.
2006-05-18 (bsweeney@aaas.org)
The upcoming release of IE7 maintains a number of rendering similarities with IE6 when in QuirksMode. One line of code had to be updated so that the columns other than the first are given the appropriate width.
2006-05-17 (bsweeney@aaas.org)
Modified the stylesheet to add a box-sizing declaration for
images adjusting the sizing to the content box. With the sizing set to border-box images
have to be resized to fit any borders into the defined width, thus affecting
their appearance on the page.
2005-09-20 (bsweeney@aaas.org)
I wrote the script with the principles of progressive enhancement in mind (see http://hesketh.com/publications/progressive_enhancement_paving_way_for_future.html). What this means is that the lowest-common-denominator browser can still use the page.
Attaching events in IE causes a memory leak. A large number of show/hide content could seriously degrade performance. Also, since the leak is persistent during a browser a session, a user visiting a number of pages that attach events would notice an affect on performance. There are ways to correct the problem, I've added it to the "to do" list.
There are some issues to deal with when it comes to displaying
the list normally, i.e. as a list with list item markers (numbers
for ol and discs for ul).
I need to determine how margin, padding, border, and width values affect the display or positioning of the markers.
IE seems to have many rendering problems with
a styled list (some of which has to do with whether or not
a list or list element hasLayout). I need to determine
what the possible problems are and how to avoid them. For
example, markers
are displayed on the last line of a multi-line list item.
Since the margin-top of the first item in each column has to
be in pixels, it needs to be recalculated each time the list is resized.
Same goes for the height of the last item in the list. The MCL function
mcl_correct performs these calculations each time the list changes height.
Unfortunately there doesn't appear to be a cross-browser method of determining
a change in the list, so for now we're just using setTimeout to call
the function every 100 ms.