coffeehope coffeehope - 2 months ago 6
Javascript Question

jQuery Set Height of Element to Highest in the group

I'm trying to work with jQuery to find the highest element from the first 3 elements within a div then set all 3 the same height then check the next 3 and set them.. etc.. if my window width == X, also if the window width is < X then find the highest 2 elements then set them, then the next 2 then the next 2 etc.

This is my current code which works for all the elements, I would just like to to go through the elements in groups (2's and 3's) and set the height for that group based on the result and window size.

// Find highest element and set all the elements to this height.
$(document).ready(function () {

// Set options
var height = 0;
var element_search = "#cat_product_list #cat_list";
var element_set = "#cat_product_list #cat_list";

// Search through the elements set and see which is the highest.
$(element_search).each(function () {
if (height < $(this).height()) height = $(this).height();
//debug_(height,1);
});

// Set the height for the element(s if more than one).
$(element_set).each(function () {
$(element_set).css("height", (height+40) + "px");
});
});


Any help is much appreciated :)

Answer

I've sorted this now, Check out my Fiddle:

http://jsfiddle.net/rhope/zCdnV/

// Find highest element and set all the elements to this height.
$(document).ready(function () {

// If you windows width is less than this then do the following
var windowWidth = $(window).width();
if (windowWidth < 2000) {
    var i = 0, 
        quotes = $("div#cat_product_list").children(),
        group;

    while ((group = quotes.slice(i, i += 2)).length) {
        group.wrapAll('<div class="productWrap"></div>');
    }
}

// Find the width of the window
var windowwidth = $(window).width();
//debug_(windowwidth);

// Set options
var height = 0;
var element_wrap = ".productWrap";
var element_search = ".cat_list";

// Search through the elements set and see which is the highest.
$(element_wrap).each(function () {
    $(this).find(element_search).each(function () {
        if (height < $(this).height()) height = $(this).height();
    });

    //alert("Block Height: " +height);

    // Set the height for the element wrap.
    $(this).css("height", (height) + "px");

    // Unset height
    height = 0;
});

});
Comments