Logo icon cloodo.com
Logo cloodo.com

Menu

icon search
Workspace
  • Login
cloodo - project Listing - Equal Height Columns
Equal Height Columns

Equal Height Columns

Public By Cloodo
Rating Cloodo

40 Reviews - Trustscore 4.93

Project In Equal Height Columns

Like this plugin? Please consider leaving a 5-star review.

Equal Height Columns lets you easily equalize the height of various columns and elements.

Features

  • Target unlimited elements and element groups
  • Specify simple CSS/jQuery selectors to target elements
  • Specify breakpoint to kick in only at certain screen sizes
  • Easy to use admin interface
  • Heights are equalized immediately after the page has loaded
  • Fully responsive (automatically updates on resize and orientationchange events)
  • Works on mobile devices
  • Works across all modern browsers (including IE8)
  • Comes with custom event listener to manually trigger
  • Super small – 8kB jQuery file size
  • Trigger custom ‘equalheight’ event to force resize

Instructions

  1. Navigate to Settings > Equal Height Columns in the WordPress admin.
  2. Enter a selector and breakpoint for the first column group.
  3. Add/remove column groups by clicking the “+ Add More” and “Remove” buttons.

Advanced

Want to trigger the equalizing of the heights manually? No problem. You can skip entering a selector on the settings page and call the jQuery script yourself using one of two functions:

jQuery( '.selector' ).initEqualHeights();

// Or

jQuery( '.selector' ).equalizeTheHeights();

The difference between these two functions is simply that initEqualHeights() will set up all the events for recalculating the heights when the window is resized or the global equalheights event is triggered, but equalizeTheHeights() will simply equalize the heights without involving any events.

Both functions take three optional arguments, the minimum height (number of pixels), maximum height, and the breakpoint (below which the heights will revert to their original size):

jQuery( '.selector' ).initEqualHeights( minHeight, maxHeight, breakPoint );

So an example might look like this:

jQuery( '.selector' ).initEqualHeights( 200, 500, 768 );

When entering a selector on the settings page or using the initEqualHeights() method this plugin also adds an event ‘equalheights’ to the window, allowing you to easily trigger the equalizing manually. This is useful if you have added new items to the page after it loads via AJAX. You can trigger the event like this:

jQuery( window ).trigger( 'equalheights' );

Another option for controlling which elements get equalized is the equal_height_columns_elements filter. This filter operates on the array of data that gets passed to the JS right before it is passed. This allows for developers to specify selectors that can’t be deleted from the settings page, and for programmaticly building selectors based on dynamic data. Here’s an example of how the filter can be used:

add_filter( 'equal_height_columns_elements', 'custom_ehc_elements' );
function custom_ehc_elements( $elements ) {

    $elements['element-groups']['custom'] = array(
        'selector'   => '.ehc-target', // Selector goes here.
        'breakpoint' => '768',
    );

    return $elements;
}

The keys on the element-groups array used by selectors entered on the settings page will come in as numbered indexes, so to avoid collision it’s best to use named keys for any custom selectors (we’re using ‘custom’ in the example above, but any unique string will work).

This plugin is on Github and pull requests are always welcome.

READ MORE

Screenshots for Equal Height Columns

screenshots

Reviews 40

Filter by:

Excellent
98%
Great
0%
Average
0%
Poor
3%
Bad
0%

FAQ for Equal Height Columns

Projects Statistics

License

Free

Latest update

2022-04-01

Platform

PHP

OS

Plugin

Reviews

40

About Equal Height Columns Project on Cloodo

Loading...
WR
Rating Cloodo

Latest client reviews for Equal Height Columns

Thankyou!!! This issue kept cropping up for me. Spent ages trying out different solutions on various builds. This plugin works a treat – one-click set up.

2022-02-11 at 19:36:56

Looked for hundreds of blogs on css, jquery etc for getting all the columns of same height but failed until I stumbled across this. thank you for the great work!

2022-02-11 at 19:35:02

Thank you very much for the developed Equal Height Columns plugin…

2022-02-11 at 19:33:26

Logo cloodo.com

Cloodo helps to accellerate Digital Transformation for any business with Know-How Agencies supported by Smart Project Management Apps and Secured Payment for Final Result

Cloodo is a trademark of Cloodo Inc, an Atlas company with registered address at Suite 206, 651 N Broad St , MiddleTown, NewsCattle, Delaware, US

Cloodo is also a sister company with Netbase JSC. whom Development Center at Suite 105, M3M4 Building, 91 Nguyen Chi Thanh, Ha Noi, Viet Nam

CLOODO

Agency

Project

Services

Licenses And Terms

Privacy Policy

Browse All Directories Agency

Browse All Directories Project

Get it on Google Play
Logo icon cloodo.com

Cloodo Inc. Copyright ©2011-2021 All Rights Reserved.

SkypeTwitterFacebookYoutube

Developed by Netbase JSC