javascript kompatibilitätsproblem

[ewigergert]

Hallo,

für meine Navigationsleiste benötige ich 2 Javascripts.
Leider harmonieren diese im IE nicht, wenn ich eines deaktiviere, funktioniert das andere.
Bei Firefox & Chrome laufen beide parallel.

Das eine JS (ich nenns mal JS1) ist nicht von mir, ich verstehe es auch nicht wirklich.
Das zweite JS (JS2) soll ein Problem lösen, dass ich mit der Navi-Leiste habe, wenn man herauszoomt. (siehe klick mich)

Die Seite mit dem Problem: klick mich

Ich habe mir auch eine Lösung? überlegt, kann diese jedoch nicht umsetzen:
Am einfachsten wäre es doch, wenn ich für meinen letzten Punkt (Punkt8) das
JS1 deaktivere. Jedoch steht da: document.getElementById("nav").getElementsByTagName("LI");, also er benutzt alles LI's aus meine Navi-Leiste. Kann ich das auch anders machen?

Grüße
ewigergert

JS1:

  
stuHover = function() {  
	var cssRule;  
	var newSelector;  
	for (var i = 0; i < document.styleSheets.length; i++)  
		for (var x = 0; x < document.styleSheets[i].rules.length ; x++)  
			{  
			cssRule = document.styleSheets[i].rules[x];  
			if (cssRule.selectorText.indexOf("LI:hover") != -1)  
			{  
				 newSelector = cssRule.selectorText.replace(/LI:hover/gi, "LI.iehover");  
				document.styleSheets[i].addRule(newSelector , cssRule.style.cssText);  
			}  
		}  
	var getElm = document.getElementById("nav").getElementsByTagName("LI");  
	for (var i=0; i<getElm.length; i++) {  
		getElm[i].onmouseover=function() {  
			this.className+=" iehover";  
		}  
		getElm[i].onmouseout=function() {  
			this.className=this.className.replace(new RegExp(" iehover\\b"), "");  
		}  
	}  
}  
if (window.attachEvent) window.attachEvent("onload", stuHover);  

JS2

  
function over() {  
 document.getElementById("nav").style.backgroundImage = "url(grafik/header_over8.gif)";  
}  
  
function out() {  
 document.getElementById("nav").style.backgroundImage = "url(grafik/header8.gif)";  
}  

[mrjerk]

Hallo,
Eine Möglichkeit wäre, dass Du Deine "over" und "out"-Funktionen in die Schleife in dem JavaScript schreibst, und sie dann nur für das letzte (also das 8.) Element ausfürhst:

  
// Nummer des letzten Elements  
var LAST_LI_NUMBER = 7;  
  
for (var i=0; i<getElm.length; i++) {  
   getElm[i].onmouseover=function() {  
       this.className+=" iehover";  
       if (i == LAST_LI_NUMBER) {over();}  
   }  
   getElm[i].onmouseout=function() {  
	this.className=this.className.replace(new RegExp(" iehover\\b"), "");  
        if (i == LAST_LI_NUMBER) {out();}  
   }  
}  

Das müsste als Quick & Dirtly-Lösung funktionieren.

Wenn man es sauber aufsetzen will, müsste man vielleicht sowas wie einen kleinen Event-Manager basteln, bei dem sich MouseOver und Mouseout-Funktionen registrieren müssen.

So als Entwurf (ungetestet und geht sicher auch schöner):

  
function MyEventManager (element) {  
   this.onMouseOver = new Array();  
   this.onMouseOut = new Array();  
   element.onMouseOver = function () {this.handleEvents('onMouseOver');}  
   element.onMouseOut = function ()  {this.handleEvents('onMouseOut');}  
}  
MyEventManager.prototype.handleEvents (eventType) {  
   for (var i = 0; i < this[eventType].length; i++) {  
       this[eventType][i]();  
   }  
}  
MyEvenetManager.prototype.registerFunction (func, eventType) {  
   this[eventType].push(func);  
}  
  
  
var events = new MyEventManager(document.getElementById("someElement"));  
events.register(function () {alert("mOUSEoVER");}, 'onMouseOver');  
events.register(function () {alert("MouseOut");}, 'onMouseOut');  

[JürgenB]

Hallo ewigergert,

das erste Script läuft nur im IE und überschreibt die mouseover/-out-Events der LIs, die du im HTML mit <li onmouse...= gesetzt hast. So wie das Script den window.onload setzt, kann es auch die Events für die LIs hinzufügen:

statt

getElm[i].onmouseover=function() {
             this.className+=" iehover";
    {

versuch mal

getElm[i].attachEvent("onmouseover",function() {
             this.className+=" iehover" );
    });

Gruß, Jürgen

[ewigergert]

Hallo,

Vielen Dank für die Mithilfe.
Ich habe die Methode von Jürgen ausprobiert und sie scheint zu funktionieren.  :-)

Viele Grüße
ewigergert

[mrjerk]

AttachEvent...das ist ja mal stylisch...kannte ich noch gar nicht (also nicht von javaScript).

Wieder was gelernt....

[JürgenB]

Hallo mrjerk,

AttachEvent...das ist ja mal stylisch...kannte ich noch gar nicht (also nicht von javaScript).

Wieder was gelernt....

attachEvent ist IE-only, die anderen Browser kennen addEventListener. Mit attachEvent kann man aber IE-only-Script schreiben. Siehe hierzu auch

http://molily.de/js/einbindung.html#dom-events
http://molily.de/js/einbindung.html#microsoft

Gruß, Jürgen

[Struppi]

versuch mal

getElm[i].attachEvent("onmouseover",function() {
             this.className+=" iehover" );
    });

Das ist gefährlich. Meines Wissens gibt es IE Versionen, wo in dem Event this nicht das Objekt ist.

Die normale Schreibweise onevent ist dagagen zuverlässig in allen Verisonen.

Struppi.

[JürgenB]

Hallo Struppi,

stimmt. Hier http://molily.de/js/einbindung.html#einfaches-addevent steht, wie es richtig geht.

Gruß, Jürgen

[Struppi]

Das zweite JS (JS2) soll ein Problem lösen, dass ich mit der Navi-Leiste habe, wenn man herauszoomt. (siehe klick mich)

was natürlich Unsinn ist. Warum verwendest du hier nicht einfach eine Prozentangabe für die Breite?
du hast 10 Links, d.h. jedes soll 1/10 der Gesamtbreite einnehmen, also 10%

Struppi.