// Ensure MORDENDK namespace
var MORDENDK = MORDENDK || {};
// Remap jQuery to $
(function( $ ){
MORDENDK.Handlers = {
init: function() {
$( '#page > div[class^="col"]' ).alignHeight();
}
}
// Parsing it directly is the same as on $( document ).ready()
$( MORDENDK.Handlers.init );
})( this.jQuery );
/*
*
* jQuery Align Height Plugin v. 0.1 I guess
* I't takes a collection of elements and align their height on a per row basis, for visually aligning flexible grids
* Visit http://morden.dk/2011/handy-jquery-plugin-for-aligning-height for examples and further explanation
*
* Usage: $( 'selector' ).alignHeight( sizes );
* Example: $('#page > div[class^="col"]').alignHeight();
*
*/
/* Map jQuery in a immediately invoked function to create closure and avoid comflicts */
;(function( $ ) {
$.fn.alignHeight = function( options ) {
// Caching collection of elements
var $el = $( this );
// Return elements for chaining immediately if there are not enough elements
if ( $el.size() < 2 ) { return $el; }
// Merge any options and get calculate rows as per opts.sizes
var opts = $.extend( {}, $.fn.alignHeight.defaults, options ),
rows = $.fn.alignHeight.getRows( $el, opts.sizes );
// Align the height of elements for each row in collection of rows
$.fn.alignHeight.setHeightsToRowMax( rows );
// Return elements for chaining
return $el;
};
$.fn.alignHeight.defaults = {
// Sizes used as default
sizes: {
'col' : 100,
'col_25' : 25,
'col_33' : 33.33,
'col_50' : 50,
'col_75' : 75,
'col_100' : 100
}
};
$.fn.alignHeight.getRows = function( $el, sizes ) {
// Create new array for the calculated rows
var rows = [];
/*
* Push each row from the array of elements by calculating width by class names from sizes{}
* var total is the accumulated width, it is reset every time it gets above 100 ( hence a full row )
* var cols is a shifting starting point used when slicing the elements array and pushing them to rows[]
*/
for ( var i = 0, total = 0, cols = 0, l = $el.size(); i < l; i++ ) {
/*
* Calculate the width of the current element by getting it's assigned value from sizes and add it to total
* TODO: Find a better way than to use the first assigned className as lookup
*/
total += parseInt(
sizes[
$el
.eq( i )
.attr( 'class' )
.split( ' ' )[ 0 ]
]
, 10 );
// If we exceed 100 we have a full row
if( Math.ceil( total ) > 100 ){
// So add these to the array of rows
rows.push( $el.slice( cols, i ));
// Then reset and go back one
total = 0; cols = i; i--;
// Then push any remaining elements as the last row
} else if( i + 1 >= l ){
rows.push( $el.slice( cols, i + 1 ) );
}
}
return rows;
};
$.fn.alignHeight.setHeightsToRowMax = function( rows ) {
// Set every elements height to maxHeight for each row in rows[]
for ( var i = 0, l = rows.length; i < l; i++ ) {
var $row = $( rows[ i ] );
if( $row.length > 1 ){
$row.height( $.fn.alignHeight.findMaxHeight( $row ) );
}
}
};
$.fn.alignHeight.findMaxHeight = function( $el ) {
//Set maxHeight to the height of the first element
var maxHeight = $el.height(),
curHeight;
//Loop through the rest to see if one is higher
for ( var i = 1, l = $el.size(); i < l; i++ ) {
curHeight = $el.eq( i ).height();
maxHeight = ( curHeight > maxHeight ) ? curHeight : maxHeight;
}
return maxHeight;
};
}( this.jQuery ) );