"onmouseout" Objekt ausschließen

simonpicos · 19.06.2011

Hallo zusammen,

Nachdem ich in HTML und CSS soweit ganz fit bin, versuche ich mich nun in JavaScript einzuarbeiten. Dabei stoße ich jetzt auf ein Problem:
Bei meinem aktuellen Projekt:
habe ich einen kleinen ausklappbaren Newsfeed (Oder wie man es auch immer nennen will

) erstellt.
Funktioniert soweit auch wie ich es will: Bei Klick auf die Lasche erscheint es, und bei klick auf die andere Lasche verschwindet es wieder. Außerdem verschwindet er wenn man mit der Maus von dem Div runtergeht (nach 800 ms) Und genau da liegt mein Problem.
Wenn man mit dem Cursor auf das "Zuklapp-Div" geht denkt der Computer: "oh er hat das div verlassen! Also den Feed zuklappen!"
Wo er ja auch recht hat. Ich möchte aber, dass wenn man auf das "zuklapp-div" geht, er ne Ausnahme macht und das Feed-Div nicht zuklappt.
Wie könnte ich das realisieren? Kann mir jemand helfen?

Ich hoffe ihr könnt mein Problem verstehen, auch wenn ich mich ziemlich kompliziert ausgedrückt habe

Aber es ist einfach ziemlich schwer zu erklären.

Simon

Duddle · 19.06.2011

AW: "onmouseout" Objekt ausschließen

Du könntest das gesamte Ding (also Lasche plus ausklappbarem Inhalt) in ein Element schachteln und auf dieses das onmouseout anwenden. Wenn richtig gemacht würde der Event dann erst gefeuert werden, wenn du ausserhalb dieses Containers bist (d.h. ausserhalb der Lasche und des Inhalts).

Oder du arbeitest mit Variablen, d.h. du setzt eine Variable per onmousein/onmouseout über der Lasche. Wenn du dann das (bisherige) SidebareMouseOut() aufrufst, prüfst du dort drin ob diese Variable gesetzt ist und schließt in Abhängigkeit davon das ganze Ding.

Es gibt sicherlich noch schickere Lösungen, aber diese fallen mir gerade ein.

Duddle

simonpicos · 19.06.2011

AW: "onmouseout" Objekt ausschließen

Duddle schrieb:
Du könntest das gesamte Ding (also Lasche plus ausklappbarem Inhalt) in ein Element schachteln und auf dieses das onmouseout anwenden. Wenn richtig gemacht würde der Event dann erst gefeuert werden, wenn du ausserhalb dieses Containers bist (d.h. ausserhalb der Lasche und des Inhalts).

Dann wäre das Element, in das ich die 2 Divs gepackt habe aber quadratisch.. (Also nur mit html) Oder was meinst du? Hab ich dich falschverstanden?

Duddle schrieb:
Oder du arbeitest mit Variablen, d.h. du setzt eine Variable per onmousein/onmouseout über der Lasche. Wenn du dann das (bisherige) SidebareMouseOut() aufrufst, prüfst du dort drin ob diese Variable gesetzt ist und schließt in Abhängigkeit davon das ganze Ding.

Das Probier ich mal

Danke

Simon

simonpicos · 19.06.2011

AW: "onmouseout" Objekt ausschließen

Also ich habe versucht deinen 2. Vorschlag mal umzusetzen, dabei habe ich allerdings föllig versagt :'(
Das sieht bei mir so aus:

PHP:

function SidebarMouseOut(){
        if (mouse==0){
            window.setTimeout("SidebarOut()",800);
            }
        else{}    
}

var mouse=0

function CheckMouse(){
        mouse= "1"
}

HTML:

        <div id="sidebarmain" onmouseout="SidebarMouseOut()">[19:01]****Erster Eintrag<br/>[19:01]****Zweiter Eintrag</div>
        <div id="sidebarin" onclick="SidebarIn()"  ></div>
        <div id="sidebarout" onclick="SidebarOut()" onmouseover="CheckMouse()" ></div>

Lach mich bitte nicht zusehr aus

Ne im Ernst, ich lerne das erst grade, aber man is ja hier um zu lernen, nech?

Duddle · 19.06.2011

AW: "onmouseout" Objekt ausschließen

simonpicos schrieb:
Dann wäre das Element, in das ich die 2 Divs gepackt habe aber quadratisch.. (Also nur mit html) Oder was meinst du? Hab ich dich falschverstanden?

Nicht unbedingt quadratisch. Das <div> würde sich (falls nicht anders eingeschränkt) an den Inhalt anpassen, d.h. eine Art Rahmen für alles eingeschlossene (= Lasche + sidebarmain) bilden. Dieser (unsichtbare) Rahmen könnte dann genau das triggern, was derzeit sidebarmain macht.

simonpicos schrieb:
Also ich habe versucht deinen 2. Vorschlag mal umzusetzen, dabei habe ich allerdings föllig versagt :'(

Falls du Firefox benutzt, installier dir Firebug und lass dir die Firebug-Konsole anzeigen. Dort siehst du JS-Fehler, sobald sie auftreten. Zum Beispiel kommt derzeit beim Hover über die Lasche "sidebarIn is not defined", weil du onmouseover="sidebarIn()" im entsprechenden <div> spezifiziert hast. Du hast aber keine Methode namens sidebarIn(), höchstens SidebarIn(). Deshalb bricht JS ab und nichts funktioniert mehr.

Duddle

simonpicos · 19.06.2011

AW: "onmouseout" Objekt ausschließen

