Probleme mit zwei JavaScripts

SixxKiller · 7. September 2007

Hi Leutz.

Ich hab mal wieder ein kleines Problem.
Hab zwei JavaScripts die auf meiner HP laufen sollen. Einmal ein Menü und das zweite
ein Countdown.
Menü: (js datei)

Code:

	var currentMenu = null;
	var mytimer = null;
	var timerOn = false;
	var opera = window.opera ? true : false;

	if (!document.getElementById)
		document.getElementById = function() { return null; }
	
	function initialiseMenu(menu, starter, root) {
//		var menuId = menu.attributes(0).value;
		var leftstarter = false;
	
		if (menu == null || starter == null) return;
			currentMenu = menu;
	
		starter.onmouseover = function() {
			if (currentMenu) {
				if (this.parentNode.parentNode!=currentMenu) {
					currentMenu.style.visibility = "hidden";
					

				}
				if (this.parentNode.parentNode==root) {
					tempCurrentMenu = currentMenu
					while (tempCurrentMenu.parentNode.parentNode!=root) {
						tempCurrentMenu.parentNode.parentNode.style.visibility = "hidden";
						tempCurrentMenu = tempCurrentMenu.parentNode.parentNode;
					}
				}
				currentMenu = null;
				this.showMenu();
	        	}
		}
	
		menu.onmouseover = function() {
			if (currentMenu) {
				currentMenu = null;
				this.showMenu();
	        	}
		}	
	
		starter.showMenu = function() {
			if (!opera) {
				if (this.parentNode.parentNode==root) {
					menu.style.left = this.offsetLeft + "px";
					menu.style.top = this.offsetTop + this.offsetHeight + "px";
				}
				else {
				 	menu.style.left = this.offsetLeft + this.offsetWidth + "px";
				 	menu.style.top = this.offsetTop + "px";
				}
			}
			else {
				if (this.parentNode.parentNode==root) {
					menu.style.left = this.offsetLeft + "px";
					menu.style.top = this.offsetHeight + "px";
				}
				else {
				 	menu.style.left = this.offsetWidth + "px";
				 	menu.style.top = this.offsetTop + "px";
				}

			}
			menu.style.visibility = "visible";
			currentMenu = menu;
		}

		starter.onfocus	 = function() {
			starter.onmouseover();
		}
	
		menu.onfocus	 = function() {
//			currentMenu.style.visibility="hidden";
		}

		menu.showMenu = function() {
			menu.style.visibility = "visible";
			currentMenu = menu;
			stopTime();
		}

		menu.hideMenu = function()  {
			if (!timerOn) {
				mytimer = setInterval("killMenu('" + this.id + "', '" + root.id + "');", 2000);
				timerOn = true;
				for (var x=0;x<menu.childNodes.length;x++) {
					if (menu.childNodes[x].nodeName=="LI") {
						if (menu.childNodes[x].getElementsByTagName("UL").length>0) {
							menuItem = menu.childNodes[x].getElementsByTagName("UL").item(0);
							menuItem.style.visibility = "hidden";
						}
					}
				}
			}
		}

		menu.onmouseout = function(event) {
			this.hideMenu();
		}

		starter.onmouseout = function() {
			for (var x=0;x<menu.childNodes.length;x++) {
				if (menu.childNodes[x].nodeName=="LI") {
					if (menu.childNodes[x].getElementsByTagName("UL").length>0) {
						menuItem = menu.childNodes[x].getElementsByTagName("UL").item(0);
						menuItem.style.visibility = "hidden";
					}
				}
			}
			menu.style.visibility = "hidden";
		}
}
	function killMenu(menu, root) {
		var menu = document.getElementById(menu);
		var root = document.getElementById(root);
		menu.style.visibility = "hidden";
		for (var x=0;x<menu.childNodes.length;x++) {
			if (menu.childNodes[x].nodeName=="LI") {
				if (menu.childNodes[x].getElementsByTagName("UL").length>0) {
					menuItem = menu.childNodes[x].getElementsByTagName("UL").item(0);
					menuItem.style.visibility = "hidden";
				}
			}
		}
		while (menu.parentNode.parentNode!=root) {
			menu.parentNode.parentNode.style.visibility = "hidden";
			menu = menu.parentNode.parentNode;
		}
		stopTime();
	}
	function stopTime() {
		if (mytimer) {
		 	 clearInterval(mytimer);
			 mytimer = null;
			 timerOn = false;
		}
	} 

	window.onload = function() {
		var root = document.getElementById("menuList");
		getMenus(root, root);
	}

function getMenus(elementItem, root) {
	var selectedItem;
	var menuStarter;
	var menuItem;
	for (var x=0;x<elementItem.childNodes.length;x++) {
		if (elementItem.childNodes[x].nodeName=="LI") {
			if (elementItem.childNodes[x].getElementsByTagName("UL").length>0) {
				menuStarter = elementItem.childNodes[x].getElementsByTagName("A").item(0);
				menuItem = elementItem.childNodes[x].getElementsByTagName("UL").item(0);
				getMenus(menuItem, root);
				initialiseMenu(menuItem, menuStarter, root);
			}
		}
	}
}

