Funktion funktioniert nicht, Bitte um Verbesserungsvorschläge

[mikethet]

Hallo,

Ich bin derzeit an einer DropDown-Funktion dran.

Sprich ein Menu, welches beim Anklicken sich auf- bzw. wieder zuklappt.

Meine Funktion dafür funktioniert nicht, und ich komme einfach nicht auf den Fehler. Außerdem wäre ich für Verbesserungsvorschläge dankbar, wie ich es effektive machen könnte.

Hier der Code:

  
function DropDown(){  
				var fixedheight = themes[0].offsetHeight;  
				var endheight = 400;  
				var variableheight;  
				  
				if(MoveDownAllowed == 1)  
				{  
					MoveDownAllowed = 0;  
					MoveUpAllowed = 0;  
					  
					variableheight = fixedheight; // VariableHöhe auf StartHöhe setzen also Höhe des Choose Theme DIV'S  
					IntervalDropDown = setInterval(function(){MoveDown(endheight,fixedheight, variableheight)}, 50);  
					  
				}else if(MoveUpAllowed == 1)  
				{  
					variableheight = endheight;  
					IntervalDropDown = setInterval(function(){MoveUp(endheight, fixedheight, variableheight)}, 50);  
				}  
				  
			}  
			  
			//DROP_DOWN-MENU MOVE DOWN!!  
			  
			function MoveDown(endheight, fixedheight, variableheight){  
				if(variableheight != endheight)  
				{  
					variableheight += 1;  
					dropdownMenu.style.height = variableheight + "px";  
				}else  
				{	alert("works1");  
					clearInterval(IntervalDropDown);  
					MoveUpAllowed = 1;  
				}	  
				  
			}  

fixedheight ist die Button-Größe, welche natürlich nicht verschwinden soll.

Wenn ich die Funktion ausführe und auf den Button-Klicke, erhöht er die Höhe um 1px und dann ist Schluss. Habe zur Überprüfung ein alert-Befehl in MoveDown eingefügt und habe bemerkt, dass er die Funktion auch sauber alle 50ms ausführt, allerdings die Höhe nur um 1Px nach oben verschiebt. Mehr dann aber auch nicht.

Hoffe ihr könnt mir helfen.

LG Mike

[1UnitedPower]

Meine Funktion dafür funktioniert nicht, und ich komme einfach nicht auf den Fehler. Außerdem wäre ich für Verbesserungsvorschläge dankbar, wie ich es effektive machen könnte.

Du meinst effizienter. Effizent wäre es mit Javascript nur den active-state der Menüs zu kontrollieren und eventuelle Effekte mit CSS zu realisieren.

[mikethet]

Du meinst effizienter. Effizent wäre es mit Javascript nur den active-state der Menüs zu kontrollieren und eventuelle Effekte mit CSS zu realisieren.

Ok, und konntest du den Fehler ausfindig machen?

LG

[Baba]

Ok, und konntest du den Fehler ausfindig machen?

Es würde stark helfen, wenn du sagst, wo und wann du die ...Allowed-variablen setzt.

Klar ist: wenn Du immer die alert()'s bekommst, kommt er wohl nicht mehr dazu, die Höhe weiter hochzusetzen, da dies in sich ausschliessenden if-Blöcken passiert. Also wird zu früh variableheight = endheight;

Cheers,
Baba

[mikethet]

Es würde stark helfen, wenn du sagst, wo und wann du die ...Allowed-variablen setzt.

Hallo Baba,

Habe das Problem bereits gefunden. Problem war anscheinend, dass bei jedem Aufruf durch setInterval wieder der Wert für variableheight übergeben wurde.

Sprich variableheight ist z.B.: 50.

Erster Aufruf varaibleheight = 50 .. +1 = 51.
Zweiter Aufruf variableheight wird wieder auf 50 gesetzt +1 natürlich wieder 51.

Deswegen erhöht er nicht. Warum er das so macht weiß ich nicht ganz, ich dachte er übergibt einmal und dann kann ich mit dem Wert arbeiten. Aber anscheinend übergibt er bei jedem Aufruf erneut.

Habe bemerkt, dass die Methode eines Drop-Down-Menus nie so flüssig wird wie ich es dachte, suche derzeit noch nach einer besseren Variante außer jQuery.

Falls dir welche einfallen, würde ich sie gerne hören.

Danke für die Antwort und LG Mike.

[heinz]

Hi,

denke mal jQuery wird ziemlich oft eingesetzt. Aber du könntest auch ein UI-Framework nehmen (z.B. Kendo).

[1UnitedPower]

denke mal jQuery wird ziemlich oft eingesetzt. Aber du könntest auch ein UI-Framework nehmen (z.B. Kendo).

Hab' nur einen kurzen Blick drauf geworfen, aber das Framework scheint auch abhängig von jQuery zu sein, für eine so simple Animation halte ich die Investition (immerhin knapp 400$ in der günstigsten Variante) für übertrieben. Da reichen auch locker die buildin-Funktionen von jQuery.

Und nochmal der Hinweis: In diesem Fall ist CSS Javascript vorzuziehen, Javascript ist hier nur als Fallback zu gebrauchen.

[mikethet]

Und nochmal der Hinweis: In diesem Fall ist CSS Javascript vorzuziehen, Javascript ist hier nur als Fallback zu gebrauchen.

Hallo 1United und danke erstmal an all die hilfreichen Antworten.

Kann mir nicht ganz vorstellen wie ich rein mit CSS das realisieren soll.

