|
|||
[CSS|JavaScript] div aufklappen?
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: Code:
<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> Code:
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); } } 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!!!!! |
Sponsored Links |
|
|||
Hi,
das mit dem setTimeout() funktioniert so nicht: http://groups.google.de/group/de.com...5ba38d7f2cc802 und hier Code:
<div onMouseOver="javascript:popup Code:
<div onmouseover="popup 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
__________________
"Das macht nicht wirklich Sinn" hat eigentlich keinen Sinn! |
Sponsored Links |
|
|||
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: Code:
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)"; } } 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??????????? |
|
||||
sleep o.ä. dürfte es auch in JS geben...
http://de.selfhtml.org/perl/funktion...rufe.htm#sleep Ja, gibt es...
__________________
Bitte keine PN's - schreibt mir ne anständige Mail oder sprecht mich über Msn / Icq an Milian Wolff | Markdownify | Typogridder |
|
|||
Zitat:
Zitat:
Zitat:
Sonst guck mal was die bei de.comp.lang.javascript sonst so darüber schreiben. Da findest Du wahrscheinlich auch kompetentere Kollegen
__________________
"Das macht nicht wirklich Sinn" hat eigentlich keinen Sinn! |
|
||||
Mein Fehler...
__________________
Bitte keine PN's - schreibt mir ne anständige Mail oder sprecht mich über Msn / Icq an Milian Wolff | Markdownify | Typogridder |
|
|||
ich habs jetzt nochmal mit einer rekursiven funktion versucht:
Code:
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 |
Sponsored Links |
|
|||
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
__________________
"Das macht nicht wirklich Sinn" hat eigentlich keinen Sinn! |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Fragen zu CSS und Joomla | DOKTOR | CSS | 2 | 23.05.2011 19:29 |
Brauche Hilfe: Schwarzes Nichts | Zwox | CSS | 10 | 19.11.2010 16:53 |
Header entfernen | tripple | CSS | 17 | 15.06.2010 15:41 |
Schriftfarbe in den Eintragungsfeldern von jforms | Steveislucky | CSS | 2 | 16.03.2010 10:59 |
CSS Text nebeinander? | carstiee09 | CSS | 13 | 13.11.2009 19:18 |