[JavaScript] Höhe eines DIVs herausfinden

[Luke]

Und wieder was um den Wahsaga auf seine lieblings-Palme zu bringen: Wie schaff ich's denn jetzt dass er die größe kriegt bevor das DIV mittels appendChild ins DOM gehängt wurde... . Klingt nach 'gar nicht' oder?. Möglichkeit die mir dazu einfällt ist das Teil irgendwie zu verstecken und dann bei bedarf kleinmachen und aufscrollen zu lassen. MooFX macht es auch in der Art nur frag ich mich noch wie ich's geeignet verstecke, wenn ich msgBox.style.visibility = "hidden"; benutze reserviert er trotzdem den Platz... .

[Luke]

PS: Für die SuFU: http://developer.mozilla.org/en/docs...tComputedStyle

[wahsaga]

Wie schaff ich's denn jetzt dass er die größe kriegt bevor das DIV mittels appendChild ins DOM gehängt wurde... . Klingt nach 'gar nicht' oder?

Gut erkannt - bevor das Element eingehängt wurde, gibt's natürlich keinen Grund, es zu rendern ...

Klar kannst du es erst mal irgendwo außerhalb des sichtbaren Bereiches positionieren, dann seine Höhe messen - und dann an eine sichtbare Stelle "verschieben".


Mein Vorschlag wäre eher, ganz simpel zwei Elemente ineinander zu verschachteln.
Das äußere bekommt erst mal Höhe 0 und overflow:hidden.
Die des inneren kann man jetzt problemlos ermitteln, sobald man beide ins Dokument eingehängt hat.
Und dann wird nur noch die Höhe es äußeren Elements schrittweise so lange vergrößert, bis die des inneren erreicht ist, es also voll sichtbar ist.

[mcmurphy]

Und außerdem erfordert eine Längenangabe ungleich Null in CSS immer was?

allgemein ein Maßeinheit?

[Luke]

Gut, jetzt hab ich nur noch ein Problem mit der resize-Funktion:

function resizeDivTo(div_id, div_height)
{
	var div = document.getElementById(div_id);

	for(var i = div.offsetHeight; i < div_height; i++)
	{
		window.setTimeout("div.offsetHeight = i;", 500);
	}
}

div.offsetHeight ist vor wie nach der Schleife "2", div_height ist 18.

[wahsaga]

Untauglicher Ansatz.

- setTimeout erwartet eine Funktionsreferenz, oder einen Funktionsaufruf oder einen als Funktion interpretierbaren Code-String als Parameter. M.E. müsstest du hier also schon mit sog. "Closures" arbeiten, wenn du das auf diese Weise machen willst - sonst ist i zum Zeitpunkt der Ausführung gar nicht mehr bekannt.
- x mal setTimeout von 500 Millisekunden auf einmal - dir ist klar, dass das ganze dann "ziemlich fix" vonstatten gehen wird ...?


Ich würde einfach eine Funktion, die die Höhe verändert, sich so lange per setTimeout wieder selbst aufrufen lassen, wie die Zielhöhe noch nicht erreicht ist.
Oder, alternativ, mit setInterval arbeiten - und es beim erreichen der Zielhöhe dann wieder clearen.

[Luke]

Ich würde einfach eine Funktion, die die Höhe verändert, sich so lange per setTimeout wieder selbst aufrufen lassen, wie die Zielhöhe noch nicht erreicht ist.

So hatte ich's auch vorher, hat nicht funktioniert:

function resizeDivTo(div_id, div_height)
{
	var div = document.getElementById(div_id);

	if(div.offsetHeight < div_height)
	{
		div.offsetHeight++;
		window.setTimeout("resizeDivTo(div_id, div_height);", 500);
	}	
}

[wahsaga]

Wer hat denn auch behauptet, dass du offsetHeight beschreiben solltest?
Diese Eigenschaft ist read-only.

[Luke]

Wie mach ich's denn dann? Ohne setAttribute und ohne div.style.height welches nicht funktioniert.

[Luke]

So

function resizeDivTo(div_id, div_height)
{
	var div = document.getElementById(div_id);

	if(div.offsetHeight < div_height)
	{
		var h = div.offsetHeight + 1;
		div.style.height = h+'px';
		window.setTimeout("resizeDivTo(div_id, div_height);", 1000);
	}	
}

funktioniert's ansatzweise, er resized das div auf 6px oder so...

[Luke]

wurde hier gelößt.

Richtig ist

window.setTimeout("resizeDivTo('" + div_id +"'," + div_height + ");", 20);

[wahsaga]

Original geschrieben von Luke
wurde hier gelößt.

Und hier auch bereits - ich wies ja weiter oben schon darauf hin ...