jQuery的可變高度

我想有一個圖片庫，其中一個標題垂直幻燈片內中心，這裏是我與jQuery的可變高度

$(window).load(function() { 

    var imageHeight = $('.flexslider .slides li img').height(); 

    var captionTop = imageHeight - $('.title-cap').height(); 
    var captionTop = captionTop/2; 
    $('.title-cap').css('top',captionTop + 'px'); 

    var captionTopOne = imageHeight - $('.sub-cap-one').height(); 
    var captionTopOne = captionTopOne/2; 
    $('.sub-cap-one').css('top',captionTopOne + 'px'); 

    var captionTopTwo = imageHeight - $('.sub-cap-two').height(); 
    var captionTopTwo = captionTopTwo/2; 
    $('.sub-cap-two').css('top',captionTopTwo + 'px'); 

    var captionTopThr = imageHeight - $('.sub-cap-three').height(); 
    var captionTopThr = captionTopThr/2; 
    $('.sub-cap-three').css('top',captionTopThr + 'px'); 

});

標題是絕對定位工作的代碼，我m使用頂部做中心...

所以我的思考過程是，獲得基礎幻燈片圖像的高度，以保持它的響應性，減去當前標題的高度，併除以兩個結尾的頂部值。

第一種情況是工作，用「標題帽」，但接下來的三個不是。他們都返回相同的錯誤值。所有的標題類都具有相同的屬性，只是賦值不同而已。

此外，我需要添加什麼才能使值隨着瀏覽器窗口大小實時動態更改。

編輯：好吧，做了一點研究，並找出了加載/調整大小的部分。這是我現在有

function setContent(){ 
    [Added all of the above minus the onload part in here] 
} 
$(window).load(function() { 
    setContent(); 
}); 
$(window).resize(function() { 
    setContent(); 
});

現在只是不知道爲什麼，子蓋的不正常加載。有任何想法嗎？

來源

2012-03-26 Colby

只有在窗口加載其內容時才計算這些值，但我認爲您需要使用$（window）.on（'resize'，//您的代碼）調整大小。 – 2012-03-26 01:26:31

你能提供這些類的CSS和標記嗎？ – tjscience 2012-03-26 01:31:02

@羅伯特史密斯是正確的。您需要在窗口大小調整事件中執行此代碼。在計算圖像的高度之前，還需要確保圖像已加載。爲此，可以將代碼封裝在$（'。flexslider .slides li img'）。load（...）中的window.load函數下。 – tjscience 2012-03-26 01:34:23

當試圖獲取隱藏元素的大小時，我遇到過類似的問題。我發現這個不錯jQuery actual plugin。這可能是你需要的。

來源

2012-03-26 02:26:10 rmarimon

甚至沒有想到這是問題。這工作雖然。謝謝！ – Colby 2012-03-26 02:33:35

jQuery的可變高度

回答

相關問題