Log In | Register

Or sign in with:


Home › Site Navigation › 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:

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

 

javascript:

  1. 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:

  1. // divide all elements with the multiColumn class into 2 columns  
  2. var myColumns = new MooColumns({});  
  3.   
  4. // divide all elements with the multiColumn class into 3 columns  
  5. var TripleColumns = new MooColumns({ numOfColumns:3 });  
  6.   
  7. // divide the element with the id of "article" into 4 columns  
  8. var moreColumns = new MooColumns({ selector:'#article', numOfColumns:3 });  
  9.   
  10. // divide all elements with the multiColumn class into 3 columns  
  11. // but make the overall multiColumn area 10 pixels less wide   
  12. // and nudge it 10px to the left and 10px down  
  13. var myTweakedColumns = new MooColumns({   
  14.      tweak:{   
  15.           width:-10,   
  16.           x:10,   
  17.           y:10   
  18.      },   
  19.      numOfColumns:3   
  20. });  

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.

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


Download