Equal Height Blocks in Rows

[Pithdog]

I’ve been using the code from the example for the tutorial “Equal Height Blocks in Rows”. It works fantastic, except for one thing.

When I resize the browser, the heights of the boxes aren’t recalculating and resizing the boxes, they’re just retaining their original value.

I even tested that the resize event was working and firing, by removing all other event triggers (onLoad, document ready, etc) and just using the resize. When the page loaded, all the items were not the same height, but the first resize event that triggered fixed them all up, but then didn’t proceed to continually fix them like I hope.

Is this not part of the script? I’d like it so that when the user resizes the browser, it calculates it either after they’ve stopped resizing, or during.

Thanks :D

[DanaB]

Well, Chris’ demo is working for me in the latest version of Firefox. Therefore you need to give us some more information. Set up a jsfiddle with your code and let us know what browser you are using.

[Mottie]

Hi Pithdog!

I actually turned that code into a plugin called Equalizer. I’m pretty sure (it’s been a while since I looked at it) that I fixed the resize problems.

[Pithdog]

Mottie you legend! Works exactly as I need it to in your example, I’ll try it out tonight and see if it works in my production :D

DanaB: In future I’ll provide a jsfiddle :)

[Pithdog]

Is there an easy way to adapt it so that if an element already has an equalizer-inner within it, to not add another one?

Also is it easy to make this script work with and onclick event? Like, onclick resize columns?

[Mottie]

Hi Pithdog,

What do you mean by adding another one? Are you calling the plugin more than once? If you need to re-adjust the columns using an onclick then call the update function like this:

$('body').data('Equalizer').equalz();

[Pithdog]

I was trying to call it multiple times. I have a button which changes the class on the container of the columns; so they all get different heights and widths etc. So I needed to recall the function when the button was clicked, but the update function would work better. I’ll try it out soon!

[Mottie]

Actually, I just made a lot of changes to the plugin last night. So now to update, you can just call the plugin again (new options will be ignored) or use the update method (renamed from “equalz” to “update”) and saved the data to the wrapper element instead of the body:

// old format was $('.wrapper > div').equalizer();

// new format moves the columns into an option

$('.wrapper').equalizer({ columns: "> div" });

To update use:

$('.wrapper').equalizer();

Or use

$('.wrapper').data('equalizer').update();

* Please note the new format and that “equalizer” is no longer capitalized.

[Pithdog]

You’re amazing! It’s as if my every wish is coming true in this plugin :) thanks for your continuing work, everyone creating responsive websites with columns needs to know about this :)

[Author]

Posts