Как я могу динамически обновлять высоту блока DIV?

Question

У меня есть 2 divs. 1-й div должен автоматически изменять собственную высоту, если была изменена 2-я высота div.

var height = jQuery('#leftcol').height(); 
height += 20; 
jQuery('.rightcol-botbg').height(height); 

Там нет возможности изменить HTML-разметку :( У меня есть много изменений макета DHTML, поэтому я не могу запустить предыдущий. Код в любое время. Я хочу, чтобы запустить его динамически. Мне нужно сделать что-то вроде событие/триггер.

Я пытался использовать jQuery('#leftcol').resize(function(){}) или jQuery('#leftcol').change(function(){})., но он не работает. (resize триггера при изменении размера окна.)

Answer 1

Я не понимаю, JQuery, но кажущееся, как этот вопрос помечено Javascript Я дам вам решение Javascript

document.getElementById("yourDivID").style.height = "300px"; 

Редактировать - Вы хотите знать, когда изменилась высота div?

Я не знаю, есть ли лучший способ для этого, но я хотел бы подойти к нему с помощью функции:

function changeBlockHeight(divID, newHeight) 
{ 
    document.getElementById(divID).style.height = newHeight + "px"; 
    blockHeightChanged(divID); 
} 

function blockHeightChanged(divID) 
{ 
    alert("Div " + divID + " has been changed in height!"); 
} 

Где-то в вашем коде:

<div id="testBlock"></div> 
<button onlcick="changeBlockHeight('testBlock')">Test</button> 

Каждый раз, когда вы изменить высоту блоков, вызывается blockHeightChanged().

Answer 2

Я хотел бы следить за другой DIV, используя интервал затем обновить соответствующим образом

setInterval(function(){ 
    var height = $('#leftcol').height(); 
    if(height != $('#leftcol').data('oldHeight')) 
    { 
     $('.rightcol-botbg').height(height+20); 
     $('#leftcol').data('oldHeight',height); 
    } 

},500) 

(непроверенные)

Вышеуказанные проверки кода для изменений в высоте каждые 0,5 секунды, а затем обновляет .rightcol-botbg;

Answer 3

Когда меняется ваш 1-й дивизион? Независимо от того, какие триггеры должны получить новую высоту div, добавьте к ней 20 и установите высоту другого div. Можете ли вы разместить некоторые образцы кода? Если изменения размера происходят очень часто, таймер/интервал, который многократно проверяет один размер и устанавливает другой, также должен работать, но это менее эффективно.

Answer 4

ну нет каких-либо общих триггеров для изменения размера элемента.

Какая причина изменения размера div в вашем случае? вы можете проверить свои высоты вправо или после этого.

только альтернатива, о которой я могу думать, это настроить таймер с помощью setInterval и проверять оба размера div каждый раз в то время.

var myInterval = self.setInterval("myCheckFunction()",1000); 

function myCheckFunction() { 
    jQuery('.rightcol-botbg').height(jQuery('#leftcol').height()); 
} 

Answer 5

Использование интервала не очень удобно. Если у вас есть установки, как это:

<div id="content"> 
    <div id="tree">should be full height</div> 
    <div id="data">this one is half the height</div> 
</div> 

Вы можете легко сделать это с помощью CSS. Я не уверен, что это так ...

Другое, но решение, предложенное Томом Галленом, является лучшим.

Answer 6

Используйте .bind() для создания настраиваемого типа события, а затем запускайте это событие с помощью .trigger().

Here является скрипкой с примером (немного надуманным, но я думаю, вы получите идею)