Skip to content

Instantly share code, notes, and snippets.

@lyquix-owner
Last active September 1, 2016 13:04
Show Gist options
  • Save lyquix-owner/b09d1e122e632c81de3173a173d8ee64 to your computer and use it in GitHub Desktop.
Save lyquix-owner/b09d1e122e632c81de3173a173d8ee64 to your computer and use it in GitHub Desktop.
Equal Height Row: method for setting equal height for elements aligned in the same row
/*
equalHeightRows
Provides a method for setting equal height for elements in the same row
Requires jQuery
Add class equalheightrow to elements that you want affected by this script
On document ready run equalHeightRows.init(), optionally pass custom settings
for example: equalHeightRows.init({refreshElems: true});
To make it responsive, run equalHeightRows.exec() on window resize (use throtle)
and breakpoint changes, optionally pass custom settings (apply only for that
execution), for example: equalHeightRows.exec({refreshElems: true});
*/
var equalHeightRows: {
settings: {
refreshElems: false, // refreshed the list of elements on each run
onlyVisible: true, // ignores non visible elements
checkPageLoad: true, // check if there was the page load event when waiting for images
},
vars: {},
// init equalHeightRows
// add an "loaderror" attribute to images that fail to load
init : function(opts) {
// replace default settings with passed options
if(typeof opts == 'object') {
jQuery.extend(true, equalHeightRows.settings, opts);
}
// get elements, check if we will ignore not visible elements
if(equalHeightRows.settings.onlyVisible) {
equalHeightRows.vars.elems = jQuery('.equalheightrow:visible');
}
else {
equalHeightRows.vars.elems = jQuery('.equalheightrow');
}
// get images inside equal height rows elements
equalHeightRows.vars.imgs = equalHeightRows.vars.elems.find('img');
// add listener on page load
equalHeightRows.vars.pageLoaded = false;
jQuery(window).load(function(){
equalHeightRows.vars.pageLoaded = true;
});
// run equal height rows
equalHeightRows.exec();
},
// equalHeightRows
// makes all elements in a row to be the same height
exec : function(opts) {
// get default settings and override with custom opts
var s = equalHeightRows.settings;
if(typeof opts == 'object') jQuery.extend(true, s, opts);
if(s.refreshElems || typeof equalHeightRows.vars.elems == 'undefined') {
if(equalHeightRows.settings.onlyVisible) {
equalHeightRows.vars.elems = jQuery('.equalheightrow:visible');
}
else {
equalHeightRows.vars.elems = jQuery('.equalheightrow');
}
equalHeightRows.vars.imgs = equalHeightRows.vars.elems.find('img');
}
var elemsCount = equalHeightRows.vars.elems.length;
// first, revert all elements to auto height
equalHeightRows.vars.elems.height('auto').promise().done(function(){
// reset some vars
var currElem,
currElemTop = 0,
currElemHeight = 0,
currRowElems = new Array(),
currRowTop = 0,
currRowHeight = 0;
// update heights per row
equalHeightRows.vars.elems.each(function(i){
// current element and its top
currElem = jQuery(this);
currElemTop = currElem.offset().top;
currElemHeight = currElem.height();
if(currElemTop != currRowTop) {
// new row has started, set the height for the previous row if it has more than one element
if(currRowElems.length > 1) {
for(var j = 0; j < currRowElems.length; j++) {
currRowElems[j].height(currRowHeight);
}
}
// wipe out array of current row elems, start with current element
currRowElems = new Array(currElem);
// set the top of current row (gets again position of elem after adjusting previous row)
currRowTop = currElem.offset().top;;
// set the current tallest
currRowHeight = currElemHeight;
}
else {
// element in same row, add to array of elements
currRowElems.push(currElem);
// update the row height if new element is taller
currRowHeight = (currElemHeight > currRowHeight) ? currElemHeight : currRowHeight;
// if this is the last element in the set, update the last row elements height
if(i == elemsCount - 1) {
if(currRowElems.length > 1) {
for(var j = 0; j < currRowElems.length; j++) {
currRowElems[j].height(currRowHeight);
}
}
}
}
}).promise().done(function(){
// there may be images waiting to load, in that case wait a little and try again
if(!(equalHeightRows.settings.checkPageLoad && equalHeightRows.vars.pageLoaded)) {
equalHeightRows.vars.imgs.each(function(){
// is the image still loading? (this.complete works only in IE)
if(this.complete != true || (typeof this.naturalWidth !== "undefined" && this.naturalWidth === 0)) {
// seems to still be loading
// if there wasn't an error, run equalheightrows again in 0.25 secs
if(typeof jQuery(this).attr('loaderror') != 'undefined'){
// there isn't an error, it means the image has not completed loading yet
setTimeout(function(){equalHeightRows.exec(opts)}, 250);
}
}
});
}
});
});
}
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment