jQuery Distribute Plugin

Whipped up in a very short period of time for stitchd, the idea behind this plugin is to evenly distribute child elements horizontally across fluid css layouts.

A table doesn't quite do the job for this as:

• a) the contents may not be tabular data
• b) you want the left and right edges to neatly align with your layout, which a table with centered cells would not allow

Demo

The example loads in a new window so that it is easily resized to see the plugin in action.

Click here to see the demo

How to use

You need to tell the plugin when to update the positioning of elements so at a minimum i would suggest triggering it at page load and on window resizes, like so:

1. $(window).resize(function(){ $('#boxes').distribute(); }); $('#boxes').distribute();

There are currently only two options for this plugin.

margin

This allows you to set a minimum margin between elements

1. $('#boxes').distribute({'margin': 20});

width

You can also explicitely set the width of child elements, otherwise the plugin will use the width of the first element. This behaviour may be enhanced in the future.

1. $('#boxes').distribute({'width': 200});

Download

The plugin can be downloaded from the public repository on github.

Contact

If you have any comments you can find me @tommoor on twitter