pobieranie wysokości diva i ustawianie innemu

Question

Witam, robię próbną stronę. Zrobiłem skrypt w javascript, który sprawdza wysokość głównego diva, i ustawia temu z boku. (content i sidebar).

var contentHeight = document.getElementById('content').offsetHeight;
var sidebarHeight = contentHeight - 20;
document.getElementById('sidebar').style.height = sidebarHeight + 'px';

Działa. Ale gdy zrobiłem (w JQuery) event, gdzie kliknięcie w przycisk zmieni zawartość diva "content"

/*-----changing content-----*/
$('#room1').on('click', function()
{
	$('#content').html('<img src = "img/pokoj1-1.png" alt = "pokój nr 1" width = "70%"/>');
	/*--repeating setting divs' hight--*/
	var contentHeight = document.getElementById('content').offsetHeight;
	var sidebarHeight = contentHeight - 20;
	document.getElementById('sidebar').style.height = sidebarHeight + 'px';
	/*--repeating setting divs' hight--*/		
});
/*-----changing content-----*/

, to zdjęcie się wstawia, ale div "sidebar" jest dużo niższy, więc powtórzenie czynności nie działa. Dodam jeszcze, że ponowne kliknięcie przycisku już ustawi prawidłową wysokość diva "sidebar". Pozdrawiam, i proszę o pomoc.

Answer 1

Uwaga! Znalazłem rozwiązanie (dla kogoś, kto będzie miał podobny problem). Trzeba poczekać aż zdjęcia (u mnie były zdjęcia) się załadują, a dopiero pózniej zmienić rozmiar. Poczekać można dzięki 

setTimeout(nazwa_funkcji, czas_za_jaki_ma_sie_wykonac);

seTimeout(zmien, 100) /*100 milisekund*/

Dziękuję wam za pomoc :D

Comments

Jedna odpowiedź gościa który poprosił Cię o kod. Dostała minusa. I Twoją najlepsza

---

Co zrobisz, ukarał mnie srogo.

---

no jeśli ktoś nie udzielił mi odpowiedzi na pytanie, a ja znalazłem odpowiedz na pytanie, to dlaczego mam nie dać najlepszej? Jak ktoś będzie miał podobny problem, to niech ma rozwiązanie na samej górze. Nie wiem o co ból dupy.

---

Wtedy się zamyka temat z odpowiednim komentarzem.

Answer 2

Pokaż jeszcze HTML'a, żebym mógł zobaczyć jak to działa.

Comments

<div id = "sidebar">				
	<ol>
		<li id = "room1">Pokój nr 1 (2-osobowy)</li>
		<li id = "room2">Pokój nr 2 (2-osobowy)</li>
		<li id = "room3">Pokój nr 3 (2-osobowy z dostawką)</li>
		<li id = "room4">Pokój nr 4 (2-osobowy z dostawką)</li>
	</ol>			
</div>

Więcej chyba pokazywać nie trzeba :)

---

nie ma rozwiązania? :D