Почему при ресайзе не меняет высоту элемента?

Question

[Dark19]

Написал маленькую функцию, которая должна менять высоту элемента:

function heightTitle(parent, el){
        var height = 0;
        $(parent).find(el).each(function(){
            if($(this).height() > height){
                height = $(this).height();
            }
        });
        $(parent).find(el).height(height);
    }

При обновлении страницы все работает нормально, но когда ещё вешаю на ресайз, то не работает толком, не успевает что ли пройтись по всем элементам? Как написать правильно чтобы работало при ресайзе страницы?

Comments

[iBird Rose]

вот когда то также страдал такой херней) на может мой скрипт тебя спасет) https://github.com/iiiBird/jQuery.equalHeights

Answer 1

[Dark19]

В общем я докопался до истины проблемы. Дело в том, что сначала элементам задалась фиксированная высота при заходе на страницу и все она уже не меняется в зависимости от контента, так как функция написана таким образом, что сравнивает высоты и устанавливает наибольшую, но после захода на страницу высоты установились одинаковые. Соответственно при ресайзе нужно высоте давать 'auto', чтобы она могла пересчитываться вновь по максимальной, но тут тоже не всегда срабатывает этот прием, так как бывает хапается старая высота, то есть не успевает сработать 'height: auto', поэтому ещё нужно ставить таймаут.

function heightTitle(parent, el){
        var height = 0;
        $(parent).find(el).css('height','auto');
        setTimeout(function(){
            $(parent).find(el).each(function(){
                if($(this).height() > height){
                    height = $(this).height();
                }
            });
            $(parent).find(el).height(height);
        },300);
    }

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

Answer 2

[Виталий]

но когда ещё вешаю на ресайз

что значить - вашаю ресайз ?
от того что вы поменял размер окна, не перезагружая страницы - dom не перерисовывается.
Вангую, что функцию не описана в событие window.onresize

Comments

[Dark19]

Вот сама функция:

function heightTitle(parent, el){
        var height = 0;
        $(parent).find(el).each(function(){
            if($(this).height() > height){
                height = $(this).height();
            }
        });
        $(parent).find(el).height(height);
    }

дальше я её вызываю в коде(тут работает):

heightTitle('.blog-result','.blog-preview__title');

дальше вызываю при ресайзе(тут выставляет старую высоту):

$(window).resize(function () {
        heightTitle('.blog-result','.blog-preview__title');
    });

[Виталий]

у вас условие
if($(this).height() > height){
height = $(this).height();
}
при ресайзе false не возвращает ?

Answer 3

[Alexandr Builov]

Как так так...

$(document).ready(function () {
        // при создании страницы
        heightTitle();
        // при изменении размера
        $( window ).resize(function () {
            heightTitle();
        });
    });

Comments

[Dark19]

я так и делаю

[Alexandr Builov]

показывай тогда полную реализацию, может не те параметры передаешь?