Recent Posts


Home › Projects › MooColumns

MooColumns 0.67 beta

MooColumns is a MooTools 1.2 class that allows you to divide content into multiple columns quickly and easily.

Syntax:

 

html:

<link rel="stylesheet" href="css/mooColumns.css" type="text/css" media="all" />
...
<div class="multiColumn">Content Here</div>
...
<script type="text/javascript" src="js/mootools-1.2-core-yc.js" ></script>
<script type="text/javascript" src="js/MooColumns_0.66.js" ></script>

 

javascript:

var myColumns = new MooColumns({/*options here*/});

 

Options:

  • selector [string]: css style selector to determine what elements get MooColumns. Default = ".multiColumn"
  • className [string]: Determines main classname used. Default = "multiColumn"
  • numOfColumns [number]: Default = 2
  • gutterWidth [number]: Percent based by default, can use pixel measurement via a string such as "20px". Default = 5
  • gutterClassName [string]: Default ="gutter"
  • columnClassName [string]: Default = "column"
  • tweak [object]
    • width [number]: Overall width adjustment (in px) for multi-column area. Default = 0.
    • x [number]: Left edge adjustment (in px) for multi-column area. Default = 0.
    • y [number]: Top edge adjustment (in px) for multi-column area. Default = 0.
  • splittableElements [array]: Array of splittable elements. Default = [ 'p', 'div', 'span', 'ul' ]
  • morePrecise [boolean]: When true script may be slower but will be more precise. Default = true
  • tolerance [number]: How far (in px) below the target bottom non-splittable elements can hang before they are moved to the next column. Default = 10
  • colBreaksTrump [boolean]: When true and there are column breaks present, they will be used instead of auto-calculating where to divide the content. Useful if you want full control over where the splitting occurs. Default = true

Examples:

// divide all elements with the multiColumn class into 2 columns
var myColumns = new MooColumns({});

// divide all elements with the multiColumn class into 3 columns
var TripleColumns = new MooColumns({ numOfColumns:3 });

// divide the element with the id of "article" into 4 columns
var moreColumns = new MooColumns({ selector:'#article', numOfColumns:3 });

// divide all elements with the multiColumn class into 3 columns
// but make the overall multiColumn area 10 pixels less wide 
// and nudge it 10px to the left and 10px down
var myTweakedColumns = new MooColumns({ 
     tweak:{ 
          width:-10, 
          x:10, 
          y:10 
     }, 
     numOfColumns:3 
});

Notes:

Column Breaks: MooColumns looks for either a span with the class of "colBreak" or two consecutive horiztonal rule elements to use as the column breaks.

Requirements: MooTools 1.2 Core.

Compatibility: All A-grade browsers..

The creation of a MooColumns instance must be wrapped in a domready event.

window.addEvent('domready', function() {
     var myColumns = new MooColumns({});
});

Download

Member Login