JavaScript: Childs löschen und wieder einfügen

vertex · #1 (**permalink**) 10.08.2006, 13:46

Ich möchte eine Infobox machen, die man ein- und aufklappen kann. Geht soeweit schon ganz gut. Aber zum Einklappen muss der Inhalt entfernt und beim Ausklappen wieder eingefügt werden. Der Inhalt steht im Div Tag id="infobox_body". Darin enthalten ist auch der Hyperlink id="resize_box"

Das ganze geht über ein Hyperlink:
<a id="resize_infobox" href="javascript:resizeInfobox();">einklappen</a>

Probeweise habe ich mal beim einklappen das versucht:

Code:

var infoboxBody = document.getElementById("infobox_body");
infoboxBody.childNodes = null;

da kommt keine Fehlermeldung aber rühen tut sich auch nix.

Kann man die Childs in einer einzigen Variable speichern und dann ganz bequem wieder einsetzen(also ohne tausende von appenChild Aufrufen)?

Achja: Was ist, wenn ein Browser kein JavaScript unterstützt? Gibt es da irgendwie noscript Tags, wo ich statts href="javascript

yz()" href="blub.php?i=close" automatisch nehmen kann?

Falls es erforderlich ist:

Code:

var infoboxOpened = true;

function resizeInfobox()
{
	if(infoboxOpened == true)
	{
		closeInfobox()
		infoboxOpened = false;
	}
	else
	{
		openInfobox()
		infoboxOpened = true;	
	}
}

function closeInfobox()
{
	var infobox, content, elements, index, element
	var infoboxBody, infoboxResize

	infobox = document.getElementById("infobox");
	infobox.style.margin = "10px 0 0 440px";
	infobox.style.float  = "none";
	
	content = document.getElementById("content");
	content.style.width  = "590px";
	content.style.margin = "0";
	content.style.float  = "none";

	elements = document.getElementsByTagName("*");
	for(index = 0; index < elements.length; index++)
	{
		element = elements[index];
		if((element.tagName == "H3"
		    && element.parentNode.className == "window_righttop")
		   || (element.tagName == "P"
		    && element.className == "window_body")
		   || (element.tagName == "DIV"
		   && element.className == "window_centerbottom"))
		{
			element.style.width = "580px";
		}
		else if(element.tagName == "DIV")
		{
			if(element.className == "window_top"
			   || element.className == "window_middle"
			   || element.className == "window_bottom"
			   || element.className == "window_lefttop"
			   || element.className == "window_righttop"
			   || element.className == "window_leftbottom"
			   || element.className == "window_rightbottom")
			{
				element.style.width = "590px";
			}
			else if(element.className == "window")
			{
				element.style.width  = "590px";
				element.style.margin = "10px 0 10px 0";
			}
		}
	}

	infoboxBody = document.getElementById("infobox_body");
	// Remove childs

	infoboxResize = document.getElementById("infobox_resize");
	infoboxResize.firstChild.nodeValue = "ausklappen";
}

function openInfobox()
{
	var infobox, content, elements, index, element
	var infoboxBody, infoboxResize

	infobox = document.getElementById("infobox");
	infobox.style.margin = "10px 0 10px 0";
	infobox.style.float  = "right";
	
	content = document.getElementById("content");
	content.style.width  = "430px";
	content.style.margin = "0 10px 10px 0";
	content.style.float  = "left";

	elements = document.getElementsByTagName("*");
	for(index = 0; index < elements.length; index++)
	{
		element = elements[index];
		if((element.tagName == "H3"
		    && element.parentNode.className == "window_righttop")
		   || (element.tagName == "P"
		    && element.className == "window_body")
		   || (element.tagName == "DIV"
		   && element.className == "window_centerbottom"))
		{
			element.style.width = "420px";
		}
		else if(element.tagName == "DIV")
		{
			if(element.className == "window_top"
			   || element.className == "window_middle"
			   || element.className == "window_bottom"
			   || element.className == "window_lefttop"
			   || element.className == "window_righttop"
			   || element.className == "window_leftbottom"
			   || element.className == "window_rightbottom")
			{
				element.style.width = "430px";
			}
			else if(element.className == "window")
			{
				element.style.width  = "430px";
				element.style.margin = "10px 0 0 0";
			}
		}
	}

	infoboxBody = document.getElementById("infobox_body");
	// Insert childs

	infoboxResize = document.getElementById("infobox_resize");
	infoboxResize.firstChild.nodeValue = "einklappen";
}

Sorry, habe erst seit gestern mit JavaScript und DOM angefangen.

mfg olli

duessu · #2 (**permalink**) 10.08.2006, 14:09

Zum einfacheren, damit du ein nojs fallback hast kannst du

<a href="zxs.htm" onclick="blubb()">link</a>
gebrauchen. Falls du nun mit javascript nicht weiterlinken willst kannst du mit "return false" den Link nicht ausführen (seite zxs.htm wird nicht aufgerufen).

Statt alle Childs zu löschen kannst du ja ein <div> durmherum machen und diese per style.display="none" verstecken, bzw mit style.display="block" wieder anzeigen.

Hoffe konnte dir helfen

vertex · #3 (**permalink**) 10.08.2006, 14:37

Ja, die Idee mit display: none; leuchtet natürlich ein

Das mit onlick gefällt mir ehrlich gesagt nicht. Aber mir ist gerade was eingefallen:

<a id="infobox_resize" href="blub.php?i=close">einklappen</a>

Wenn JavaScript unterstützt wird, kann ich ja auch mittels Script dann das href Attribut ändern und auf "javascript:resizeInfobox();" setzen.

Also Danke!

mfg olli

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Javascript Navi über PHP einfügen	Bubble	Serveradministration und serverseitige Scripte	0	24.07.2012 15:53
Balken nachträglich per JavaScript in eine Seite einfügen!	Cix6	Javascript & Ajax	3	02.10.2008 13:23
Wort in Javascript Code einfügen; dann Javascript Code ausgeben	Sp33dy G0nz4l3s	Javascript & Ajax	1	23.05.2008 09:37
Javascript einfügen (XHTML)	Marco D.	Javascript & Ajax	6	24.09.2006 12:50
Variabler Text Button...	der_junge	CSS	2	11.11.2004 17:15