Div onmouseout ausblenden - aber nicht bei Dropdown

[Ralf Heumann]

Hallo zusammen,

auf http://www.janus-wa.de/layouts/testcase/referenzen.html habe ich mal in Clickdummy zusammengestellt. Sorry schonmal für die großen Bilder..

Mein Problem liegt hier bei der Infofläche links oben "Sie sind".
Wenn man die Maus darüberbewegt soll direkt darüber ein Div-Layer eingeblendet werden. Wenn man das neue Fenster verlässt soll sich dieser Layer wieder schließen. Das funktioniert soweit ganz prima. Nur soll jetzt aber in diesem Layer ein Dropdownmenü bedient werden können. Offensichtlich wird dieses aber nicht als Element innerhalb des Layers akzeptiert und das Fenster schließt sich..

Wie könnte man das beheben?

Ich habe das ganze auch schon ohne Javascript mit Hover versucht. Bei Hover hat sich die Größe des Fensters geändert, sprich der Inhalt wurde komplett sichtbar - das hat zwar auch funktioniert nur beim IE muss dies mit einem <a href> gelöst werden. Dadurch wird das gesamte Fenster ein Link, was eher ungünstig ist..

Zudem müsste ich innerhalb des <a>-Tags ein Select-Menü schreiben:

<a href="#">
  <select name="lala">
    <option value="1">Option1</option>
  </select>
</a>

Der Validator sagt zwar, das wäre valid, kommt mir aber suspekt vor...

Vielen Dank schonmal für die Hilfe,

Grüße Ralf

[wahsaga]

hi,

Wenn man die Maus darüberbewegt soll direkt darüber ein Div-Layer eingeblendet werden. Wenn man das neue Fenster verlässt soll sich dieser Layer wieder schließen. Das funktioniert soweit ganz prima. Nur soll jetzt aber in diesem Layer ein Dropdownmenü bedient werden können. Offensichtlich wird dieses aber nicht als Element innerhalb des Layers akzeptiert und das Fenster schließt sich..

Tritt das Problem nur im IE auf?
Könnte dann damit zusammenhängen, dass Selectfelder ebenso wie Iframes "windowed controls" sind.

Wie könnte man das beheben?

Ggf. das Select auch noch mit einer onmouseover/-out Eventbehandlung versehen - und dabei ein Flag setzen, welches kennzeichnet, dass der Nutzer sich gerade über dem Select befindet.
In der Behandlung des onmouseout des Divs dann zuerst dieses Flag abfragen - und wenn es signalisiert, dass der Nutzer sich gerade auf dem Select befindet, nicht ausblenden.

gruß,
wahsaga

[Ralf]

hi,

Tritt das Problem nur im IE auf?
Könnte dann damit zusammenhängen, dass Selectfelder ebenso wie Iframes "windowed controls" sind.

Nein das Problem tritt auch im Fx auf.

In der Behandlung des onmouseout des Divs dann zuerst dieses Flag abfragen - und wenn es signalisiert, dass der Nutzer sich gerade auf dem Select befindet, nicht ausblenden.

hm das wäre die einzige Möglichkeit die mir auch in den Sinn kam, nur wurde ich davon etwas abgeschreckt - ich weiß noch nicht ob in sollch einem layer noch andere Formularelemente Platz finden werden und wollte dann nicht auf jedes Formularfeld eine Javascriptfunktion anwenden lassen...

Wie sieht es denn mit der Hover-Version aus, die ich ansprach? Ist das <a href><select></a> Konstrukt in meinem vorigen Beispiel denn wirklich valid? Auf die Lösung kam ich während der Tests ganz spontan und sie Lösung würde mir eigentlich gut gefallen, da kein Javascript verwendet wird, geklappt hat es ja scheinbar..

Das unschöne war eben nur, dass das das ganze überlappende Fenster dann eine Klickfläche aufweist. Vielleicht könnte ich ja mit der Eigenschaft cursor den Pfeil simulieren...

Von der Umsetzung her wärs ne einfache und Javascriptlose Lösung - ich bin mir nur nicht sicher, ob der Lösungsweg so korrekt ist..

[Gernot Back]

Hallo Ralf,

auf http://www.janus-wa.de/layouts/testcase/referenzen.html

Mein Problem liegt hier bei der Infofläche links oben "Sie sind".
Wenn man die Maus darüberbewegt soll direkt darüber ein Div-Layer eingeblendet werden. Wenn man das neue Fenster verlässt soll sich dieser Layer wieder schließen. Das funktioniert soweit ganz prima. Nur soll jetzt aber in diesem Layer ein Dropdownmenü bedient werden können. Offensichtlich wird dieses aber nicht als Element innerhalb des Layers akzeptiert und das Fenster schließt sich..

