Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- (function($) {
- /**
- * .matchHeight()
- * - match heights of multiple columns that use css layout with floating elements
- */
- $.fn.matchHeight = function(options) {
- // set the containing element and set elements used as columns
- var defaults = {
- container : '.main',
- columns : 'div',
- excluded : '.dontChangeThis, .dontChangeThat',
- fixed : 200
- };
- var opts = $.extend(defaults, options);
- return this.each(function() {
- var _ = { self : $(this) };
- _.px = {};
- _.cols = $(opts.container+' > '+opts.columns);
- _.cols.each(function(index) {
- _.px.index = $(this).height();
- if ($(opts.excluded).length>0) {
- _.colheight = opts.fixed;
- return;
- } else {
- if (index < 1) {
- _.colheight = _.px.index;
- } else {
- if (_.px.index > _.colheight) {
- _.colheight = _.px.index;
- }
- }
- }
- }).each(function(index) {
- $(this).css({ height : _.colheight });
- });
- });
- };
- })(jQuery);
- //
- // Call the plugin on a containing layout element with multiple columns
- //
- /**
- * Stuff to do as soon as the DOM is ready
- * - enable plugin behavior(s)
- */
- $(function() {
- $('.main-container')matchHeight({
- container : '.main',
- columns : 'div.cols',
- excluded : 'body.page2, div.noColumns',
- fixed : 200
- });
- // or us the defaults
- // $('.container').matchHeight();
- });
Add Comment
Please, Sign In to add comment