Created
November 4, 2013 10:40
-
-
Save amnuts/7300867 to your computer and use it in GitHub Desktop.
A jQuery plug-in to make elements the same height (by max height or min height)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* Same Height, jQuery plug-in. | |
* | |
* This plug-in allows you to automatically have all of the elements marked | |
* with a particular class to be the same height, either by smallest or | |
* largest. | |
* | |
* By default, 'samemaxheight' and 'sameminheight' will be used. | |
* | |
* Examples of use: | |
* | |
* $(function() { | |
* $('body').sameheight(); | |
* }); | |
* | |
* $(function() { | |
* $('#mainContent').sameheight({ | |
* max: 'mymaxclass', | |
* min: 'myminclass' | |
* }); | |
* }); | |
* | |
* $.fn.sameheight.defaults.max = 'mymaxclass'; | |
* $.fn.sameheight.defaults.min = 'myminclass'; | |
* $('body').sameheight(); | |
* | |
* @copyright Copyright (c) 2013 Andrew Collington <andy@amnuts.com> | |
*/ | |
(function($) { | |
$.fn.sameheight = function(userOptions) { | |
var options = $.extend({}, $.fn.sameheight.defaults, userOptions); | |
if ($('.' + options.max).length) { | |
var maxH = 0; | |
$('.' + options.max).each(function(){ | |
var to = $(this).css('overflow'); | |
var th = $(this).css('height'); | |
$(this).css({'overflow':'auto','height':'auto'}); | |
if ((($(this).innerHeight() > maxH) || !maxH)) { | |
maxH = $(this).innerHeight(); | |
} | |
}); | |
$('.' + options.max).each(function(){ | |
$(this).css({ | |
'height': maxH + 'px', | |
'overflow':'auto' | |
}); | |
}); | |
} | |
if ($('.' + options.min).length) { | |
var minH = 0; | |
$('.' + options.min).each(function(){ | |
var to = $(this).css('overflow'); | |
var th = $(this).css('height'); | |
$(this).css({'overflow':'auto','height':'auto'}); | |
if ((($(this).innerHeight() < minH) || !minH)) { | |
minH = $(this).innerHeight(); | |
} | |
}); | |
$('.' + options.min).each(function(){ | |
$(this).css({ | |
'height': minH + 'px', | |
'overflow':'auto' | |
}); | |
}); | |
} | |
}; | |
$.fn.sameheight.defaults = { | |
max: 'samemaxheight', | |
min: 'sameminheight' | |
}; | |
})(jQuery); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment