Top-Themen

Aktuelle Themen (A bis Z)

Administrator.de FeedbackApache ServerAppleAssemblerAudioAusbildungAuslandBackupBasicBatch & ShellBenchmarksBibliotheken & ToolkitsBlogsCloud-DiensteClusterCMSCPU, RAM, MainboardsCSSC und C++DatenbankenDatenschutzDebianDigitiales FernsehenDNSDrucker und ScannerDSL, VDSLE-BooksE-BusinessE-MailEntwicklungErkennung und -AbwehrExchange ServerFestplatten, SSD, RaidFirewallFlatratesGoogle AndroidGrafikGrafikkarten & MonitoreGroupwareHardwareHosting & HousingHTMLHumor (lol)Hyper-VIconsIDE & EditorenInformationsdiensteInstallationInstant MessagingInternetInternet DomäneniOSISDN & AnaloganschlüsseiTunesJavaJavaScriptKiXtartKVMLAN, WAN, WirelessLinuxLinux DesktopLinux NetzwerkLinux ToolsLinux UserverwaltungLizenzierungMac OS XMicrosoftMicrosoft OfficeMikroTik RouterOSMonitoringMultimediaMultimedia & ZubehörNetzwerkeNetzwerkgrundlagenNetzwerkmanagementNetzwerkprotokolleNotebook & ZubehörNovell NetwareOff TopicOpenOffice, LibreOfficeOutlook & MailPapierkorbPascal und DelphiPeripheriegerätePerlPHPPythonRechtliche FragenRedHat, CentOS, FedoraRouter & RoutingSambaSAN, NAS, DASSchriftartenSchulung & TrainingSEOServerServer-HardwareSicherheitSicherheits-ToolsSicherheitsgrundlagenSolarisSonstige SystemeSoziale NetzwerkeSpeicherkartenStudentenjobs & PraktikumSuche ProjektpartnerSuseSwitche und HubsTipps & TricksTK-Netze & GeräteUbuntuUMTS, EDGE & GPRSUtilitiesVB for ApplicationsVerschlüsselung & ZertifikateVideo & StreamingViren und TrojanerVirtualisierungVisual StudioVmwareVoice over IPWebbrowserWebentwicklungWeiterbildungWindows 7Windows 8Windows 10Windows InstallationWindows MobileWindows NetzwerkWindows ServerWindows SystemdateienWindows ToolsWindows UpdateWindows UserverwaltungWindows VistaWindows XPXenserverXMLZusammenarbeit

gelöst Mouseenter muss für zwei Sekunden bestehen

Mitglied: Boingboing

Boingboing (Level 1) - Jetzt verbinden

10.11.2011, aktualisiert 09:43 Uhr, 4442 Aufrufe, 2 Kommentare

Hi,

habe ein kleines Problem mit meinem JS/jQuery Script

Ich habe eine Bar an der Oberseite, die bei mouseenter runterfährt und bei mouseleave wieder hochfährt. Soweit so gut. Desweiteren hab ich noch eine mouseover die das Geschwindigkeitsverhalten der Bar steuert.

Funktioniert soweit alles, stehe nun aber vor einem kleinen Problem.

Ich möchte, dass das mouseenter erst gefeuert wird, wenn der Benutzer sich für ein oder zwei Sekunden innerhalb des Divs aufhält.

Hier sind mal meine Drei funktionen die ich verwende

Die mouseenter die fürs runterfahren verantwortlich ist

01.
var slider_state = false;   // slider up/down 
02.
var active_slide = false;   // is animation still in process 
03.
 
