jQuery: div focus

T

terravotion

Erfahrenes Mitglied
Hi alle

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


Divstruktur: (stark vereinfacht)
HTML: 
<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: 
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: 
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!
 
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/):
Javascript: 
<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
 
Zuletzt bearbeitet von einem Moderator:
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: 
<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
 
@Quaese

Hallo,

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

Gruß
Konstantin
 
Hi alle

Vielen Dank für die Antworten

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

Danke vielmals!
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück