jQuery的：調整整個容器的高度動態

http://dev.clickymedia.co.uk/rdicoursefinder/course-finder/jQuery的：調整整個容器的高度動態

如果您查看鏈接，你會看到有一些在同一時間作用的過濾器。盒子的整體高度根據過濾器插件顯示的項目數量進行調整。

然後我們有一個彈出框，當你點擊每個項目。這也有不同的高度，並推動下一個項目。我們需要調整容器的高度，並考慮到容器在點擊前的原始高度以及彈出框的高度。

我已經寫了一些jQuery來做到這一點，但是，正如你將會看到的那樣，每次當你單擊項目來顯示框時，每次它將藍色彈出框的高度一次又一次地添加到整體高度，而是一旦顯示，相應地調整容器的高度。

我已經使用了高度的jQuery是如下：

var originalHeight = $('#filter-results').height(); 
var thisHeight = 70 + $('.resultsShowing').height(); 

var overallHeight = originalHeight + thisHeight; 
$('#filter-results').height(overallHeight);

任何幫助，將不勝感激！

來源

2013-06-25 user2519799

感謝所有的評論，我同意setInterval問題，但是如何在調整過濾器時添加和刪除類？您會看到列（firstColumn等）是由類添加的，唯一可行的方法是由jQuery通過篩選器不斷處理它。 – user2519799

此行

var originalHeight = $('#filter-results').height();

將需要您click()活動外，並應在$(document).ready()

來源

2013-06-25 11:32:30

這是因爲你每次使用新的高度你產生做一次更高的高度。

您需要將originalHeight移至某個特定點，第一次需要時，並將其保留在那裏。然後，只有thisHeight需要更新，結果高度應打賭前者（靜態）+後者（動態）。

來源

2013-06-25 11:32:37 casraf

你可能會建議一些代碼來解決這個問題嗎？非常感謝 – user2519799

在$（document）.ready（function（）{...}）內設置'originalHeight';'而不是點擊事件，然後保持原樣。 – casraf

我已經這樣做了，正如你所看到的那樣，現在的高度計算不正確。提前感謝您的幫助！ – user2519799

刪除這首先是

window.setInterval(function(){ 
///etc 
}), 1);

它殺死我的機器在Chrome中。

來源

2013-06-25 11:38:06

非常感謝您回覆我。刪除這意味着每次使用過濾器時都無法計算出列，這意味着我無法每次都將CSS應用於藍色框。有什麼建議麼？ – user2519799

只需將間隔時間增加到100ms，而不是1ms。如果你需要它更快16ms是~60fps。看看它，它應該是一個使用過濾器觸發的事件。 –

我現在改變了。如果您對如何獲得排序的高度有任何建議，那將是非常好的。非常感謝。 – user2519799

，如果你想知道藍色元素的高度，你顯示它之前，你應該在內存中創建它：

var blueBox = $('<div />').html(...); 
var height = blueBox.height();

現在你可以這個高度增加了整體的容器，並顯示藍色元素：

blueBox.appendTo('.overall');

ps。對於僞代碼感到抱歉

來源

2013-06-25 11:38:15 picios

jQuery的：調整整個容器的高度動態

回答

相關問題