equalHeights Jquery

379

07 октября 2017, 20:36

Ребят, есть вот такой плагин, может кто подскажет, как сделать проверку, чтобы при ресайзе окна, когда разрешение будет меньше 767px, он отключался ? буду очень признателен

(function($) {
$.fn.equalHeights = function() {
    var maxHeight = 0,
        $this = $(this);
    $this.each( function() {
        var height = $(this).innerHeight();
        if ( height > maxHeight ) { maxHeight = height; }
    });
    return $this.css('height', maxHeight);
};
// auto-initialize plugin
$('[data-equal]').each(function(){
    var $this = $(this),
        target = $this.data('equal');
    $this.find(target).equalHeights();
});
 })(jQuery);

Answer 1

Нужно подписаться на событие resize и сбрасывать установленную высоту если ширина окна меньше необходимой.

    (function ($, window, document, undefined) { 
    var equalizer = function (elements, options) { 
        elements.height('auto'); 
        if (typeof options.breakPoint === 'number' && (window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth) <= options.breakPoint) { 
            return; 
        } 
        var maxHeight = 0; 
        elements.each(function () { 
            var height = $(this).innerHeight(); 
 
            if (height > maxHeight) { maxHeight = height; } 
        }); 
        return elements.height(maxHeight); 
    } 
 
    $.fn.equalHeights = function (options) { 
        var elements = $(this); 
 
        $(window).on('resize', function () { 
            equalizer(elements, options); 
        }); 
 
        return equalizer(elements, options); 
    }; 
 
    // auto-initialize plugin 
    $('[data-equal]').each(function () { 
        var $this = $(this); 
        var target = $this.data('equal'); 
        var breakPoint = $this.data('equal-breakpoint') 
        $this.find(target).equalHeights({ 
            breakPoint: breakPoint 
        }); 
    }); 
})(jQuery, window, document);

.inner { 
  border: 1px solid red; 
  width: 100px; 
  float: left; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div data-equal=".inner" data-equal-breakpoint="767"> 
  <div class="inner">123</div> 
  <div class="inner">345<br>567</div> 
</div>