Plugins

The plugins site is currently in development.

We've been looking to provide a higher-quality, spam-free experience at the plugins site for some time, and a major error on our part forced us to shut down the current site before we could put the new one in place. We are developing a new site, and you can follow along with its development on GitHub. For more information about this transition, including steps you can take as a plugin author to prepare, please read our post about what's going on.

columnizer


Make columns from list

New list columnizer

There are few parameters - cols, the number of columns to break the list into; colWidth set width for each column or leave 0 for auto width; equalHeight (defaulting to false) can be false, 'ul', 'ol', 'li' to set equal height for ul/ol or li elements; startN, the start number of numbered list.
See more at CodEasily.com or WebMastersWall.com

Features

  • Styling of ordered/unordered lists
  • Configurable column-count and width
  • Easy restoring to "non-column" layout
  • Requirements: JQuery 1.2 (download)
  • Browser-Compatibility: Firefox 1.5+, IE6+, Safari 2, Opera 9+

Just apply to any group of DOM-elements gathered by the amazing JQuery-selectors. The provided arguments are optional (these are the default values).

YA List Columnizer

Yet Another method of turning an list (ordered or unordered) into multiple columns.

So I needed a method to take a long, nested list and turning it into a compact, multiple acolumn list, in order to display it as sort of a site map for the home page for a site I'm working on.

Scanning the plugins site, I found a possible solution from a feller called Ingo Schommer called columnizeList.

Score, right? Well... not exactly, at least for my case.

Ingo used some of the methodoligies outlined in this article on multi-column lists on A List Apart. One of the caveats of his methodology is that each list item has to be the same height. This works Ok for a lot of use cases, but since I'm using a Drupal menu as the source for the list, it could contain arbitrary text I don't control.

Columnize

Columnize creates a newspaper-like column layout. The original HTML code only needs small adaptions. In most cases, it is not necessary to adapt the HTML code at all.
Using the plugin is easy:

$("#text").columnize();

sets the contents of the DOM node with the ID ›text‹ in a two-column layout with balanced column lengths.

Columnizer

Easily give your site the newspaper layout you've dreamed of, and use Columnizer to layout your content into multiple columns automatically. Resizing the browser will automatically add or remove columns based on available width. Now your layout can automatically adjust to really wide monitors and adapt to narrow iPhone interfaces!

Check the out basic demos: First Sample, Second Sample, and the Third Sample.

Advanced demo: Page 2 of welcome.totheinter.net

Columns can be sized to fit any width and layout images and complex nested HTML on the fly.

Easy to use:
$('.wide').columnize({width:400});

Advanced options available for more complex layouts.