✔ Fenster aufklappen

[_voodoo]

Hallo,
bitte legt eure Steine wieder bei Seite falls es zum Thema
schon Beiträge gibt, ich habe leider nichts gefunden.

Ich suche nach einer Möglichkeit ein Fenster (div) ein zu-
blenden, ähnlich dem "Suchen" oben in der Leiste:
vorher --> nachher

Ich habe ein Script gefunden, das diese Funktion erfüllt,
aber das ist eine ganze Bibliothek. Lieber wäre mir nur
ein Stück Code für diese spezielle Funktionalität.

Ich bedanke mich für eure Hilfe!

 

[Maik]

Hi,

bitte legt eure Steine wieder bei Seite falls es zum Thema
schon Beiträge gibt, ich habe leider nichts gefunden.

mit dem Suchbegriff "div einblenden" bekomm' ich hier im JS-Forum derzeit 226 Treffer genannt.

Das Grundprinzip kannst du aber auch im JS-Tutorial Basic DHTML Menü nachlesen.

mfg Maik

 

[_voodoo]

Bei "div einblenden" geht es ja nur darum ein div ein- oder aus zublenden.
Mir geht es ja um diesen "Aufklapp-Effekt" selbst.

 

[Maik]

Dafür wird u.a. die clip-Eigenschaft genutzt.

this.menuobj.style.clip="rect(auto, "+C+"px, "+B+"px, auto)";
this.slidetimer=setTimeout("vBmenu.menus[vBmenu.activemenu].slide("+C+", "+B+", "+A+");",0)}else{if(this.direction=="right"&&(C>0||B<this.menuobj.offsetHeight)){C-=this.intervalX;B+=this.intervalY;
this.menuobj.style.clip="rect(auto, "+this.menuobj.offsetWidth+"px, "+B+"px, "+C+"px)";
this.slidetimer=setTimeout("vBmenu.menus[vBmenu.activemenu].slide("+C+", "+B+", "+A+");",0)}else{this.stop_slide();

http://docs.jquery.com/Effects/slideDown#speedcallback zielt in dieselbe Richtung ab.

mfg Maik

 

[_voodoo]

[alten Code gelöscht]

Hier das Script in Aktion: http://christophradtke.com/test/aufklappr.html

 

[_voodoo]

Schade dass mir niemand helfen konnte, hätte mir sicher ein wenig Zeit gespart.
Andererseits ist es ja gar nicht so nutzlos wieder ein wenig JS gemacht zu haben!

Hier mein Ergebnis:

<script type="text/javascript">
var boxArray = new Object(); // hier sind alle Boxen drin, werden durch regBox hinzugefügt

function regBox(boxName) {
	document.getElementsByName(boxName)[0].innerHTML = "<a href=\"javascript:clickBox('"+boxName+"')\">ROFL COPTER <img src=\"plusc.gif\" name=\"expand"+boxName+"\" border=\"0\"/></a><div id=\""+boxName+"\" class=\"klappMenu\"><a href=\"javascript:closeBox('"+boxName+"')\">[x] schließen</a><br /><img src=\"dc_left_02.jpg\"/></div>";
	document.getElementById(boxName).style.top = document.getElementsByName(boxName)[0].offsetTop + 20;
	document.getElementById(boxName).style.left = document.getElementsByName(boxName)[0].offsetLeft + 20;
	window.boxArray[boxName] = new Object();
	window.boxArray[boxName]["isopen"] = false;
	/*
	xl Start Links
	xr Ende Rechts
	yo Start Oben
	yu Ende Unten
	*/
	var xleft = document.getElementById(boxName).style.left;
	var xtop = document.getElementById(boxName).style.top;
	window.boxArray[boxName]["xl"] = xleft.substring(0, xleft.lastIndexOf("px"));
	window.boxArray[boxName]["xr"] = xleft.substring(0, xleft.lastIndexOf("px")) * 1 + document.getElementById(boxName).offsetWidth;
	window.boxArray[boxName]["yo"] = xtop.substring(0, xtop.lastIndexOf("px"));
	window.boxArray[boxName]["yu"] = xtop.substring(0, xtop.lastIndexOf("px")) * 1 + document.getElementById(boxName).offsetHeight;
	//alert("xl:"+window.boxArray[boxName]["xl"]+"\n xr:"+window.boxArray[boxName]["xr"]+"\n yo:"+window.boxArray[boxName]["yo"]+"\n yu:"+window.boxArray[boxName]["yu"]);	
}

function clickBox(boxName) {
	if(document.getElementsByName("expand"+boxName)[0].src.indexOf('plusc.gif') > -1) {
		document.getElementsByName("expand"+boxName)[0].src = 'minusc.gif';
		openBox(0, 0, boxName);
		/* andere box schließen falls eine offen ist */
		for(var boxElement in window.boxArray) {
			if(window.boxArray[boxElement]["isopen"] == true) {
				closeBox(boxElement);
			}
		}
		window.boxArray[boxName]["isopen"] = true;
	}
	else {
		closeBox(boxName);
	}
}

function openBox(breite, hoehe, boxName) {
	var obj = document.getElementById(boxName);
	var maxHoehe = document.getElementById(boxName).offsetHeight;
	var maxBreite = document.getElementById(boxName).offsetWidth;
	if(breite < maxBreite || hoehe < maxHoehe) {
		tempBreite = breite+10;
		tempHoehe = hoehe+10;
		obj.style.clip = "rect(0 "+tempBreite+" "+tempHoehe+" 0)";
		obj.setTimer = setTimeout("openBox("+tempBreite+", "+tempHoehe+", \""+boxName+"\");", 0);
	}
	else {
		clearTimeout(obj.setTimer);
		obj.style.clip = "rect(0 auto auto 0)";
	}
}

function closeBox(boxName) {
	document.getElementsByName("expand"+boxName)[0].src = 'plusc.gif';
	document.getElementById(boxName).style.clip = "rect(0 0 0 0)";
	window.boxArray[boxName]["isopen"] = false;
}

document.onmousedown = closeAll;
function closeAll(ev) {
	if(!ev) {
		ev = window.event;
	}
	for(var boxElement in window.boxArray) {
		if(window.boxArray[boxElement]["isopen"] == true) {
			if((window.boxArray[boxElement]["xl"] < ev.clientX) && (ev.clientX < window.boxArray[boxElement]["xr"]) && (window.boxArray[boxElement]["yo"] < ev.clientY) && (ev.clientY < window.boxArray[boxElement]["yu"])) {
				//alert("drin");
			}
			else {
				//alert("draußen");
				closeBox(boxElement);
			}
		}
	}
}
</script>

Und der Aufruf erfolgt dann so:

<div name="klappMenu0"><script type="text/javascript">regBox("klappMenu0");</script></div>