[Xenon]

hi there!

ich habe eine frage, bei der ich einfach nicht weiterkomme

ich will ein aufklappendes menü realisieren wie zB auf http://www.vbulletin.com/forum/ beim klick auf "search" zu sehen ist.

leider klappt es absolut nicht mit javascript und auch mit den verwendeten divs hab ich probleme (css). selfhtml hab ich schon erfolglos durchforstet und auch das ein oder andere buch wusste keine hilfe. deswegen frage ich jetzt hier in der hoffnung auf einen tip oder eine erklärung, warum es nicht funktioniert

soweit so gut. mein ansatz sieht wie folgt aus:

eine html-seite. wie auch immer aus dem zusammenhang gerissen, den css-code der einfachheit halber in den tags:

<div id="menue" style="border:1px solid #000000;">
<divonMouseOver="javascript:popup('menue_exp', 100, 100);">text</div>
<div>several</div>
<div>other</div>
<div>menue</div>
<div>items</div>
</div>


<div id="menue_exp" style="display:none; position:absolute; top:20px; left20px;" onMouseOut="window.document.getElementById('menue_exp').style.display = 'none';">
<div>several</div>
<div>other</div>
<div>menue</div>
<div>items</div>
</div>

in der dazugehörigen javascript-datei folgt dann folgendes:

function increaseSize(menueID, currentHeight, currentWidth)
{
	window.document.getElementById(menueID).style.clip = "rect(0px, 0px, " + currentHeight + "px, " + currentWidth + "px)";
}

function popup(menueID, maxHeight, maxWidth)
{
	var currentHeight = 0;
	var currentWidth = 0;
	
// am anfang wird das fenster gar nicht angezeigt. also komplett abgeschnitten
	window.document.getElementById(menueID).style.clip = 'rect(0px, 0px, ' + currentHeight + 'px, ' + currentWidth + 'px)';
	window.document.getElementById(menueID).style.display = 'block';

// jetzt wird die anzeigebreite (clip) schrittweise erhöht, bis das maximum (maxHeight und maxWidth) erreicht sind
	while(currentHeight < maxHeight || currentWidth < maxWidth)
	{
		if(currentHeight < maxHeight) currentHeight++;
		if(currentWidth < maxWidth) currentWidth++;
// da das ganze zu schnell abläuft, als dass man es sehen könnte wird der ablauf mit setTimeout verzögert
		window.setTimeout("increaseSize(menueID, currentHeight, currentWidth)", 300);
	}
}

-- erstes problem --

das problem ist folgendes: obwohl als globale variable definiert, meldet javascript, dass in der zeile von setTimeout menueID, currentWidth und currentHeight nicht definiert wären. die divbox wird nicht geöffnet...
laut diverser studien über gültigkeitsbereiche in JS sollte da aber kein problem sein !!??!!??

baue ich vor das setTimeout ein alert(currentWidth) ein und begrenze die while-schleife auf 3 durchläufe mittels while(currentHeight < 2), so passiert interessanterweise folgendes:

1.) es werden 4 (!!!) alert-boxen geöffnet, und zwar ZWEIMAL mit wert 0, einmal mit 1 und einmal mit 2... warum??? die divbox gleitet trotzdem nicht auf...
2.) setze ich die anfangswerte für current**** auf 10, so wird die ERSTE veränderung der anzeige dargestellt, alle weiteren nicht!! warum????
3.) übernehme ich die durch die funktion increaseSize() vorgenommene styleänderung in die funktion popup() (anstelle der setTimeout-geschichte), so wird die divbox ohne verzögerung geöffnet. aus eine verzögerung mittels leerer for-schleife bringt nichts
4.) scheinen die schleifendurchläufe parallel verarbeitet zu werden? (threads?) kann ich mir zwar nicht vorstellen, aber...
5.) ich habe auch schon versucht, nur in zwei schritten aufzuklappen, also OHNE while-schleife und mit verbose-ausgabe mittels alert(). leider klappte das auch nicht, da die erste änderng der anzeigeweite zwar übernommen wurde, die anderen aber nicht. die ausgegebenen vars waren aber korrekt gesetzt. interessanterweise wurde die erneut gesetzte anzeigeweite korrekt dargestellt, wenn ich das fenster minimiert und wieder geöffnet habe.


wie bringe ich das script dazu, langsam aufzugleiten, wobei "langsam" klar definierbar ist (zB über eine variable)???



-- zweites problem --

ist die divbox einmal geöffnet (also gesetzt den fall, ich lasse das aufgleiten weg um das erste problem zu umgehen) und ich öffne die aufzuklappende divbox und fahre mit dem mauszeiger darüber, dann klappt die divbox wieder zu, wenn ich das in der aufgeklappten div-box in ein anderes div (oder auch span) element komme. wie kann ich angeben, dass das fenster solange geöffnet bleibt, bis ich aus der "äusseren" div-box heraus bin?


PS: browser: IE6 und FF1.5
PPS: danke für alle antworten!!!!!

