jQuery: can't work out how to implement equal column height script

Question

Just a little edit, in case it helps anyone out who happens to stumble upon this. The answer given worked perfectly until I added some images. The images I added have no set width or height and have max-width 100% css applied to them so they scale within a fluid grid. Problem seems to be chrome was not adding the height of the images to the total column heights so the columns were being rendered to short ( minus the images height )

Changing the line of code:

$(document).ready(function(){

to

$(window).load(function() {

Seems to fix the problem.

------------ original question ----------------

I'm trying to implement this jquery code I came across here; I can't for the life of me figure out how to get it working though.

I've included a link to jQuery in my document and tried various options but I can't get it working.

My page is a html5 2 column layout, with the 2 columns set with % widths and floated. The content of left column is long so I would like them to be equal.

I'm guessing I need to add the class unevenheights to a div. I've added it to each column and tried it on the wrapper div with no luck.

I tried copying to first section to a seperate file and saving as a .js, then linking to that and using the $('div.unevenheights').setAllToMaxHeight() part within <script> tags in the page head but no joy.

Could someone please explain in beginner terms how I should implement it?

$.fn.setAllToMaxHeight = function(){
return this.height( Math.max.apply(this, $.map( this , function(e){ return $(e).height() }) ) );
}

// usage: $('div.unevenheights').setAllToMaxHeight()

vzwick · Accepted Answer · 2012-06-22 07:24:45Z

1

a) Wrap your call in a $(document).ready() callback like this:

$(document).ready(function(){
    $.fn.setAllToMaxHeight = function(){
        return this.height(Math.max.apply(this, $.map(this, function(e){
            return $(e).height()
        })));
    };

    $('div.unevenheights').setAllToMaxHeight();
});

Working Fiddle

b) In case that doesn't work out, please post your html and js here or — even better — as a jsFiddle.

edited Jun 22, 2012 at 7:24

answered Jun 22, 2012 at 7:18

vzwick

11.1k5 gold badges47 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

jQuery: can't work out how to implement equal column height script

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related