0

I'm running a jQuery script to set equal height divs in a row across multiple rows.

Here's a link to an extract of the code I'm using http://jsfiddle.net/F8QHd/2/

For the script I've used the technique in this post at CSS Tricks http://css-tricks.com/equal-height-blocks-in-rows/

Can anyone tell me how to amend the script so that as the window is resized it still works? At the moment, it works on page load but I don't know how to trigger it based on window resize. The script uses $(window).resize(function() {} ); so I'm not sure why this doesn't work?

TylerH
  • 20,799
  • 66
  • 75
  • 101
jasonbradberry
  • 853
  • 2
  • 17
  • 30

1 Answers1

-1

I can't see that it doesn't work. You would set up resize then trigger it so that it works on load without duplicating that instruction.

$(window).resize(function() {
    columnConform();
}).trigger('resize');

Just one note - equalising the elements causes the window to change size and you're going to hit problems when it recurses a few times before it settles. I solved this by adding a timeout on the equal heights function.

I already wrote a similar extension to jquery. If you're interested it's here Equal Height Rows for Fluid Width Elements

Community
  • 1
  • 1
Popnoodles
  • 28,090
  • 2
  • 45
  • 53
  • Thanks - I tried changing the line in the jFiddle as you suggested (see http://jsfiddle.net/F8QHd/3/) and the text still breaks out of the first column when the window size is reduced. Have I misunderstood? – jasonbradberry Feb 14 '13 at 14:43
  • Oh i see, your heights aren't resetting. I would try setting them to auto before finding the tallest. – Popnoodles Feb 14 '13 at 17:30