Bootstrap 3 Equal Height Columns with jQuery need

Question

I've been using this bit (jQuery equal height responsive div rows) of jQuery for equal heights and it works very well, but with BS2 and BS3 if the same pattern is used, it doesn't scan the row to make the equal heights, it scans the page itself and then all patterns (row > col--) on the same page get the height of the tallest on the page. That's not the desired implementation.

http://jsbin.com/aVavuLeW/14/

This above JSBin has an example of it working with BS3 columns (a copy of it). You can't have relative position on the columns at the stacking point, so these have been copied for the purpose of this Bin. As you can see, if you create a different class on each row (.foo and .foo2 in this example) and then the columns behave but if you decide to use the same pattern the height of the tallest on the page will take over.

Question: How to fix the problem of when the same pattern is used it calculates based on the page and not the row?

Thanks!!!

Answer 1

If i understood correctly that you want each row to have the same height, based on tallest div, while each row has the same class name values e.g. foo then the following code does that. The idea is to check the parent of the elements that are resized and if the parent has changed i.e. when resizing divs of the second div.row, then apply changes and reset the values of max height. In order to work for the specified parent a parameter has been introduced to specify the parent selector. http://jsbin.com/uBeQERiJ/1

$.fn.eqHeights = function(options) {

    var defaults = {  
        child: false ,
      parentSelector:null
    };  
    var options = $.extend(defaults, options); 

    var el = $(this);
    if (el.length > 0 && !el.data('eqHeights')) {
        $(window).bind('resize.eqHeights', function() {
            el.eqHeights();
        });
        el.data('eqHeights', true);
    }

    if( options.child && options.child.length > 0 ){
        var elmtns = $(options.child, this);
    } else {
        var elmtns = $(this).children();
    }

    var prevTop = 0;
    var max_height = 0;
    var elements = [];
    var parentEl;
    elmtns.height('auto').each(function() {

      if(options.parentSelector && parentEl !== $(this).parents(options.parentSelector).get(0)){
        $(elements).height(max_height);
        max_height = 0;
        prevTop = 0;
        elements=[];
        parentEl = $(this).parents(options.parentSelector).get(0);
      }

        var thisTop = this.offsetTop;

        if (prevTop > 0 && prevTop != thisTop) {
            $(elements).height(max_height);
            max_height = $(this).height();
            elements = [];
        }
        max_height = Math.max(max_height, $(this).height());

        prevTop = this.offsetTop;
        elements.push(this);
    });

    $(elements).height(max_height);
};

// run on load so it gets the size:
// can't have the same pattern for some reason or it scans the page and makes all the same height. Each row should be separate but it doesn't work that way.
$(window).load(function() {

//$('[class*="eq-"]').eqHeights();
  $('.foo [class*="eq-"]').eqHeights({parentSelector:'.foo'});
/*$('.foo2 [class*="eq-"]').eqHeights();*/

  });