Функция огня при изменении окна

Question

У меня есть функция, которая изменяет размер/выравнивает элементы так, чтобы они были одинакового размера. Я называю эту функцию в DOM Ready, и я хочу называть ее также и размером окна, но, похоже, она не срабатывает. console.log срабатывает, как и следовало ожидать, но не функция equalize().

// Equalize 
var equalize = function(){ 
    var maxHeight = 0; 
    $('.equalize').each(function(){ 
    if ($(this).outerHeight() > maxHeight) { maxHeight = $(this).outerHeight(); } 
    }); 

    $('.equalize').outerHeight(maxHeight); 
}; 


jQuery(document).ready(function($) { 

    // fire equalize 
    equalize(); 

    $(window).resize(function(){ 
    equalize(); 
    console.log('[Log] Resized'); 
    }).trigger('resize'); 

}); 

Я пропустил что-то здесь, когда речь идет о стрельбе на экране при изменении размера окна? Благодаря!

Answer 1

Для изменения размера элемента, чтобы он соответствовал содержимому, должен быть установлен стиль overflow : auto, иначе элемент просто сохранит его размер и переполнение содержимого.

Кроме того, когда вы явно установить outerHeight, элементы останавливаются автоматически изменение размера по размеру содержимого, высота по умолчанию auto должна быть применена, чтобы обмануть его в изменении размеров до элементов высот сравнивается

var equalize = function() { 
    var max = Math.max.apply(null, 
       $('.equalize').css('height', 'auto').map(function() { 
        return $(this).outerHeight(); 
       }) 
      ); 
    $('.equalize').outerHeight(max); 
}; 


jQuery(document).ready(function($) { 
    $(window).resize(function() { 
     equalize(); 
    }).trigger('resize'); 
}); 

div{ 
    display: inline-block; 
    position: relative; 
    width: 50%; 
    float: left; 
    background: yellow; 
} 

.other{ 
    background: salmon; 
    overflow:auto; 
} 

FIDDLE

Answer 2

Избавьтесь от курок, если это поможет. В соответствии с jQuery doc триггер срабатывает ровно (вызывает функцию)

Я не думаю, что имеет смысл вызвать функцию после вызова функции, затем запустить ее снова, тогда это должно продолжаться вечно ... может быть причиной проблемы.

// Equalize 
var equalize = function(){ 
    var maxHeight = 0; 
    $('.equalize').each(function(){ 
    if ($(this).outerHeight() > maxHeight) { maxHeight = $(this).outerHeight(); } 
    }); 

    $('.equalize').outerHeight(maxHeight); 
}; 


jQuery(document).ready(function($) { 

    // fire equalize 
    equalize(); 

    $(window).resize(function(){ 
    equalize(); 
    console.log('[Log] Resized'); 
    }); // got rid of the trigger...not needed 

}); 

Answer 3

Это немного трудно сказать, не несколько более подробно о том, что происходит в вашем проекте, но это работает для меня (по крайней мере, чтобы уравнять обстрелять размеров окна):

var equalize = function(){ 
    var maxHeight = 0; 
    $('.equalize').each(function(){ 
    if ($(this).outerHeight() > maxHeight) { maxHeight = $(this).outerHeight(); } 
    }); 

    $('.equalize').outerHeight(maxHeight); 
}; 


jQuery(document).ready(function($) { 
    equalize(); 

    $(window).resize(function(){ 
    equalize(); 
    console.log('[Log] Resized'); 
    }) 

});