🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

Equalize column heights across multiple rows.Features:Equalize column heights across multiple rows.Resize column heights when the page is resized. Can be disabled for fixed width layouts.Choose between height (default), outer height or inner height.Set a minimum or maximum height of a column, with an css class added when content overflows for additional styling.Set a breakpoint to disable the Equalizer plugin when the wrapping element size is below a set width.

Plugins

Documentation

Features (Demo)

  • Equalize column heights across multiple rows (originally from this post)
  • Resize column heights when the page is resized. Can be disabled for fixed width layouts.
  • Choose between height (default), outer height or inner height.
  • Set a minimum or maximum height of a column, with an css class added when content overflows for additional styling.
  • Set a breakpoint to disable the Equalizer plugin when the wrapping element size is below a set width.

Documentation

Change Log

See the change log for a complete list of changes.

Version 1.2.5 (10/4/2013)

  • I apparently just closed issue #21... typo fix!

Version 1.2.4 (10/4/2013)

  • Parsing of jQuery version is now properly done internally. Fixes issue #2.

Version 1.2.3 (1/18/2013)

  • Updated to use jQuery 1.9.
  • Tested successfully with jQuery 2.0 beta 1 (not in IE).
  • More tweaks to the manifest file to get it to register with the plugin site.

Version 1.2.2 (1/18/2013)

  • Another attempt to register the plugin - version bump needed.

Version 1.2.1 (1/18/2013)

Version 1.2 (1/3/2013)

  • Updated demos to use jQuery 1.8+. Also, satisfactorily tested the demos with jQuery 1.9 beta 1.
  • Added breakpoint and disabled options:
    • If the breakpoint option contains a value, in pixels, the Equalizer plugin will disable itself when the main wrapper element width is below this value; it's the .wrapper in the setup examples.
    • When the breakpoint is reached, the class name from the disabled option is applied to the main wrapper element.
    • Added an adaptive demo to show how this works together.
    • If the main wrapper element is the browser window, then you can use media queries to change the style of the columns inside the wrapper.
    • Enhancement request from issue #1.
  • Added a method to enable or disable the Equalizer plugin.
    • To completely disable or re-enable the Equalizer plugin, trigger the desired event on the wrapper element:

      // to disable trigger disable.equalizer $('.wrapper').trigger('disable.equalizer'); // use enable.equalizer to make it work again $('.wrapper').trigger('enable.equalizer');

Version 1.1 (1/12/2012)

  • Big change made in the plugin structure to better allow multiple instances.
    • Changed how the plugin is called. Call the plugin on the wrapper with the jQuery selector within the wrapper. The elements selected by the columns option will be equalized.

      ```javascript // old format = $('.wrapper > div') // new format below $('.wrapper').equalizer({ 	// find divs that are the immediate children of the wrapper 	columns : '> div' }); ``` 
    • Added a method to resize the columns

      ```javascript // initialize the plugin $('.wrapper').equalizer({ resizable: false });  // update column heights on button click $('button').click(function(){   // use the data object   $('.wrapper').data('Equalizer').update();   // or call the plugin again, any new options will be ignored   // $('.wrapper').equalizer(); }); ``` 

You May Also Like