04.
 $("div#toppanel").mouseenter(function() { 
05.
            if(slider_state == false && active_slide == false) { 
06.
                active_slide = true; 
07.
               $("div#panel").slideDown("300", function() { active_slide = false; } ) 
08.
09.
         slider_state = true; 
10.
    });
Die mouseleave fürs hochfahren
01.
 $("div#toppanel").mouseleave(function() { 
02.
        if(slider_state == true && active_slide == false) { 
03.
            active_slide = true; 
04.
            $("div#panel").slideUp("300", function() { active_slide = false; }) 
05.
06.
        slider_state = false; 
07.
    });
und zuletzt noch die mouseover, die dafür sorgt, dass die bar immer hochfährt wenn man sich irgendwo anders mit der maus befindet
01.
$('#contentwrap').mouseover(function() { 
02.
       $("div#panel").slideUp("300", function() { active_slide = false; }) 
03.
     });
Meine Frage ist nun, wie muss ich die mouseenter umschreiben, dass er ein/zwei sekunden warten und prüft ob die maus sich immernoch innerhalb des divs befindet ?

Danke für eure Hilfe
Mitglied: msr972
10.11.2011 um 12:39 Uhr
Ich hatte ein ähnliches Problem mit einer Sucheingabe Maske, da sonst der $.ajax sofort gefeuert werden würde, jedesmal wenn ich eine Taste drücke.

ich habe das (sicherlich nicht schön aber funktionell) folgendermaßen gelöst:

01.
	var d	= 1000;  
02.
	var st	= null;  
03.
	$("#Filter").live('keydown keypress keyup', function() { 
04.
		if(st) {clearTimeout(st);} 
05.
	    var type = $("#Filter").attr('rel'); 
06.
	    switch (type) { 
07.
		    case 'getCustomers': st = setTimeout(getCustomers, d); break; 
08.
		    case 'getConstructions': st = setTimeout(getConstructions, d); break; 
09.
		    case 'getConstructionLoggers': st = setTimeout(getConstructionLoggers, d); break; 
10.
		    case 'getConstructionDetails': st = setTimeout(getConDs, d); break; 
11.
		    case 'getProducers': st = setTimeout(getProducers, d); break; 
12.
		    case 'getModules': st = setTimeout(getModules, d); break; 
13.
		    case 'getInverters': st = setTimeout(getInverters, d); break; 
14.
		    case 'getLoggers': st = setTimeout(getLoggers, d); break; 
15.
16.
	});
Kurz zur Erläuterung folgende Dinge:
- .live deshalb, da ich die Seite bzw. Teile davon nachlade, sofern also bei Dir alles statisch ist, kannst Du Dir .live sparen
- $("#Filter") ist das entsprechende Feld, dass auf key* actions reagiert und ausgeführt wird
- d stellt den timer dar
- solange eine Taste gedrückt wird, wird praktisch ein setTimeout(-function-) gemacht der dann nach d ms aufgerufen werden würde, ausser es kommt eine neue key* action ins Spiel.

Wiegesagt, quick and dirty und sicherlich nicht optimal, aber für mich hats auf die Schnelle gereicht.
Bitte warten ..
Mitglied: Boingboing
10.11.2011 um 14:21 Uhr
Danke für deinen Beitrag, aber ich habe es folgendermaßen gelöst:

beim mouseenter wirddem toppanel div ne klasse "hasFocus" zugewiesen. Das event wird dann immer mittels setTimeout um x millisekunden verzögert.
bei mouseleave wird dem div immer die klasse "hasFocus" entzogen.

Der Trick ist jetzt, dass innerhalb des setTimeouts nochmals auf die klasse hasFocus geprüft wird.

Hier der Quellcode für interessierte

01.
$("div#toppanel").mouseenter(function() { 
02.
        $("div#toppanel").addClass("hasFocus");             //Focus Klasse hinzufügen 
03.
        setTimeout(function() { 
04.
            if($("div#toppanel").hasClass("hasFocus")) {    //auf Focus Klasse Prüfen 
05.
                if(!slider_state && !active_slide) { 
06.
                    active_slide = true; 
07.
                   $("div#panel").slideDown("300", function() { active_slide = false; } ) 
08.
09.
                slider_state = true; 
10.
11.
        }, 500 );                                       //Timeout in ms 
12.
    }); 
13.
 
14.
    $("div#toppanel").mouseleave(function() { 
15.
        if(slider_state && !active_slide) { 
16.
            active_slide = true; 
17.
            $("div#panel").slideUp("300", function() { active_slide = false; }) 
18.
19.
        slider_state = false; 
20.
        $("div#toppanel").removeClass("hasFocus");      //Focus Klasse immer entziehen 
21.
    });
Danke an Bytelude für seinen Beitrag: Verzögertes MouseOver/Hover mit jQuery
http://bytelude.de/2011/03/30/verzogertes-mouseover-mit-jquery/
Bitte warten ..
Ähnliche Inhalte
Ubuntu

Verzeichnisse bestehen nur noch aus "???"

gelöst Frage von D1Ck3nUbuntu2 Kommentare

Hallo zusammen, ich habe mir ein Shell Skript (auf einem Ubuntu 12.04 LTS) geschrieben um ein FTP-Verzeichnis lokal zu ...

Microsoft Office

Leeres Fenster bleibt bestehen

Frage von Ghost108Microsoft Office1 Kommentar

Hallo zusammen, ich habe folgende "Problematik" Ich öffnen Excel 2016 und erhalte eine leere Arbeitsmappe Hier gehe ich nun ...

Suse

Druckjob unter Suse-LInux bleibt bestehen

Frage von didi60Suse

Guten Tag zusammen, das Ziel ist über Linux raw-Daten an Drucker zu senden. Im Moment existieren 2 Drucker, die ...

PHP

Logout auf Website - Sessoin bleibt bestehen

Frage von IT-CallePHP4 Kommentare

Hallo, ich habe ein Problem, das wiefolgt aussieht. Ich logge mich ganz normal auf einer Website ein (Lokal mit ...

Neue Wissensbeiträge
Sonstige Systeme
Es war einmal ein BeOS - Wer erinnert sich noch?
Information von BassFishFox vor 23 MinutenSonstige Systeme1 Kommentar

Hallo, Bin gerade ueber Haiku gestolpert, von dessen Existenz als "Nachfolger des BeOS" ich wusste nur mich nie wirklich ...

Datenschutz

Microsoft und DSGVO - ob das wohl jemals klappt (Probleme beim Datenabfluss für Office Pro Plus)?

Tipp von VGem-e vor 3 StundenDatenschutz3 Kommentare

Servus Kollegen, siehe Aber wer setzt schon MS Office Pro Plus ein? Wie dann der Stand beim "normalen" MS ...

Windows 10

Macht Windows 10.1809 Probleme mit gemappten Netzlaufwerken (betrifft wohl insbes. AMD-Hardware und Trend Micro AV-Produkte)?

Tipp von VGem-e vor 8 StundenWindows 102 Kommentare

Moin Kollegen, grad dazu gefunden und Hatten wir dies nicht bei früheren W10-Upgrades ebenfalls? Da bleibt nur, das Upgrade ...

Humor (lol)

Das neue Miniatur Wunderland OFFICIAL VIDEO - worlds largest model railway - railroad

Information von StefanKittel vor 20 StundenHumor (lol)1 Kommentar

Hallo, wer noch nie im Miniatur Wunderland war, sollte es dringend mal nachholen. Es gibt eine neues Video. Viele ...

Heiß diskutierte Inhalte
Java
Testautomatisierung
gelöst Frage von WPFORGEJava16 Kommentare

Hallo, nehmen wir an, es gibt eine Webseite mit einer Karte und einem Suchfeld. Nun wird in das Suchfeld ...

Netzwerkgrundlagen
Werksreset HP 1920S-24G
gelöst Frage von HenereNetzwerkgrundlagen13 Kommentare

Servus zusammen, ich habe mir 2 neue Switche zugelegt, doch ich komme damit nicht ganz klar. Waren Vorführgeräte zum ...

Viren und Trojaner
Office365 Trojaner Analyse
Frage von ZeppelinViren und Trojaner13 Kommentare

Liebe Community, ich wende mich an euch, um mehr über den Office365 Trojaner zu erfahren, welcher grade seine Runden ...

Firewall
Sophos UTM 9.5 Firewall Log-File durchsuchen
gelöst Frage von Leo-leFirewall12 Kommentare

Hallo zusammen, weiß jemand von Euch, ob man bei der Sophos die Firewall logs noch etwas besser filtern kann? ...