createAttribute.nodeValue <=> IE / FF / Opera unterschiedliche Darstellung

[!duesi]

Hallo zusammen

Ich möchte mit Ajax für unsre Community einen Tooltip generieren, welcher aufklappt, wenn man mit der Maus über den Usernamen fährt.

Nun hab ich mir folgenden Code zusammengebastelt.
Lustig ist, dass er im Firefox problemlos funktioniert (onmouseover und out), im Opera funktioniert nur onMouseOver und im IE geht gar nix (Fehlermeldung: "Mitglied nicht gefunden" und er meint damit die Style-Attribute).

echo '<a id="userbox_' . $goresult['userID'] . '" href="" onMouseOver="userbox(\'userbox_' . $goresult['userID'] . '\');" onMouseOut="hideUserbox(\'userbox_' . $goresult['userID'] . '\');">' . $goresult['userID'] . '</a> ';

function userbox(Box) {
	var point = { x: 0, y: 0 };
	
	if(Box) {
		var element = document.getElementById(Box);
		while (element && element.tagName.toUpperCase() != 'BODY') {
			point.x += element.offsetLeft;
			point.y += element.offsetTop;
			element = element.offsetParent;
		}
	}
	var myDiv = document.createElement('div');
	var myText = document.createTextNode('Test');
	
	var myStyle = document.createAttribute('style');
	var Left = point.x - 150;
	var Top = point.y + 5;
	myStyle.nodeValue = "position:absolute;left:" + Left + "px;top:" + Top +"px;width:100px;background-color:#CCC;display.block;";
	myDiv.setAttributeNode(myStyle);
	
	var myId = document.createAttribute('id');
	myId.nodeValue = "box_" + Box;
	myDiv.setAttributeNode(myId);
	
	myDiv.appendChild(myText);
	
	var myAusgabebereich = document.getElementById("content");
	myAusgabebereich.appendChild(myDiv);
}

function hideUserbox(Box) {
	var Id = "box_" + Box;
	document.getElementById(Id).style.display = "none";
}

Ist das ein Fehler von mir oder vom IE?

[steffenk]

ich vermute das es an createAttribute('style') liegt.
Das wird DOM nicht mitbekommen, daher würde ich style so setzen:

myDiv.style.position = 'absolute';

etc.

[!duesi]

OK Danke, das hat geholfen.

Nun hab ich aber ein weiteres Problem:
Ich möchte die Userbox wieder ausblenden, wenn der User sich mit der Maus nicht mehr in der Box befindet (+500 Milisekunden)

// **** Userbox ausblenden *****
function hideUserbox(Box) {
	var ev = window.event;
	var left	= ev.offsetX;
	var top		= ev.offsetY;
	
	var boxLeft = pos(Box).x;
	var boxTop = pos(Box).y;
	
	while (ev) {
		if (left < boxLeft && top < boxTop) {
			warten(500);
			var Id = "box_" + Box;
			document.getElementById(Id).style.display = "none";
			document.getElementById("content").removeChild(document.getElementById(Id));
		}
	}
}

Aber irgendwas funktioniert nicht :s
Ich vermute, er kann nicht überprüfen, wo sich die Maus befindet, respektive ob die Maus noch in der Box ist...

[!duesi]

hmm gibts irgendwie die Möglichkeit

if (document.getElementById(id).onmouseout) { //...

zu machen? Hab zu Eventhandlern nur die HTML Form gefunden...

[steffenk]

schau Dir den Eventhandler mal genauer an, z.B.
http://www.mediaevent.de/javascript/onmouseout.html

[!duesi]

Super vielen Dank!

Jetzt hab ich nur noch n logisches Problem. Und zwar schliesst die Box jetzt zwar, wenn ich mit der Maus in der Box war. Wenn ich aber aus dem Link rausfahre, ohne in die Box zu gehen, sollte sie auch schliessen. Aber eben nur wenn ich aus dem Link rausfahre, und nicht in die Box gehe...

[steffenk]

Du kannst einen Timer beim Verlassen des Links starten (zum Schliessen der Box), der gestoppt wird, wenn Du in die Box gehst.

[!duesi]

Irgendwie steh ich auf dem Schlauch

function hideUserbox(Box) {
	var Id = "box_" + Box;
	
	document.getElementById(Box).onmouseout = function(event) {
		var sDate = new Date();
		var sMsec = sDate.getTime();
		do {
			eDate = new Date();
			eMsec = eDate.getTime();
		} 
		while ((eMsec - sMsec) < 500);
		
		if ((eMsec - sMsec) > 500 && !document.getElementById(Id).onmouseover) {
			document.getElementById(Id).style.display = "none";
			document.getElementById("content").removeChild(document.getElementById(Id));
		}
	}
	
	document.getElementById(Id).onmouseout = function(event) {
		warten(500);
		document.getElementById(Id).style.display = "none";
		document.getElementById("content").removeChild(document.getElementById(Id));
	}
}

[steffenk]

Deine Timer sind so verkehrt.

Hier ein Beispiel:

onmouseover="window.clearTimeout (tout);" 
onmouseout="tout=window.setTimeout('hideLayer(20071219)',5000)"

[!duesi]

Hm dankeschön.

Ich hatte jetzt bereits die verschiedensten Kombinationen. Die erfolgreichste davon war, dass die Box zuklappte, wenn man den Link verlässt, OHNE auf die Box zu gehen, aber aufbleibt, wenn man auf die Box geht.
Nur beim Verlassen der Box schloss sie nich...

Und nun hab ich angeblich einen Syntaxerror bei Zeile 3.

function hideUserbox(Box) {
	var Id = 'box_' + Box;
	window.setTimeout("hideTimer()", 500);
	
	function hideTimer() {
		if (document.getElementById(Id).onmouseover) {
			window.clearTimeout();
			
			if (document.getElementById(Id).onmouseout) {
				warten(500);
				hideBox(Id);
			}
		}
		else {
			hideBox(Id);
		}
	}
	
	function hideBox(Id) {
		document.getElementById("content").removeChild(document.getElementById(Id));
	}
}

Firebug meldet: "hideTimer is not defined" und IE "Syntaxfehler"...

[steffenk]

Du kannst keine function in einer function definieren!

[!duesi]

Und die Moral von der Geschicht'? PHP Programmiere sollten sich nicht an JavaScript wagen

Hier noch der funktionierende Code:

function hideUserbox(Box) {
	timer = window.setTimeout("hideBox()", 500);
	
	document.getElementById("box_auf").onmouseover = function(event) {
		window.clearTimeout(timer);
	}
	document.getElementById("box_auf").onmouseout = function(event) {
		window.clearTimeout(timer);
		warten(500);
		hideBox();
	}
}	
function hideBox() {
	document.getElementById("content").removeChild(document.getElementById("box_auf"));
}