div solange zeigen, wie man mit der maus rüber ist (xajax)

[pvdb]

hi,

es geht darum, dass ich einen Text Link habe. Wenn ich mit der Maus auf diesen Link gehe (OnMouseOver), soll direkt unter den link mit Xajax ein Div sichtbar werden. Nun soll das Div wieder ausgeblendet werden, wenn ich mit der Maus das Div verlasse. Mein aktueller Ansatz funktioniert irgendwie nicht richtig. Mal haut es hin, aber oft verschwindet das Div auch wieder, wenn ich mich mit der Maus im div bewege. Irgendwas scheint da nicht richtig zu sein.

So schaut mein html Code aus. Ich denke das hier irgendwie das Problem sein wird.

Code: Alles auswählen

<div id="div_content" OnMouseOut="xajax_hide_div&#40;&#41;; return false;">
<h3><a href="#" onMouseover="xajax_show_div&#40;&#41;; return false;">Mouseover Test</a></h3>
</div>

Hier meine Xajax Funktionen.

Code: Alles auswählen

// zeigt einen text wenn ich mit der mouse über den text bin
function show_div()
{
	$objResponse = new xajaxResponse();	
	
	$content = '<h3><a href="#" onMouseover="xajax_show_div&#40;&#41;; return false;">Mouseover Test</a></h3>';
	$content .= "Hier geht es los<br>.<br>.<br>.<br>.<br>und hier hört es auf";
	
	$objResponse->assign&#40;'div_content', "style.visibility", "visible"&#41;;
	$objResponse->assign&#40;"div_content", "innerHTML", $content&#41;;	
	//$objResponse->script&#40;'setTimeout&#40;"xajax_hide_div&#40;&#41;",3000&#41;;'&#41;;
	
	return $objResponse;
&#125;
$xajax->registerFunction&#40;"show_div"&#41;;

// versteckt das div wieder
function hide_div&#40;&#41;
&#123;
   $objResponse = new xajaxResponse&#40;&#41;;
   
   $content = '<h3><a href="#" onMouseover="xajax_show_div&#40;&#41;; return false;">Mouseover Test</a></h3>';
   $objResponse->assign&#40;'div_content', "style.visibility", "visible"&#41;;
   $objResponse->assign&#40;"div_content", "innerHTML", $content&#41;;	
   
   //$resp->assign&#40;'div_content', "style.visibility", "hidden"&#41;;
   //$resp->assign&#40;'div_content', "innerHTML", ""&#41;;
   
   return $objResponse;
&#125;
$xajax->registerFunction&#40;"hide_div"&#41;;

So ein ähnliches prinzip nutzen auch viele große Seiten, wo ein link angeklickt wird, ein Div erscheint und verschwindet wieder, wenn man das Div verlässt. So schwer müsste es doch nicht sein.

Vielleicht hat ja jemand den passenden Tip für mich.

Phil

[Southmedia]

Wird hide_div() bei mouseout aus dem div denn aufgerufen?
(Überprüfen zum Beispiel mit Firebug)

[Airport1]

> Mal haut es hin, aber oft verschwindet das Div auch wieder, wenn ich mich mit der Maus im div bewege.

das problem habe (hatte?) ich auch in einer meiner javascript anwendung. hab es noch nicht genauer untersucht, denke aber es liegt daran dass in dem moment wo das div angezeigt wird, das mouseover UND das mouseout eigentlich GENAU an diesem div "dran haengt" und nicht mehr an dem urspruenglichen link. falls du eine loesung findest teil sie uns doch bitte mit, ich waere sehr dankbar

ggf. ist das ganze via bubbling / capturing loesbar. es gibt ne ganze unmenge an komischen methoden fuer events, die meist nicht mal in buechern stehen. so hab ich z.b. extra eine methode die nur fuer jeden browser bewerkstelligt dass ein event nicht weiter propagiert (gebubbled..) wird und bspw. default-aktionen des browsers verhindert. sonst hat man ganz merkwuerdige effekte in einer drag&drop anwendung.

[pvdb]

@southmedia ich habe mir firebug mal installiert, konnte deine frage damit aber nicht beantworten. ich habe ein div dort ausgewählt und in firebug war es nur noch aufblinken, also show und hide.

@airport Ich denke auch, dass das Problem daran liegt, wenn ich das Div einen anderen Inhalt gebe, der link sich dann intern ändert, obwohl es für uns visuell das gleiche ist. Im Vorfeld hatte ich das komplett unterhalb des links, aber dann würde in diesem Falle das div schon ausgeblendet werden, bevor ich mit der Maus dahin kam.

Okay, ich dachte das ist ein kleines Problem, wo ein kleiner Tip ausreicht es zu lösen. Dann bleibt es wohl erstmal dabei das Ausblenden nach x Sekunden automatisch vornehmen zu lassen. Das geht wenigstens

[Southmedia]

Mach das einfach mal auf ner html-Seite fertig und poste den Link hier. Dann debugge ich das mal fix.

[Airport1]

oh, debuggst du meine javascripts gleich mit ?
ich haette da ganz viele problem die noch nicht perfekt geloest sind

SVGs die sich nur bei Lust und Laune redrawen, Opera CSS 16 bit position Bug der trotz Meldung an den Bugtracker nie gefixed wird, VML Polylines deren Punkte man nur aendern kann nach vorherigem Aushaengen aus dem Dom Tree, DOM Referenzen die verloren gehen, Events die feuern obwohl sie noch gar nicht duerfen (onload) ...

[Southmedia]

Naja, das ist ja schon 2 Stufen höher. Aber das Ding von pvdb sollte eigentlich kein Problem sein...

[Airport1]

hier mal ne demo fuer den css position bug den es nur bei opera und konqueror (und aehnliche browser, vielleicht opera mini..) gibt:

https://www.airport1.de/KonqOperaBug.htm

SOLL: anzeige der kacheln 1 2 3 oben, und 4 5 6 unten. firefox, safari und ie machens richtig. und so stehts auch im code. opera und konqueror scheinen hingegen probleme zu haben sobald man in der css position ueber signed 16 bit rausgeht.. bei w3c steht aber nicht das bei signed 16 bit schluss waere

[codemonk]

@pvdb:

Probier's mal so:

<div id="div_content">
<h3><a href="#" onMouseover="xajax_show_div(); return false;" OnMouseOut="xajax_hide_div(); return false;">Mouseover Test</a></h3>
</div>


Gruss


codemonk