[tesa]

Hi,
das mit dem setTimeout() funktioniert so nicht:
http://groups.google.de/group/de.com...5ba38d7f2cc802

und hier

<div onMouseOver="javascript:popup

solltest Du

<div onmouseover="popup

schreiben.
Events in einem Wort und klein.
javascript: ist ein [Pseudoprotokoll(?)] und das nimm nur wenn Du in einem Link eine JS-Funktion statt einem uri aufrufst.
Aber das nur nebenbei - hat ja mit CSS nicht so viel zu tun...
Bye, Achim

[Xenon]

danke für die antwort!

leider komme ich bei den angesprochenen sachen trotzdem nicht weiter

ich habe wie vorgeschlagen den eventhandler klein geschrieben und das "javascript:" rausgenommen.
da ich die setTimeout() anscheinend nicht nutzen kann, habe ich jetzt folgendes zusammengebastelt:

function doNothing()
{
	
}

function popup(menueID, maxHeight, maxWidth)
{
	var currentHeight = 10;
	var currentWidth = 10;
	
	window.document.getElementById(menueID).style.clip = 'rect(0px, 0px, ' + currentHeight + 'px, ' + currentWidth + 'px)';
	window.document.getElementById(menueID).style.display = 'block';

	while(currentHeight < maxHeight || currentWidth < maxWidth)
	{
		if(currentHeight < maxHeight) currentHeight++;
		if(currentWidth < maxWidth) currentWidth++;
		window.setTimeout("doNothing()", 1000);
		
		window.document.getElementById(menueID).style.clip = "rect(0px, 0px, " + currentHeight + "px, " + currentWidth + "px)";
	}
}

das script sollte also EIGENTLICH 1000ms warten, bevor er rect anpasst. tut es aber nicht: es macht PLÖPP! und das fenster ist sofort bei maximalgrösse angelagt.
wie schon gesagt: es reagiert, als ob der setTimeout()-aufruf in einem eigenen thread passieren würde (was der grund war, warum ich die rahmenvergrösserung in increaseSize() gepackt hatte...

gibt es IRGENDEINE möglichkeit, die ausführung zu verlangsamen???????????

[The Doc]

sleep o.ä. dürfte es auch in JS geben...
http://de.selfhtml.org/perl/funktion...rufe.htm#sleep

Ja, gibt es...

[Xenon]

sicher?

JS sagt mir, sleep() wäre nicht definiert...

ein wait(), pause() o.ä. kennt weder mein buch noch selfhtml...

die ist klar, dass dein link auf perl bezogen ist?

[tesa]

sleep o.ä. dürfte es auch in JS geben...
http://de.selfhtml.org/perl/funktion...rufe.htm#sleep
Ja, gibt es...

Hehe - das handelt von doch perl

ich habe wie vorgeschlagen den eventhandler klein geschrieben und das "javascript:" rausgenommen.

Ja - nein, daran liegts natürlich nicht. Ist nur eine formale Sache...

da ich die setTimeout() anscheinend nicht nutzen kann, habe ich jetzt folgendes zusammengebastelt:

Das muss schon mit setTimeout() gehen. Wenn Du noch ein paar Stunden warten kannst, bis ich zu Hause bin...
Sonst guck mal was die bei de.comp.lang.javascript sonst so darüber schreiben. Da findest Du wahrscheinlich auch kompetentere Kollegen

[tesa]

die ist klar, dass dein link auf perl bezogen ist?

Mist - zu langsam

[The Doc]

Mein Fehler...

[Xenon]

ich habs jetzt nochmal mit einer rekursiven funktion versucht:

function slide(menueID, currentHeight, currentWidth, maxHeight, maxWidth)
{
	if(currentHeight < maxHeight) currentHeight++;
	if(currentWidth < maxWidth) currentWidth++;

	window.document.getElementById(menueID).style.clip = "rect(0px, 0px, " + currentHeight + "px, " + currentWidth + "px)";
	window.document.getElementById(menueID).style.display = "";
	
	if(currentHeight < maxHeight || currentWidth < maxWidth)
	{
		timer = setTimeout("slide('" + menueID + "', " + currentHeight + ", " + currentWidth + ", " + maxHeight + ", " + maxWidth + ");", 1);", 10);
	}
}

...aufgerufen mit slide('id' 0, 0, 200, 200)

aber da tut sich auch nix

[tesa]

hab jetzt nochmal den src angeguckt http://www.vbulletin.com/forum/clien...lletin_menu.js.
die Methode vB_Popup_Menu.prototype.slide = function(clipX, clipY, opacity)
macht im prinzip das gleiche wie Du. Hab auch mal probiert die Parameter weg zu lassen und stattdessen in globale Variablen zu schreibe. Funktioniert aber auch nicht. Irgenwas überseh ich da. Frag lieber doch mal bei der JS Newsgroup, da kann Dir auf jeden Fall jmd. helfen.

Achim