Code:

	<div id="mainMenu">
		<ul id="menuList" class="style5">
        		<li class="menubar">
          			<a href="#" class="starter" accesskey="1">Home</a>
          			<ul id="menu1" class="menu">
          			</ul>
        		</li>
        		<li class="menubar">
          			<a href="#" class="starter" accesskey="2">Über Uns</a>
          			<ul id="menu2" class="menu">
					<li><a href="#" title="Option 1">1. Vorstand</a></li>
					<li><a href="#" title="Option 2">2. Mitglieder</a></li>
					<li><a href="#" title="Option 3">3. Ehrenmitglieder</a></li>
					<li><a href="#" title="Option 3">4. Spielerpatenschaft</a></li>
					<li><a href="#" title="Option 3">5. Bambinis</a></li>
          			</ul>
        		</li>
        		<li class="menubar">
          			<a href="#" class="starter" accesskey="3">onTour</a>
          			<ul id="menu3" class="menu">
					<li><a href="#" title="Option 1">1. onTour 2006</a></li>
					<li><a href="#" title="Option 2">2. onTour 2007</a></li>
					<li><a href="#" title="Option 3">3. onTour 2008</a></li>
          			</ul>
        		</li>
        		<li class="menubar">
          			<a href="#" class="starter" accesskey="4">Galerie</a>
          			<ul id="menu4" class="menu">
          			</ul>
        		</li>
        		<li class="menubar">
          			<a href="#" class="starter" accesskey="5">Tuckentours</a>
          			<ul id="menu5" class="menu">
					<li><a href="#" title="Option 1">1. Tuckentours</a></li>
					<li><a href="#" title="Option 2">2. Tuckentours</a></li>
					<li><a href="#" title="Option 3">3. Tuckentours</a></li>
          			</ul>
        		</li>
        		<li class="menubar">
          			<a href="#" class="starter" accesskey="6">Tuckentours</a>
          			<ul id="menu6" class="menu">
					<li><a href="#" title="Option 1">1. Tuckentours</a></li>
					<li><a href="#" title="Option 2">2. Tuckentours</a></li>
					<li><a href="#" title="Option 3">3. Tuckentours</a></li>
          			</ul>
        		</li>

        		<li class="menubar">
          			<a href="#" class="starter" accesskey="7">Impressum</a>
          			<ul id="menu7" class="menu">
					<li><a href="#" title="Option 2">1. Impressum</a></li>
					<li><a href="#" title="Option 1">2. Links</a></li>
					<li><a href="#" title="Option 2">3. Copyright</a></li>
          			</ul>
        		</li>
        		<li class="menubar">
          			<a href="#" class="starter" accesskey="8">Kontakt</a>
          			<ul id="menu8" class="style8">
          			</ul>
        		</li>
      		</ul>
	</div>

Countdown:

Code:

<script type='text/javascript'>
// Erstellt mit dem Countdown-Generator - Homepage-Total.de
var end = new Date('September 9, 2007 18:30:00');
function toSt2(n) {
  s = '';
  if (n < 10) s += '0';
  return (s + n).toString();
}
function toSt3(n) {
  s = '';
  if (n < 10) s += '00';
  else if (n < 100) s += '0';
  return (s + n).toString();
}
function countdown() {
  d = new Date();
  count = Math.floor(end.getTime() - d.getTime());
  if(count > 0) {
    miliseconds = toSt3(count%1000); count = Math.floor(count/1000);
    seconds = toSt2(count%60); count = Math.floor(count/60);
    minutes = toSt2(count%60); count = Math.floor(count/60);
    hours = toSt2(count%24); count = Math.floor(count/24);
    days = count;
    document.getElementById('c1').innerHTML = days + ' TAGEN';
    document.getElementById('c2').innerHTML = hours + ':' + minutes + ':' + seconds
    setTimeout('countdown()', 50);
  }
}
</script>

<body onload='countdown();'>

<SPAN id=c1 style="FONT: 11px Arial; COLOR: black;"></SPAN>
 <SPAN id=c2 style="FONT: 11px Arial; COLOR: black;"></SPAN>

Einzeln läuft alles prima aber hab ich beide drin geht das Menü nicht obwohl die js. datei ausgelagert ist.
Da ich mich mit JavaScript recht wenig auskennen wäre Hilfe nett.
Danke schonmal für Eure Mühe.

Greetz SixxKiller

Quaese · 7. September 2007

Hi,

mir sind zwei Zuweisungen an den onload-Event aufgefallen, wobei der im BODY-Tag den ersten
überschreibt.

Versuch mal den Event aus dem Body-Tag zu nehmen. Stattdessen erweiterst du den anderen wie folgt:

Code:

window.onload = function() {
  var root = document.getElementById("menuList");
  getMenus(root, root);
  countdown();
}

Vielleicht hilft dir das weiter.

Ciao
Quaese

SixxKiller · 7. September 2007

Jetzt bin ich etwas erstaunt. Dachte erst da liegt eine Verwechslung vor aber
so wie Quaese es beschrieben hat funktioniert es einwandfrei.
Riesen dank für die schnelle Hilfe Quaese!

Greetz SixxKiller

Probleme mit zwei JavaScripts

SixxKiller

Erfahrenes Mitglied

Quaese

Moderator

SixxKiller

Erfahrenes Mitglied

Neue Beiträge