Skip to content

Instantly share code, notes, and snippets.

@aliboy08
Created October 24, 2018 02:34
Show Gist options
  • Save aliboy08/1b98c2b2c27cda0706cfc53007368249 to your computer and use it in GitHub Desktop.
Save aliboy08/1b98c2b2c27cda0706cfc53007368249 to your computer and use it in GitHub Desktop.
JQuery plugin for setting elements to have equal heights
/*! FF Equal Heights Plugin */
$.fn.ff_equal_heights = function( options ) {
if( !$(this).length ) return;
var $this = this;
var settings = $.extend({
enable_on_resize: true,
disable_on_width: false,
}, options );
// Disable on window width
if( settings.disable_on_width ) {
if( window.innerWidth <= settings.disable_on_width ) {
$this.css("min-height", "initial");
return $this;
}
}
// Initialize
ff_set_equal_heights($this);
if( settings.enable_on_resize ) {
// On resize
$(window).resize(function() {
// Disable on window width
if( settings.disable_on_width ) {
if( window.innerWidth <= settings.disable_on_width ) {
$this.css("min-height", "initial");
return $this;
}
}
ff_set_equal_heights($this);
});
}
function ff_set_equal_heights(el){
el.css("min-height", "initial"); // reset
var temp_height = 0;
el.each(function(){
if( temp_height < $(this).outerHeight(true) ) {
temp_height = $(this).outerHeight(true);
}
});
el.css("min-height", temp_height + "px");
}
return $this;
}
@aliboy08
Copy link
Author

Usage:
$('.half-box').ff_equal_heights();

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment