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

Question

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

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

articleHeight();

, а затем следующий код для TRY и получения новой высоты при изменении размера окна:

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

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

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

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

Answer 1

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

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

Answer 2

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

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

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

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

Answer 3

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

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

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

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

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

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