Kannst du mir da auf die Sprünge helfen? LG Mike

Und jQuery wollte ich eigentlich nicht verwenden, weil

1.) Vermische ich nicht gerne jQuery und Javascript. Das wird für mich dann immer sehr unübersichtlich.

2.) Zweitens weiß ich nicht wie es mit der Kompatibilität mit anderen Browsern aussieht.

3.) Weiß ich von einem Freund das durch Version-Updates einiges nicht mehr so funktionieren tut wie es zuvor tat. Und Troubleshooting, denke ich, ist mit Javascript direkt auch "wesentlich" einfacher als mit einem Framework.

Meine Meinung, :)
LG Mike

[1UnitedPower]

Kann mir nicht ganz vorstellen wie ich rein mit CSS das realisieren soll.

Kannst du mir da auf die Sprünge helfen? LG Mike

Mit Transitions. Hier gibts ein gutes Tutorial.

Und jQuery wollte ich eigentlich nicht verwenden, weil

1.) Vermische ich nicht gerne jQuery und Javascript. Das wird für mich dann immer sehr unübersichtlich.

jQuery ist ein Javascript-Framework, da gibt es kein Vermischen :P

2.) Zweitens weiß ich nicht wie es mit der Kompatibilität mit anderen Browsern aussieht.

Ein Aspekt von jQuery ist ja gerade die Cross-Browser-Kompatibilität.

3.) Weiß ich von einem Freund das durch Version-Updates einiges nicht mehr so funktionieren tut wie es zuvor tat. Und Troubleshooting, denke ich, ist mit Javascript direkt auch "wesentlich" einfacher als mit einem Framework.

Okay, das sind triftige Gründe. Hier hast du etwas Salz in die Wunde.

[mikethet]

Mit Transitions. Hier gibts ein gutes Tutorial.

Werd ich mir mal reinziehen, nur wird es halt auch noch nicht komplett unterstützt. Darf ich aber nicht meckern, weil mein JavaScript wird von IE8 auch nicht interpretiert! Weiß eine warum? Er klappt das menu einfach komplett aus ohne jedliches Event-Empfinden.

jQuery ist ein Javascript-Framework, da gibt es kein Vermischen :P

Ich weiß. :p

Achja, habe den Code von oben überarbeitet und funktioniert jetzt einwandfrei (lediglich schließt er sich auch wenn ich vom ersten DIV runterfahre, dass muss ich noch anpassen), aber das öffnen und schließen interpretiert er auch unter schnellem "Lastwechsel" fehlerfrei.

Hier der Code:

  
themes[0].onmouseover = Drop;  
dropdownMenu.onmouseout = Drop;  
.  
.  
.  
function Drop (e){  
				//Ausgangs- und Endhöhe definieren  
			  
				var fixedheight = themes[0].offsetHeight + 9;  
				var endheight = 400;  
				  
				//Abfragen welches Event gerade stattfinden  
				if(e.type == "mouseover")  
				{  
					  
					clearInterval(IntervalDrop);  
					IntervalDrop = setInterval(function(){MoveDown(endheight, fixedheight)}, 15);  
					  
				}else  
				{  
					clearInterval(IntervalDrop);  
					IntervalDrop = setInterval(function(){MoveUp(endheight, fixedheight)}, 15);  
				}  
			}  
  
function MoveDown(endheight, fixedheight){  
				if(variableheight <= endheight)  
				{  
					variableheight += 8;  
					  
					dropdownMenu.style.height = variableheight + "px";  
				}else  
				{	  
					clearInterval(IntervalDrop);  
				}	  
				  
			}  
			  
			  
			//DROP_DOWN-MENU MOVE UP !!  
			  
			function MoveUp(endheight, fixedheight){  
				if(variableheight >= fixedheight)  
				{  
					variableheight -= 8;  
					dropdownMenu.style.height = variableheight + "px";  
				}else  
				{  
					clearInterval(IntervalDrop);  
				}  
			}  

Ist kürzer und ich konnte Variablen einsparen.

LG Mike

[1UnitedPower]

Habe bemerkt, dass die Methode eines Drop-Down-Menus nie so flüssig wird wie ich es dachte, suche derzeit noch nach einer besseren Variante außer jQuery.

Wie gesagt: CSS sollte das Mittel deiner Wahl sein. Falls dir der Aufwand zu groß ist, schau dir mal @requestAnimationFrame als Alternative zu @setInterval an.

PS: Warum nicht jQuery?

[Stefanie M.]

Hi,

Deswegen erhöht er nicht. Warum er das so macht weiß ich nicht ganz

Weil javaScript keine Referenz-Parameter kennt.

Gruss
Stefanie

[1UnitedPower]

Weil javaScript keine Referenz-Parameter kennt.

Objekte werden immer als Referenz übergeben, nur primitive Datentypen nicht.

[Stefanie M.]

Objekte werden immer als Referenz übergeben, nur primitive Datentypen nicht.

Änderungen im Inhalt des Objektes betreffen auch den übergeordneten Kontext. Aber es kann kein anderes Objekt zugewiesen und zurück geliefert werden. Oder?

[1UnitedPower]

Änderungen im Inhalt des Objektes betreffen auch den übergeordneten Kontext. Aber es kann kein anderes Objekt zugewiesen und zurück geliefert werden. Oder?

Richtig. Hier macht sich der Unterschied zwischen Referenzen und Zeigern bemerkbar.