Eli Van Zoeren

This is a plugin that is very limited in scope, but quite useful in many circumstances. All it does is take a container element and split its child elements into two columns. In a perfect world we could just use CSS3’s column-count property to do this, but Opera and Internet Explorer (even the upcoming version 9) don’t support CSS columns. So here we are.

Caveats: This plugin does not check the size of each child element and try to match the heights of the two columns. It simple puts half of the elements in one column and half in the other. This may sound limiting, but in fact it works surprisingly well in many cases. Think of a bullet list of product features, or of company staff-members. When all the items you are splitting are similar in size, or when there are enough of them that they can average each other out, this will be a good solution. Also, horizontal margins and padding on the child elements are not taken into account when calculating their width, so you will need to add that into the gutter value. I plan to fix this in a future version.

The actual columnization (like that?) is done using a little CSS trick I figured out. The items that should be in the first column get this styling: float: left; clear: left; width: 50%;. That stacks them down the left side of the containing block, while leaving room to the right for the right-hand column. Items in that second column get this styling: display: block; width: 50%; margin-left: 50%;, which pushes them over far enough to the right so they fit into the space we left before. Surprisingly, this simple CSS works in all browsers except Firefox <3.5 when the elements to be put in columns are list-items. In that case, we inexplicably need to reset the left margin on the second column to 0.

In addition to simply setting this styling automatically, the plugin does some other calculations necessary to leave a gutter between the two columns and to resize the columns when the window is resized. Additionally, and optionally, the plugin will check for a native CSS implementation of columns and use that instead if it exists. If you use this feature, there are a several things to be aware of: First, the way CSS columns split up content is different than the way this plugin does it. Css columns will split elements between the two columns if necessary to maintain an even column length. Second, for the best possible user experience, you should set the CSS column styling in your stylesheet and use something like Modernizr to only run the vzListSplit plugin when it is needed. That will prevent the FOUC before the Javascript code is run.

Usage

At its most basic, you can just run the plugin on the container element whose children should be put in columns.

$('ul#features').vzListSplit();

If you want more control over the results, you can use any of the following parameters.

• gutter: The width of the gap between the columns. Can be specified in either pixels or a percentage. (Default 20px)
• width: You can use this to manually set a total width for the columns. You might need this if the container is hidden on pageload (in which case jQuery will read its width as 0) or if you don’t want the columns to span the entire width of the containing element.
• autosize: When using a gap specified in pixels in normal mode or in percentages in native mode (see below), we need to recalculate some dimensions whenever the browser window is resized. If you know that the width of your container will not change when the browser is resized, or if you are having performance issues, you can set autosize to false to disable this feature. (true)
• native: When this is set to true the plugin will check for a native CSS columns implementation and use that when possible. Please see the note above about display differences when using this. (false)
• children_selector: You can use this to put only certain child elements into columns. Be aware, though, that mixing columnized elements with non-columnized elements be lead to unpredictable results. (null - all child elements)
• split_class: This classname will be set on the container element when the plugin runs. You could use this to style columns or to hide the container before the plugin is run. (columns)

Download the Script