Question

hey guys,
i did the following function in order to have the same height for specific elements on my webpage.

    var max_height = 0;
    function widgetsSameHeight( elements ) {
        elements.each(function(){
             if($(this).height() > max_height){
                max_height = $(this).height();   
            }
        });

        elements.height(max_height);
    }

    widgetsSameHeight( $('#group1 .widget-container') );

However if I apply this function to two groups of elements of the same page ALL elements get the same height. However each group should have the same max-height. e.g.

widgetsSameHeight( $('#group1 .widget-container') );
widgetsSameHeight( $('#group2 .widget-container') );

In this case the highest element sets the height for each element in group1 and group2. However I need to have all elements in group1 to have the height of its highest element. And the same height for all elements in group2 depending on the highest element in group2.

I think you know what I mean, my explanation is rather bad 🙂

any idea how I could solve that or what I’m doing wrong here?

Answer 1

If you want all of them to share the same maxheight, then you can do this:

widgetsSameHeight( $('#group1 .widget-container,#group2 .widget-container') );

If you want them to only have the same height within their group, you should move the variable declaration of max_height into the function.