Skip to content

Instantly share code, notes, and snippets.

@danrcoull
Last active November 22, 2016 16:16
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save danrcoull/3e177da31bbff5c353d842d538cc81a7 to your computer and use it in GitHub Desktop.
Save danrcoull/3e177da31bbff5c353d842d538cc81a7 to your computer and use it in GitHub Desktop.
Bootstrap Equalizer to reset the size of elements responsivly
/**
* Equalizer Plugin
* Author: Daniel Coull <d.coull@suttonsilver.co.uk>
* Setup For bootstrap and simple, just pass an id or class to init.
* Works great with catalog names, responsive.
*/
var equalizer = {
window: jQuery(window),
element: null,
bp: {
xs: 320,
sm: 768,
md: 992,
lg: 1200
},
init: function (element) {
//set the initial element
equalizer.setElement(element);
//set the height on load
equalizer.setHeight();
//attach resize event
equalizer.window.on('resize',function(){
equalizer.resize()
});
},
getHeights: function () {
return equalizer.element.map(function () {
return jQuery(this).height();
}).get();
},
setHeight: function () {
//clear current set inline height
equalizer.element.css("height", "");
//get the max height
maxHeight = Math.max.apply(Math, equalizer.getHeights());
//set the new height
equalizer.element.height(maxHeight + "px");
},
setElement: function (element) {
//declare the jquery element from class or id
equalizer.element = jQuery(element);
},
resize: function () {
width = equalizer.window.width();
console.log(width);
//debounce so we dont run to often
setTimeout(function() {
//TODO: intergrate breakpoints
equalizer.setHeight();
},2000);
}
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment