Получить высоту скрытого жидкого элемента при изменении размера окна с помощью jQuery

Я создаю блог WordPress с высоким содержанием контента, с боковой панелью статей, которая отображает отрывок из этой статьи при наведении курсора. Я использую jQuery, чтобы получить высоту элемента (чтобы избежать распространенной проблемы прыжков jQuery с помощью slideDown), а затем скрываю элемент с помощью этого кода:

function articleHeight() {
    $(".article").each(function() {
            $(this).css("height", $(this).height());
    });
}

articleHeight();

а затем следующий код, чтобы ПОПРОБОВАТЬ и получить новую высоту при изменении размера окна:

$(window).resize(function() {
    articleHeight();
});

Первая часть работает отлично, но она не будет пересчитывать размер, из-за чего либо будет предоставлено слишком много места, либо отрывок будет вырезан при изменении размера.

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

Любая идея по этому поводу была бы чрезвычайно полезной. Огромное спасибо.


wordpress jquery resize height fluid-layout
person Alexander    schedule 04.12.2011    source источник

Ответы (3)


arrow_upward
0
arrow_downward

Есть ли причина придавать $(this) ту же высоту, что и раньше?

$(this).css("height", $(this).height() );

Вы должны сравнить его с $(window).height() для нового размера, а затем использовать математику, чтобы отличить его.

Например, вот так:

$(this).css("height", $(window).height() - 200 );

Вы бы изменили 200 на то, что подходит для вашей страницы.

person Control Freak    schedule 04.12.2011

arrow_upward
0
arrow_downward

Вы можете обнаружить, что для вас работает outerHeight, но я бы предпочел поиграться со свойством display. Встроенный блок может исправить это за вас.

Вот документация по jquery outerHeight http://api.jquery.com/outerHeight/

person squarelogic.hayden    schedule 04.12.2011

arrow_upward
0
arrow_downward

Я не совсем уверен, как будет работать пользовательский интерфейс, но я создал jsFiddle, который вы можете использовать для решения своей проблемы, надеюсь:

http://jsfiddle.net/RqqpK/1/

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

Конечно, лучше использовать addClass (), чем css ({height: ...}), и есть другие улучшения, от которых вы выиграете, когда ваш код станет больше, но это только начало. Удачи

person Phortuin    schedule 04.12.2011