✔ Elemente mit setTimeout() verzögert ausblenden: Probleme mit ID-Übergabe

[parawaiter]

Hallo liebe Experten,

Ich bin gerade dabei mein schon erstelltes Dropdown-Menü zu verfeinern, d.h. es per
setTimeout() zeitverzögert auszublenden.

Das habe ich bisher zustande gebracht:

function Hide() {
window.setTimeout('InternHide()', 500);
}

function InternHide() {
if(document.getElementById('divAb').style.display='block')
  {
  document.getElementById('divAb').style.display='none';
  }
}

So funktioniert es auch, nur müßte ich jetzt für jedes Element, das ich ein & ausblenden will die beiden Funktionen schreiben.

Deswegen hab ich versucht es so zu machen:

function Hide(id) {
window.setTimeout('InternHide(id)', 500);
}

function InternHide(id) {
if(document.getElementById(id).style.display='block')
  {
  document.getElementById(id).style.display='none';
  }
}

Das kann natürlich nicht funktionieren aber wie kann ich jetzt der Funktion InternHide(id)
die ID der Funktion Hide(id) übergeben sodass es reicht im Event-Handler
einfach nur z.B. onmouseout="Hide('divAa')" anzugeben?

Wäre sehr dankbar wenn mir da jemand helfen könnte ;-)

MFG - parawaiter

 

[kuddeldaddeldu]

Hi,

probier es mal so:

function Hide(id) {
   window.setTimeout(function() {InternHide(id);}, 500);
}

LG

 

[parawaiter]

Hi,

erstmal danke für deine Hilfe ;-) das funktioniert perfekt!

Jetzt hab ich das Problem das sich das eingeblendete DIV nach der gesetzten Zeit
wieder ausblendet auch wenn ich mit der Maus darüber fahre.

Ich dachte das ich das verhindern kann indem ich dem DIV per onmouseover eine Funktion
zuweise in der display auf block gesetzt wird.
Das wird aber ignoriert und der Timeout findet trotzdem statt.

Das geht doch irgendwie per clearTimeout, oder? Ich bekomms einfach nicht hin!

LG

 

[kuddeldaddeldu]

Hi,

das geht mit clearTimeout, ja. Du musst die Rückgabe von setTimeout in einer Variablen speichern und diesen an clearTimeout übergeben.

LG

 

[parawaiter]

Hi,
ja das geht, aber leider nur für das erste Element.
Sobald ich mehrere Elemente (Unterunterlinks eines Unterlinks ) in einem Dropdownmenü ein und ausblenden will geht das zumindestens mit dem was ich bisher habe nicht mehr:

var Timeout = 600;
var Test = window.setTimeout(function() {InternHide(id);}, Timeout);

function Show(id) {

if(document.getElementById(id).style.display='none')
  {
  document.getElementById(id).style.display='block'
  }
}

function InternHide(id) {
if(document.getElementById(id).style.display='block')
  {
  document.getElementById(id).style.display='none'
  }
}

function Hide(id) {
Test = window.setTimeout(function() {InternHide(id);}, Timeout);
}

function ReturnHide() {
  {
  window.clearTimeout( Test );
  }
}

Hier ist noch der Link der das ganze aufruft:

<a id="Ab" class="linkA" onmouseover="Show('divAb')" onmouseout="Hide('divAb')" href="" title="">LinkAb</a>

Und das Dropdownmenü:

<div id="divAb">

      <ul id="ulAa">
          <li class="liB" onmouseover="ReturnHide()" onmouseout="Hide('divAb')">
              <a id="aAaBa" class="DropdownLink" href="" title="">
                1.1
                </a>

              <a id="aAaBb" class="DropdownLink" onmouseover="Show('ulAaBb')" onmouseout="Hide('ulAaBb')" href="" title="">
                1.2
                </a>  <ul id="ulAaBb" onmouseover="" onmouseout="">
                          <li class="liC" onmouseover="ReturnHide()" onmouseout="Hide('ulAaBb')">
                              <a class="DropdownCLink" href="" title="">1.2.1</a>
                              <a class="DropdownCLink" href="" title="">1.2.2</a>
                              <a class="DropdownCLink" href="" title="">1.2.3</a>
                              <a class="DropdownCLink" href="" title="">1.2.4</a>
                              <a class="DropdownCLink" href="" title="">1.2.5</a>
                          </li>
                    </ul>
              <a class="DropdownLink" href="" title="">1.3</a>
              <a class="DropdownLink" href="" title="">1.4</a>
              <a class="DropdownLink" href="" title="">1.5</a>
          </div>
          </li>
      </ul>

  <div class="clear"></div>
  </div>

