Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
<!-- Requires Spacing 0.9 or GeneratePress 1.1.10 -->
<style>
.inside-left-sidebar,
.inside-right-sidebar {
background: #FFF;
}
</style>
<script type="text/javascript">
(function($) {
$.fn.equalHeightColumns = function(options) {
defaults = {
minWidth: -1, // Won't resize unless window is wider than this value
maxWidth: 99999, // Won't resize unless window is narrower than this value
setHeightOn: 'min-height' // The CSS attribute on which the equal height is set. Usually height or min-height
};
var $this = $(this); // store the object
options = $.extend({}, defaults, options); // merge options
// Recalculate the distance to the top of the element to keep it centered
var resizeHeight = function() {
// Get window width
var windowWidth = $(window).width();
// Check to see if the current browser width falls within the set minWidth and maxWidth
if (options.minWidth < windowWidth && options.maxWidth > windowWidth) {
var height = 0;
var highest = 0;
// Reset heights
$this.css(options.setHeightOn, 0);
// Figure out the highest element
$this.each(function() {
height = $(this).outerHeight();
if (height > highest) {
highest = height;
}
});
// Set that height on the element
$this.css(options.setHeightOn, highest);
} else {
// Add check so this doesn't have to happen everytime
$this.css(options.setHeightOn, 0);
}
};
// Call once to set initially
resizeHeight();
// Call on resize. Opera debounces their resize by default.
$(window).resize(resizeHeight);
// Also check if any images are present and recalculate when they load
// there might be an optimization opportunity here
$this.find('img').load(resizeHeight);
// If afterLoading is defined, add a load event to the selector
if (typeof options.afterLoading !== 'undefined') {
$this.find(options.afterLoading).load(resizeHeight);
}
// If afterTimeout is defined use it a the timeout value
if (typeof options.afterTimeout !== 'undefined') {
setTimeout(function() {
resizeHeight();
// check afterLoading again, to make sure that dynamically added nodes are present
if (typeof options.afterLoading !== 'undefined') {
$this.find(options.afterLoading).load(resizeHeight);
}
}, options.afterTimeout);
}
};
jQuery(window).load(function($) {
var columns = jQuery(".site-main, .inside-left-sidebar, .inside-right-sidebar");
jQuery(columns).equalHeightColumns({
minWidth: 960,
afterLoading: 'iframe, .facebook',
afterTimeout: 800
});
});
})(jQuery);
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment