jquery.syncheight.js

/**
 * syncHeight - jQuery plugin to automagically Snyc the heights of columns
 * Made to seemlessly work with the CCS-Framework YAML (yaml.de)
 * @requires jQuery v1.0.3
 *
 * http://blog.ginader.de/dev/syncheight/
 *
 * Copyright (c) 2007-2009 
 * Dirk Ginader (ginader.de)
 * Dirk Jesse (yaml.de)
 * Dual licensed under the MIT and GPL licenses:
 * http://www.opensource.org/licenses/mit-license.php
 * http://www.gnu.org/licenses/gpl.html
 *
 * Version: 1.2
 *
 * Usage:
 	$(window).load(function(){
		$('p').syncHeight();
	});
 */

(function($) {
    var getHeightProperty = function() {
		var browser_id = 0;
		var property = [
			// To avoid content overflow in synchronised boxes on font scaling, we 
			// use 'min-height' property for modern browsers ...
			['min-height','0px'],
			// and 'height' property for Internet Explorer.
			['height','1%']
		];

		// check for IE6 ...
		if($.browser.msie && $.browser.version < 7){
			browser_id = 1;
		}
        
        return { 'name': property[browser_id][0], 
                 'autoheightVal': property[browser_id][1] };
    };
    
    $.getSyncedHeight = function(selector) {
        var max = 0;
        var heightProperty = getHeightProperty();
		// get maximum element height ...
		$(selector).each(function() {
			// fallback to auto height before height check ...
			$(this).css(heightProperty.name, heightProperty.autoheightVal);
			var val = $(this).height();
			if(val > max){
			   max = val;
			}
		});
        return max;
    };
    
	$.fn.syncHeight = function(config) {
		var defaults = {
			updateOnResize: false,	// re-sync element heights after a browser resize event (useful in flexible layouts)
            height: false
		};
		var options = $.extend(defaults, config);
		
		var e = this;
		
		var max = 0;
        var heightPropertyName = getHeightProperty().name;
		
        if(typeof(options.height) === "number") {
            max = options.height;
        } else {
            max = $.getSyncedHeight(this);
        }
		// set synchronized element height ...
 		$(this).each(function() {
  			$(this).css(heightPropertyName, max+'px');
		});
		
		// optional sync refresh on resize event ...
		if (options.updateOnResize === true) {
			$(window).resize(function(){ 
				$(e).syncHeight();
			});
		}
		return this;
	};	
})(jQuery);