Duddle schrieb:
Nicht unbedingt quadratisch. Das <div> würde sich (falls nicht anders eingeschränkt) an den Inhalt anpassen, d.h. eine Art Rahmen für alles eingeschlossene (= Lasche + sidebarmain) bilden. Dieser (unsichtbare) Rahmen könnte dann genau das triggern, was derzeit sidebarmain macht

.
Achso, ja klar... Okey das ist auch ne Möglichkeit.

Duddle schrieb:
Falls du Firefox benutzt, installier dir Firebug und lass dir die Firebug-Konsole anzeigen. Dort siehst du JS-Fehler, sobald sie auftreten. Zum Beispiel kommt derzeit beim Hover über die Lasche "sidebarIn is not defined", weil du onmouseover="sidebarIn()" im entsprechenden <div> spezifiziert hast. Du hast aber keine Methode namens sidebarIn(), höchstens SidebarIn(). Deshalb bricht JS ab und nichts funktioniert mehr.

Hab ich installiert, aber ich blick das Programm einfach nicht.
Aber ich hab in meinem HTML nirgends dein genanntes Beispiel stehen?!
Egal, ich mach das mal mit dem div...
Aber könntest du mir vielleicht trotzdem erklären, wie ich das mit der var mache? :rot:Wie gesagt, ich fange grad erst mit JS an...

Duddle · 20.06.2011

AW: "onmouseout" Objekt ausschließen

Es ist nicht die eleganteste Lösung, aber es sollte verständlich sein:

HTML:

		<div id="sidebarmain" onmouseout="SidebarMouseOut()" onmouseover="mausIstDrinnen()">[19:01]****Erster Eintrag<br>[19:01]****Zweiter Eintrag</div>
		<div id="sidebarin" onclick="openSidebar()" ></div>
		<div id="sidebarout" onclick="closeSidebar()" onmouseover="mausIstDrinnen()" onmouseout="SidebarMouseOut()"></div>

Wenn die Maus über einem offenen Teil der Sidebar ist (d.h. Lasche oder sidebarmain), gilt die Maus als "drinnen", ansonsten "ausserhalb".

PHP:

function openSidebar(){
		document.getElementById("sidebarmain").style.visibility="visible";
		document.getElementById("sidebarin").style.visibility="collapse";
		document.getElementById("sidebarout").style.visibility="visible";
}

function closeSidebar(){
		document.getElementById("sidebarmain").style.visibility="collapse";
		document.getElementById("sidebarin").style.visibility="visible";
		document.getElementById("sidebarout").style.visibility="collapse";
}

var mausAusserhalb = false;

function SidebarMouseOut(){
    mausAusserhalb = true;
    window.setTimeout("checkSidebar()",800);
}

function mausIstDrinnen(){
    mausAusserhalb = false;
}

function checkSidebar() {
    if(mausAusserhalb == true) {
	closeSidebar();
    }
}

Die wichtigste Änderung hier ist, dass beim Verlassen eines der beiden Elemente erst nach 800ms geprüft wird, ob die Maus tatsächlich draussen ist. In dieser Zwischenzeit kann sie schon wieder über einem anderen Element hovern, dass als "drinnen" gilt. Dann wird die Sidebar nicht geschlossen.

Duddle

simonpicos · 20.06.2011

AW: "onmouseout" Objekt ausschließen

Danke dir vielmals

Und ich habs sogar verstanden

simonpicos · 20.06.2011

AW: "onmouseout" Objekt ausschließen

So langsam fängt das ganze an Spaß zu machen

Beim rumprobiern bin ich auf ein weiteres Problem gestoßen.
Ich habe in meine Sidebar eine Checkbox eingebaut. Wenn diese angewählt ist, wird das schließen der Sidebar verhindert. Das habe ich so gemacht, in dem ich bei angewählter Checkbox die Variable mausAusserhalb auf false setze. Klappt auch soweit ganz prima.

Nun komm ich aber zu den Problemen:
1. Wenn ich mit der Maus zu lange (Ich schätze die 800ms) auf der Checkbox bin, dann schließt sich die Sidebar.
2. Wenn ich die Checkbox wieder abwähle schließt sich die Sidebar sofort.

Muss ich dann für die an- oder abgewählte Checkbox eine neue Variable definieren, oder wie könnte ich das Problem lösen?

Hier noch mal der entsprechende Code:

HTML:

        <div id="sidebarmain" onmouseout="SidebarMouseOut()" onmouseover="mausIstDrinnen()">
        <form name="SidebarCheck" action="">
        <input type="checkbox" name="DontClose">
        </form>
        </div>
        <div id="sidebarin" onclick="openSidebar()" >
        </div>
        <div id="sidebarout" onclick="closeSidebar()" onmouseover="mausIstDrinnen()" onmouseout="SidebarMouseOut()">
        </div>

PHP:

function openSidebar(){
        document.getElementById("sidebarmain").style.visibility="visible";
        document.getElementById("sidebarin").style.visibility="collapse";
        document.getElementById("sidebarout").style.visibility="visible";
}

function closeSidebar(){
        document.getElementById("sidebarmain").style.visibility="collapse";
        document.getElementById("sidebarin").style.visibility="visible";
        document.getElementById("sidebarout").style.visibility="collapse";
}

var mausAusserhalb = false;

function SidebarMouseOut(){
        mausAusserhalb = true;
        window.setTimeout("checkSidebar()",800);
}

function mausIstDrinnen(){
        mausAusserhalb = false;
}

function checkSidebar() {
        if (document.SidebarCheck.DontClose.checked == false) {
            mausAusserhalb = true;
    }
        if (document.SidebarCheck.DontClose.checked == true) {
            mausAusserhalb = false;
    }
        
        if(mausAusserhalb == true) {
            closeSidebar();
    }

}

Und hier der Link zur Seite: