Create equal height columns.

marrymi-equal-footer-cols.js

(function ($) {


	/**
	 * This is just a debounce function so that we don't go crazy binding to 'resize'
	 */
	if (typeof debounce !== 'function') {
		function debounce(func, wait, immediate) {
			var timeout;
			return function () {
				var context = this, args = arguments;
				var later = function () {
					timeout = null;
					if (!immediate) func.apply(context, args);
				};
				var callNow = immediate && !timeout;
				clearTimeout(timeout);
				timeout = setTimeout(later, wait);
				if (callNow) func.apply(context, args);
			};
		}
	}

	MARRYMI = {};

	MARRYMI.equalFooterCols = {
		init         : function () {
			var _this = MARRYMI.equalFooterCols;

			/* Adjust to maximum mobile size / the maximum size of "Show these columns as full-width (and don't worry about heights) */
			_this.mobileBreakpoint = 979;

			/* Adjust to proper "row" container selector */
			_this.$columnsContainer = $('.x-colophon.top').find('.x-container');

			/** No use in running this if the columns aren't on the screen */
			if (_this.$columnsContainer.length > 0) {

				//console.log('Setting up');

				/* Adjust to proper "Columns" selector */
				_this.$columns = _this.$columnsContainer.find('.x-column');
				_this.adjustHeights();
				_this.bindEvents();
			}
		},
		bindEvents   : function () {
			var _this = MARRYMI.equalFooterCols;

			var debounceAdjustHeights = debounce(function () {
				_this.adjustHeights();
			}, 150); 
			/* If ever you want it to "react faster than 150ms after someone has stopped resizing their browser, the '150' is what you want to change (it's in milliseconds) */

			window.addEventListener('resize', debounceAdjustHeights);
		},
		adjustHeights: function () {
			var _this = MARRYMI.equalFooterCols,
				currWindowWidth = $(window).width();

			if (currWindowWidth <= _this.mobileBreakpoint) {
				/*  If we're within the "mobile size", we don't want to adjust heights */
				_this.$columns.css('height', 'auto');
			} else {
				/* We have multiple columns side-by-side at this window width, let's adjust their heights */

				var maxFoundHeight = 0;

				_this.$columns.css('height', 'auto');

				/* Loop through all the columns and figure out which one is the highest */
				for (var i = 0; i < _this.$columns.length; i++) {
					var $currCol = _this.$columns.eq(i),
						currColHeight = $currCol.outerHeight();

					maxFoundHeight = maxFoundHeight < currColHeight ? currColHeight : maxFoundHeight;
				}


				// console.log('Adjusting heights', _this.$columnsContainer, _this.$columns, _this.mobileBreakpoint, currWindowWidth, maxFoundHeight);

				/* Set the height of all the columns to the highest one */
				_this.$columns.outerHeight(maxFoundHeight);
			}

		}
	};


	$(document).ready(function () {
		/* Release the Krakken! */
		MARRYMI.equalFooterCols.init();
	});


})(jQuery);