Home » Use jQuery to match height or width of elements (equalize) to make them all the same uniform height or width

Use jQuery to match height or width of elements (equalize) to make them all the same uniform height or width

Use jQuery to match height or width of elements (equalize) to make them all the same uniform height or width with this simple snippet. This will equalize/normalize the height or width of any elements in your selector with the tallest or widest element in the stack.

This can be used for any element and I’m putting this in the window load event in the event that there are images or other elements that require load time.

You could change the above example to work with only widths as well, or you could use both at the same time like so:

Here’s a working example of the second one

Alternatively, you can use jQuery to bind to the load event of the elements you’re equalizing rather than waiting for the entire window to load. You can just replace $(window) with $(‘.equalize’) in the code above and that should, in theory, wait for only the elements with class=”equalize” to load instead of the entire window.

If you have any questions, comments, or concerns, don’t forget to comment!

Leave a Reply

Your email address will not be published. Required fields are marked *