Das ist das ganz normale Verhalten in allen Browsern, dass ein mouseover über einem Kindelement wie ein Mousout im Eleternelement wirkt.

Dazu, wie man dies umgehen kann, poste ich gerne Avalons Tipp:

http://forum.de.selfhtml.org/archiv/2005/4/t105365/#m651418

Gruß Gernot

[Ralf]

Hey super! Vielen Dank für den Hinweis. Damit klappt es :)

--> http://www.janus-wa.de/layouts/testcase/referenzen.html

Es gibt nur noch ein seltsames Phänomen im IE: Das Fenster soll sich auch bei onchange des Dropdownmenüs schließen. Das tut es im Fx wie beabsichtigt - nur der IE möchte es onchange nicht schließen.

Woran kann das liegen?

[wahsaga]

hi,

Es gibt nur noch ein seltsames Phänomen im IE: Das Fenster soll sich auch bei onchange des Dropdownmenüs schließen. Das tut es im Fx wie beabsichtigt - nur der IE möchte es onchange nicht schließen.

Wer changed sich denn on?

Aktueller Code aus deiner Seite:

<div id="siesindlayer" ... onchange="closediv('siesindlayer');">
           <select name="siesuchen" style="margin: 130px 0 0 10px; width: 150px;">

gruß,
wahsaga

[Ralf]

Ohje *hand auf Stirn* ich brauch Urlaub.. danke :)
Vor lauter Javascript bin ich beim Lesen meines HTML - Codes immer eine Zeile nach oben gerutscht, sodass ich dachte, dass der onchange-Eventhandler bereits im Selectfield steht :/

Trotzdem Danke für Eure Unterstützung!

Viele Grüße,

Ralf

[Gernot Back]

Hallo wahsaga,

Es gibt nur noch ein seltsames Phänomen im IE: Das Fenster soll sich auch bei onchange des Dropdownmenüs schließen. Das tut es im Fx wie beabsichtigt - nur der IE möchte es onchange nicht schließen.

Wer changed sich denn on?

Aktueller Code aus deiner Seite:

<div id="siesindlayer" ... onchange="closediv('siesindlayer');">
           <select name="siesuchen" style="margin: 130px 0 0 10px; width: 150px;">

Ja, und die Erklärung, warum es im IE nicht funktioniert, in anderen Browsern aber sehr wohl, ist möglicherweise, dass ein Event im IE nach oben, d.h. zu seinen Vorfahrenselementen "blubbert", in anderen Browsern aber nach unten, zu möglichen Nachfahrenselementen "sickert", und deshalb also auch beim Select-Element ankommt.

http://www.javascript-workshop.de/buch/11.html

Gruß Gernot

[wahsaga]

hi,

Aktueller Code aus deiner Seite:

<div id="siesindlayer" ... onchange="closediv('siesindlayer');">
           <select name="siesuchen" style="margin: 130px 0 0 10px; width: 150px;">

Ja, und die Erklärung, warum es im IE nicht funktioniert, in anderen Browsern aber sehr wohl, ist möglicherweise, dass ein Event im IE nach oben, d.h. zu seinen Vorfahrenselementen "blubbert", in anderen Browsern aber nach unten, zu möglichen Nachfahrenselementen "sickert", und deshalb also auch beim Select-Element ankommt.

Müsste das nicht andersherum sein?

Der Event tritt auf dem Select auf, dort hat sich etwas geändert. Dort interessiert sich aber leider keiner für dieses Ereignis ...
Also blubbert es jetzt eine Ebene nach oben, zum Div. Und hey, der hat plötzlich Interesse an einem onchange, also passiert jetzt auch was ...

gruß,
wahsaga

[Gernot Back]

Hallo Ralf,

--> http://www.janus-wa.de/layouts/testcase/referenzen.html

Es gibt nur noch ein seltsames Phänomen im IE: Das Fenster soll sich auch bei onchange des Dropdownmenüs schließen. Das tut es im Fx wie beabsichtigt - nur der IE möchte es onchange nicht schließen.

Woran kann das liegen?

Vielleicht daran, dass du weder in deiner JS-, noch in deiner HTML-Datei deinem Select-Element gar keinen onchange-Eventhandler zuweist.

http://www.janus-wa.de/layouts/testcase/js/functions.js

Gruß Gernot

[JürgenB]

Hallo Ralf,

--> http://www.janus-wa.de/layouts/testcase/referenzen.html

ist es gewünscht, dass das Div sichtbar bleibt, wenn die Maus es über den linken Rand verlässt?

Gruß, Jürgen