[Erledigt] Javascirptfunktion funktioniert in Chrome nicht

[Forumsgast]

Guten Morgen

Ich habe ein Problem mit einer Javascriptfunktion. Das Ziel der funktion ist nur das sich in einer Navigation eine Subnavigation öffnet allerdings 500ms Zeitversetzt, also öffnet sich erst nach 500ms und schließt sich erst nach 500ms wenn die Maus nicht mehr auf dem Menupunkt ist. Das Problem ist in IE und FF funktioniert der Code, in Chrome und Safari allerdings nicht.

		<script type="text/javascript">
		
			/** Navigation-Delay-Funktion(en) **/
			
			var isMouseOverNavigation1 = true;
			var isMouseOverNavigation2 = true;
			
			function enterNavigation1() {
				isMouseOverNavigation1 = true;
				
		  		// Wartet eine Sekunde, bis das Popup aufgebaut ist, um erst dann die Map zu laden.
		  		// Das ist nötig, weil sonst die Position der Map noch mit O.O angegeben ist.
		  		window.setTimeout(delayNavigation1,500);
		  	}
		  	
		  	function leaveNavigation1() {

		 		isMouseOverNavigation1 = false;
		 		
		 		// Wartet eine Sekunde, bis das Popup aufgebaut ist, um erst dann die Map zu laden.
		  		// Das ist nötig, weil sonst die Position der Map noch mit O.O angegeben ist.
		  		window.setTimeout(delayNavigation1,500);
		 	}
		 	
		 	function enterNavigation2() {
				
				isMouseOverNavigation2 = true;
				
		  		// Wartet eine Sekunde, bis das Popup aufgebaut ist, um erst dann die Map zu laden.
		  		// Das ist nötig, weil sonst die Position der Map noch mit O.O angegeben ist.
		  		window.setTimeout(delayNavigation2,500);
		  	}
		  	
		  	function leaveNavigation2() {

		 		isMouseOverNavigation2 = false;
		 		
		 		// Wartet eine Sekunde, bis das Popup aufgebaut ist, um erst dann die Map zu laden.
		  		// Das ist nötig, weil sonst die Position der Map noch mit O.O angegeben ist.
		  		window.setTimeout(delayNavigation2,500);
		 	}
		 	
		 	function delayNavigation1() {
		  		
		  		// Checken, ob die Maus nach wie vor auf dem Feld liegt.
		  		if(isMouseOverNavigation1)
		  		{
		  			showSubNavigation1();

		  		}else
		  		{
		  			hideSubNavigation1();
		  		}
	
		 	}
		  
		 	function delayNavigation2() {
		  		
		  		// Checken, ob die Maus nach wie vor auf dem Feld liegt.
		  		if(isMouseOverNavigation2)
		  		{
		  			showSubNavigation2();

		  		}else
		  		{
		  			hideSubNavigation2();
		  		}
		 	}
		 	
		 	function showSubNavigation1()
		 	{
		 			document.getElementById("submenu_container1").style.display = "block";
			  		document.getElementById("submenu_container1").style.position = "absolute";
			  		document.getElementById("submenu_container1").style.top = "52px";
			  		document.getElementById("submenu_container1").style.left = "0px";
			  		document.getElementById("submenu_container1").style.background = "#fff";
			  		document.getElementById("submenu_container1").style.zIndex = "999";
			  		document.getElementById("submenu_container1").style.minHeight = "200px";
			  		document.getElementById("submenu_container1").style.width = "988px";
			  		document.getElementById("submenu_container1").style.boxShadow = "inset 0 0 5px rgba(0,0,0,0.6)";
			  		document.getElementById("submenu_container1").style.border = "2px solid #18804D";
			  		document.getElementById("submenu_container1").style.borderTop = "0";
		 	}
		 	
		 	function hideSubNavigation1()
		 	{
		 		document.getElementById("submenu_container1").style.display = "none";
		 	}
		 	
		 	function showSubNavigation2()
		 	{
		 			document.getElementById("submenu_container2").style.display = "block";
			  		document.getElementById("submenu_container2").style.position = "absolute";
			  		document.getElementById("submenu_container2").style.top = "52px";
			  		document.getElementById("submenu_container2").style.left = "0px";
			  		document.getElementById("submenu_container2").style.background = "#fff";
			  		document.getElementById("submenu_container2").style.zIndex = "999";
			  		document.getElementById("submenu_container2").style.minHeight = "200px";
			  		document.getElementById("submenu_container2").style.width = "988px";
			  		document.getElementById("submenu_container2").style.boxShadow = "inset 0 0 5px rgba(0,0,0,0.6)";
			  		document.getElementById("submenu_container2").style.border = "2px solid #18804D";
			  		document.getElementById("submenu_container2").style.borderTop = "0";
		 	}
		 	
		 	function hideSubNavigation2()
		 	{
		 		document.getElementById("submenu_container2").style.display = "none";
		 	}
		
		</script>

Ich bin über jeden Tipp dankbar, über Google konnte ich leider nichts konkretes zu dem Problem finden

Grüße
DaReaLSy

[Forumsgast]

aus diesem grund sollte man jquery nehmen , dort gibt es effect methode damit kannst du dann bestimmte elemente einblenden

[Forumsgast]

Wie Scorp schon sagt wäre jQuery an der Stelle geschickter.
Ansonsten... was sagen die Entwicklertools?
Wie rufst Du diese Funktionen auf? Also... wie bindest Du die Events an die Elemente?
Werden die Events überhaupt gefeuert?

[Forumsgast]

Wie Scorp schon sagt wäre jQuery an der Stelle geschickter.
Ansonsten... was sagen die Entwicklertools?
Wie rufst Du diese Funktionen auf? Also... wie bindest Du die Events an die Elemente?
Werden die Events überhaupt gefeuert?

danke für eure Antworten

So hab ich das jetzt gemacht, oben steht ja der JS-Code:

<li class="erster li1" onmouseenter="enterNavigation1()" onmouseleave="leaveNavigation1()"><a href="artikel.html">

Ich beschäftige mich jetzt etwas damit wie man das in jQuery lösen kann, bin aber leider eher pessimistisch das ich es schnell auf die Reihe bekomme.

[Gast]

Das Problem ist in IE und FF funktioniert der Code, in Chrome und Safari allerdings nicht.

etwas ungenau?

ich nehmne mal an dass die style definitionen nicht so klappen, oder das timeout, oder die functions definitionen, oder es wird überhauptnicht als js erkannt?

http://stackoverflow.com/questions/1...chrome-browser
http://forums.devshed.com/javascript...ra-653072.html

[Forumsgast]

http://jsfiddle.net/gnE7R/1/

statt deine styles über js zu vergeben, verwende eine css datei

[Forumsgast]

habe die Lösung gefunden, bin drauf gekommen als ihr hier Events erwähnt habt. Ich habe im Code die Events "onmouseenter" und "onmouseleave" benutzt, danach bin ich nochmal die Eventliste von javascript durchgegangen und habe nach einer alternative gesucht.
Mit den Events "onmouseover" und "onmouseout" Funktioniert die Navigation.

hier das alte:

<li class="erster li1" onmouseenter="enterNavigation1()" onmouseleave="leaveNavigation1()"><a href="artikel.html">

hier das neue:

<li class="erster li1" onmousover="enterNavigation1()" onmouseout="leaveNavigation1()"><a href="artikel.html">

Danke für die Antworten