tutorials.de Buch-Aktion 05/2012
ERLEDIGT
NEIN
ANTWORTEN
4
ZUGRIFFE
1449
EMPFEHLEN
  • An Twitter übertragen
  • An Facebook übertragen
AUF DIESES THEMA
ANTWORTEN
  1. 06.04.10 02:11 #1
    terravotion terravotion ist offline
    Registriert seit
    Apr 2004
    Ort
    CH-SZ-LA
    Beiträge
    159
    Hi alle

    Folgendes Problem hält mich um diese Uhrzeit noch wach, hoffentlich könnt ihr mir helfen:


    Divstruktur: (stark vereinfacht)
    HTML-Code:
    <div id="navielement">
	<div id="navititel">
		<a href="#" onClick="javascript:navigationHandler(\'elementContent\');">
	</div>
	<div id="elementContent">
		<a href="">...</a>
		<a href="">...</a>
	</div>
</div>
    Wobei jeweils beim klicken auf das "Hauptelement" (navititel) der untere Teil angezeigt wird.
    HTML-Code:
    function navigationHandler(divName) {
	if(document.getElementById(divName).style.display=='none') {
		document.getElementById(divName).style.display='block';
	} else {
		document.getElementById(divName).style.display='none';
	}
}
    Was ich nun versuche zu erreichen ist das wenn:
    - ich den Mauszeiger aus dem Überelement "navielement" rausbewege "elementContent" wieder verschwindet


    Mit onMouseOut geht das nicht weil ein mouseOver über einem der Links im elementContent auch diesen Effekt auslöst.
    Wenn es nun möglich wäre sozusagen beim klicken auf den Link automatisch den Fokus auf das ganze "naviElement" zu setzen und dann nur noch mit omBlur diese abzufangen wäre ne tolle sache.
    Nur scheinbar geht das mit normalem Javascript nicht und mit mit dem jQuery habe ich so meine Mühe (denn wenn ich das soo mache

    HTML-Code:
    function navigationHandler(divName) {
	if(document.getElementById(divName).style.display=='none') {
		document.getElementById(divName).style.display='block';
		$(divName).Focus();
	} else {
		document.getElementById(divName).style.display='none';
	}
}
    funktioniert das auch nicht?


    Herzlichen Dank für Tipps und Ideen!
     
    .o0[° in the [t*] we trust °]0o.
    who the hell put the what in the where...?
    aka Hunab-Ku
    Zitieren Zitieren
  2. 06.04.10 09:35 #2
    Avatar von Konstantin Denerz
    Konstantin Denerz Konstantin Denerz ist offline Mitglied Bronze
    Registriert seit
    Feb 2009
    Ort
    Eppelborn
    Beiträge
    39
    Hallo,

    wenn ich dich richtig verstanden habe, willst du den Content-Bereich nur dann anzeigen, wenn der Benutzer über den "navititel"-Bereich mit der Maus drüber fährt?

    Hier mal ein einfaches Beispiel mit jQuery (http://api.jquery.com/hover/):
    Code javascript:
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

    <html>
<head>
<title>de.tutorials.js.hover</title>
<script src="jquery-1.4.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
 
var navigationContainer = $("#navititel");
var contentContainer  = $("#elementContent");
contentContainer.hide();
 
var onHover = function(){
    contentContainer.show();
};
 
var onLeave = function(){
    contentContainer.hide();
};
 
navigationContainer.hover(onHover,onLeave);
 
});
</script>
 
<style type="text/css">
 
*{
border:1px dotted gray;
}
</style>
</head>
<body>
 
<div id="navielement">
    <div id="navititel">
        <a href="#" onClick="javascript:navigationHandler(\'elementContent\');">Test</a>
        <a href="#" onClick="javascript:navigationHandler(\'elementContent\');">Test 2</a>
    </div>
    <div id="elementContent">
        <a href="">...</a>
        <a href="">...</a>
    </div>
</div>
 