Wie erreiche ich jetzt, dass sich alle Funktionen auf alle ein und auszublendenden
Elemente anwenden lassen?

LG

 

[parawaiter]

Hallo Leute,

ich bin jetzt seit ca. 5 Stunden am suchen und rumprobieren und finde selber leider keine Lösung.

Mein Ziel ist es, das Dropdownmenü mit vier Funktionen zum laufen zu bringen, 2 zum ein und ausblenden, eine zum zeitverzögerten ausblenden und eine um das zeitverzögerte ausblenden abzubrechen.

Die Funktionen schauen bisher so aus:

var Timer = 700;
var StopTimer = 0;

function Einblenden(id) {

if( document.getElementById(id).style.display = 'none' ) {
  document.getElementById(id).style.display = 'block';
  }
}
function AusblendenIntern(id) {
if( document.getElementById(id).style.display = 'block' ) {
  document.getElementById(id).style.display = 'none';
  }
}

function Ausblenden(id) {
StopTimer = window.setTimeout(function() {AusblendenIntern(id);}, Timer);
}

function TimerBeenden() {
  window.clearTimeout( StopTimer );
}

Anscheinend (nach meinem begrenzten js-wissen) kann die Funktion TimerBeenden
nur einmal ausgeführt werden, um das zu verdeutlichen habe ich ein Beispiel hochgeladen.
http://www.glide-and-ride.de/test/ddmenu/index.html

Wenn ich den Hauptlink überfahre blendet sich das Untermenü ein, wenn ich ihn verlasse blendet sich das Untermenü nach der gewünschten Zeit wieder aus.

Wenn ich vom Hauptlink über das Untermenü fahre wird die Funktion TimerBeenden ausgefüht und das Untermenü bleibt eingeblendet.

Wenn ich jetzt im Untermenü auf den den zweiten Link gehe blendet sich das dazugehörige Untermenü ein, wenn ich aber jetzt auf dieses Menü gehe wird die Funktion
TimerBeenden ignoriert und das Menü wird nach gesetzter Verzögerung trotzdem ausgeblendet.

Und genau jetzt bin ich mit meinem Latein am Ende deswegen wäre ich total dankbar, wenn mir da jemand helfen könnte.

LG - parawaiter

 

[Sven Mintel]

Die id ist nur innerhalb der Funktion bekannt, beim Aufruf per setTimeout() wurde diese aber bereits verlassen.

Schreibs so :

function irgendwas(id) {
StopTimer = window.setTimeout('andereFunktion("'+id+'")', Timer);
}

Auf diese Art ist die ID bereits als String-Parameter in dem Aufruf bei setTimeout() vorhanden, und nicht mehr als Variable.

 

[parawaiter]

Hallo Sven Mintel,

danke für deine Hilfe.
Leider hat sich dadurch nichts geändert, ist das alles was ich verändern muss ?

LG - parawaiter

 

[Sven Mintel]

Naja...die Funktionsnamen musst du natürlich an dein Skript anpassen, sonst aber nix.

 

[parawaiter]

Hallo,

ja das habe ich gemacht, es verhält sich aber trotzdem gleich.


Hier der abgeänderte Code:

var Timer = 700;
var StopTimer = 0;

function Einblenden(id) {

if( document.getElementById(id).style.display = 'none' ) {
  document.getElementById(id).style.display = 'block';
  }
}
function AusblendenIntern(id) {
if( document.getElementById(id).style.display = 'block' ) {
  document.getElementById(id).style.display = 'none';
  }
}

function Ausblenden(id) {
StopTimer = window.setTimeout('AusblendenIntern("'+id+'")', Timer);
}

function TimerBeenden() {
  window.clearTimeout( StopTimer );
}

und hier nochmal live:
http://www.glide-and-ride.de/test/ddmenu/index.html

übersehe ich vielleicht einfach was?

LG - parawaiter