Equal Heights (jQuery)

// Equalise height per row var equalHeights = function( selector ) { var position = 0, rowHeight = 0, row = jQuery(), items = jQuery( selector ), count = items.length; // Remove existing styles items.height('auto'); // Loop through each section items.each(function(i, v){ var this_position = Math.ceil( Math.ceil( jQuery(this).position().top ) / 10) * 10; // New row, update heights if ( this_position != position ) { row.height( rowHeight ); row = jQuery(); rowHeight = 0; position = this_position; } // Add item to row row = row.add( jQuery(this) ); rowHeight = jQuery(this).outerHeight() > rowHeight ? jQuery(this).height() : rowHeight; // Last item, update heights if ( i + 1 === count ) { row.height( rowHeight ); row = jQuery(); rowHeight = 0; } }); }
Simple jQuery script to equalise the height of elements on the same row.

Be the first to comment

You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.