</body>
</html>

    Gruß Konstantin
     
    Zitieren Zitieren
  3. 06.04.10 09:46 #3
    Quaese Quaese ist offline Moderator
    tutorials.de Moderator
    Registriert seit
    Feb 2004
    Beiträge
    3.451
    Hi,

    ich habe es so verstanden, dass du erreichen möchtest, dass der eingeblendete Bereich (elementContent) ausgeblendet wird, wenn das DIV mit der ID navielement mit der Maus verlassen wird. Es machen dir jedoch die enthaltenen Elemente einen Strich durch die Rechnung, da der mouseout-Event für navielement auch feuert, wenn die Maus über diese geführt wird.

    In diesem Fall solltest du das Ausblenden zeitverzögert anstossen und einen "Timer" laufen lassen. Wird die Maus nun aus dem Element bewegt und in ein enthaltenes geführt, wird geprüft, ob ein Timer läuft. Ist das der Fall, wird die zeitgesteuerte Funktion und deren Ausführung gestoppt.

    Beispiel:
    Code :
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

    <html>
<title>www.tutorials.de</title>
<meta name="author" content="Quaese">
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<script src="jquery-1.4.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
  <!--
var hTimer = null;  ' Timerhandle
 
$(function(){
  $('#navielement a').bind('click', function(){
    $('#elementContent').toggle();
    return false;
  })
 
  $('#navielement').bind('mouseout', function(evt){
    hTimer = window.setTimeout(function(){$('#elementContent').hide();}, 50);
  });
 
  $('#navielement *').bind('mouseover', function(){
    if(hTimer != null){
      window.clearTimeout(hTimer);
      hTimer = null;
    }
  });
});
 //-->
</script>
</head>
<body>
<div id="navielement">
  <div id="navititel">
    <a href="#">auf/zi</a>
  </div>
  <div id="elementContent">
    <a href="">...</a>
    <a href="">...</a>
  </div>
</div>
</body>
</html>

    Ciao
    Quaese
     
    Vielleicht muss man manchmal vom Weg abkommen, um nicht auf der Strecke zu bleiben!
    ----
    Der "Fortsetzungsroman" auf www.leuteforum.de

    New kind to realize large scalable projects with jQuery: jQuery SDK
    Zitieren Zitieren
  4. 06.04.10 09:56 #4
    Avatar von Konstantin Denerz
    Konstantin Denerz Konstantin Denerz ist offline Mitglied Bronze
    Registriert seit
    Feb 2009
    Ort
    Eppelborn
    Beiträge
    39
    @Quaese

    Hallo,

    würde lieber die Hover-Funktion verwenden und eventuell den ersten Parameter weglassen.

    Gruß
    Konstantin
     
    Zitieren Zitieren
  5. 12.04.10 00:00 #5
    terravotion terravotion ist offline
    Registriert seit
    Apr 2004
    Ort
    CH-SZ-LA
    Beiträge
    159
    Hi alle

    Vielen Dank für die Antworten

    Ich habe den ersten Ansatz übernommen und bissl umgestaltet, dass so ez alles funktioniert!

    Danke vielmals!
     
    .o0[° in the [t*] we trust °]0o.
    who the hell put the what in the where...?
    aka Hunab-Ku
    Zitieren Zitieren
« Javascript | jQuery: jQuery auf AJAX Response anwenden »

Ähnliche Themen

  1. Formularverarbeitung im Hintergrund +File Upload / jquery /jquery.valitation
    Von Strafi im Forum PHP
    Antworten: 3
    Letzter Beitrag: 20.10.10, 20:47
  2. [jQuery-dataTables] jQuery dataTable erstellen mit DB-Einträgen
    Von Bexx im Forum Javascript & Ajax
    Antworten: 9
    Letzter Beitrag: 22.07.10, 15:51
  3. [jQuery] - Selektor Prinzip bzw. Struktur von jQuery nachbilden
    Von Munch im Forum Javascript & Ajax
    Antworten: 3
    Letzter Beitrag: 12.07.10, 13:27
  4. jQuery: jQuery auf AJAX Response anwenden
    Von pointsdächster im Forum Javascript & Ajax
    Antworten: 3
    Letzter Beitrag: 12.04.10, 01:15
  5. Focus Listener(Focus lost)
    Von BLOEBAUM im Forum Swing, Java2D/3D, SWT, JFace
    Antworten: 4
    Letzter Beitrag: 11.01.06, 09:19

Stichworte