Created
November 5, 2015 22:17
-
-
Save italodr/33d7955b460c5ab68487 to your computer and use it in GitHub Desktop.
Equalize height of objects.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
(function($) { | |
'use strict'; | |
/** | |
* Set all elements within the collection to have the same height. | |
*/ | |
$.fn.equalHeight = function() { | |
var heights = []; | |
$.each(this, function(i, element) { | |
var $element = $(element); | |
var elementHeight; | |
// Should we include the elements padding in it's height? | |
var includePadding = ($element.css('box-sizing') === 'border-box') || ($element.css('-moz-box-sizing') === 'border-box'); | |
if (includePadding) { | |
elementHeight = $element.innerHeight(); | |
} else { | |
elementHeight = $element.height(); | |
} | |
heights.push(elementHeight); | |
}); | |
this.css('height', Math.max.apply(window, heights) + 'px'); | |
return this; | |
}; | |
/** | |
* Create a grid of equal height elements. | |
*/ | |
$.fn.equalHeightGrid = function(columns) { | |
var $tiles = this.filter(':visible'); | |
$tiles.css('height', 'auto'); | |
for (var i = 0; i < $tiles.length; i++) { | |
if (i % columns === 0) { | |
var row = $($tiles[i]); | |
for (var n = 1; n < columns; n++) { | |
row = row.add($tiles[i + n]); | |
} | |
row.equalHeight(); | |
} | |
} | |
return this; | |
}; | |
/** | |
* Detect how many columns there are in a given layout. | |
*/ | |
$.fn.detectGridColumns = function() { | |
var offset = 0, | |
cols = 0, | |
$tiles = this.filter(':visible'); | |
$tiles.each(function(i, elem) { | |
var elemOffset = $(elem).offset().top; | |
if (offset === 0 || elemOffset === offset) { | |
cols++; | |
offset = elemOffset; | |
} else { | |
return false; | |
} | |
}); | |
return cols; | |
}; | |
/** | |
* Ensure equal heights now, on ready, load and resize. | |
*/ | |
var grids_event_uid = 0; | |
$.fn.equalizrHeightGrid = function() { | |
var _this = this; | |
var event_namespace = '.grids_' + grids_event_uid; | |
_this.data('grids-event-namespace', event_namespace); | |
function syncHeights() { | |
var cols = _this.detectGridColumns(); | |
_this.equalHeightGrid(cols); | |
} | |
$(window).bind('resize' + event_namespace + ' load' + event_namespace, syncHeights); | |
syncHeights(); | |
grids_event_uid++; | |
return this; | |
}; | |
/** | |
* Unbind created events for a set of elements. | |
*/ | |
$.fn.equalizrHeightGridClear = function() { | |
var _this = this; | |
_this.css('height', 'auto'); | |
$(window).unbind(_this.data('grids-event-namespace')); | |
return this; | |
}; | |
/** | |
* Initialize equalizr for each group of elements. | |
*/ | |
var initEqualizr = function() { | |
var group_id = 0; | |
$.each($('.js-equalizrGroup'), function() { | |
var parent_namespace = 'EqualizrGroup_'+ group_id; | |
$(this).attr('id', parent_namespace); | |
$('#'+ parent_namespace +' .js-equalizr').equalizrHeightGrid(); | |
group_id++; | |
}); | |
}; | |
initEqualizr(); | |
})(window.jQuery); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment