Sea-Bass: setTimeout in einem Frame, clearTimeout in einem anderen

Hallo!

Ich habe folgendes Problem (es geht zunächt einmal nur um die Realisiertung im IE5):

Ich habe ein Frameset. Im Frame "oben" möchte ich gerne mit einem mouseover-Event ein kleines Menü im Frame "haupt" erscheinen lassen. Ich habe das mouseout-Event mit einem setTimeout versehen, so dass das Menü mit Verzögerung verschwindet.

Im "haupt"-Frame befindet sich mein <div id="navmenu">, welches per mouseover-Event das setTimeout stoppen soll, damit das Menü sichtbar bleibt. Allerdings befinden sich die beiden Frames sehr dicht zusammen, und wenn ich von meiner Grafik im "oben"-Frame auf das "navmenu" fahren, dann scheint es, als ob das mouseover-Event mit dem clearTimeout vom "navmenu" zuerst aufgerufen wird und danach erst das mouseout-Event mit meinem setTimeout. Daher kommt es, dass die setTimeout-Variable noch gar nicht bekannt ist bzw. das noch nicht gestartete setTimeout auch nicht unterbrochen werden kann. (Wenn ich einen großen Abstand zwischen der Grafik und dem "navmenu" lasse und ich langsam vom einen aufs andere fahre, dann funktioniert es.

Das ganze sieht übrigens ungefähr so aus (Überflüssiges weggelassen):

function Zu()
{
parent.haupt.document.all.navmenu.style.visibility="hidden";
}

function Auf()
{
parent.haupt.document.all.navmenu.style.visibility="visible";
}

function OpenMenu()
{
if (tm)
{
  parent.oben.clearTimeout(parent.oben.tm);
}
else { Auf(); }
}

function CloseMenu()
{  
tm = setTimeout("Zu()",500)
}

Für Hilfe bzw. Tips wäre ich sehr dankbar...

  1. Hallo ...!

    Bei Geschichten wie Deiner ist es viel leichter, wenn Du mal die URL angibst.

    Wie ich das sehe, musst Du die Variable "tm" als global definieren, weil sie sonst nur fuer die Dauer der Funktion "CloseMenu()" haelt.
    Ausserdem musst Du sie in der Function "function Zu()" resetten, weil sonst beim erneuten onMouseOver die Funktion "Auf()" nicht startet. Hier der Code:

    ____________frameset.htm:

    <html>
    <head>
    </head>
    <frameset  rows="90px,*">
       <frame src="oben.htm" name="oben">
       <frame src="haupt.htm" name="haupt">
    </frameset>
    <body>

    </body>
    </html>

    __________haupt.htm:

    <html>
    <head>
    </head>
    <body>
    <div id="navmenu" style="position:absolute; top:10; left:10; visibility:hidden;" onMouseOver="parent.oben.OpenMenu()">
    <img src="beispielgrafik.gif" width=100 height=60 alt="beispielgrafik" border=1>
    </div>
    </body>
    </html>

    __________oben.htm:

    <html>
    <head>
    <script language="JavaScript">
    <!--
    var tm;
    function Zu()
    {
        parent.haupt.document.all.navmenu.style.visibility="hidden";
        tm = "";
    }

    function Auf()
    {
        parent.haupt.document.all.navmenu.style.visibility="visible";
    }
    function OpenMenu()
    {
        if (tm)
        {
            parent.oben.clearTimeout(parent.oben.tm);
        }
        else { Auf(); }
    }
    function CloseMenu()
    {
        tm = setTimeout("Zu()",500)
    }
    //-->
    </script>
    </head>
    <body>
    <a href="#" onMouseOver="OpenMenu()" onMouseOut="CloseMenu()"><img src="Beispiel.gif" width=100 height=60 alt="beispielgrafik" border=1></a>
    </body>
    </html>

    Viele Gruesse
    Hartmut R.

    1. Hallo Harmut,

      erstmal vielen Dank für Deine Hilfe. Ich habe es genauso versucht, wie Du es beschrieben hast. Allerdings funktioniert es immer noch nicht. Ich glaube nach wie vor, dass das (zweite) mouseover-Event in meinem Navigationsmenu vor dem mouseout-Event im oberen Frame - und damit auch vor dem Setzen der tm-Variable - ausgelöst wird. Daher klappt das Menü wieder zu, auch wenn man mit der Maus draufgeht.

      Ich habe die ganze Sache jetzt mal hochgeladen, zu finden unter www.confluentes.de/index2.htm Vielleicht hast Du ja noch eine Idee...

      Nochmals vielen Dank und viele Grüße

      Sebastian

      PS: Beim Reset der Variable mit tm="" ist das Menü beim zweiten Mal mouseover gar nicht mehr herausgeklappt...

      Hallo ...!

      Bei Geschichten wie Deiner ist es viel leichter, wenn Du mal die URL angibst.

      Wie ich das sehe, musst Du die Variable "tm" als global definieren, weil sie sonst nur fuer die Dauer der Funktion "CloseMenu()" haelt.
      Ausserdem musst Du sie in der Function "function Zu()" resetten, weil sonst beim erneuten onMouseOver die Funktion "Auf()" nicht startet. Hier der Code:

      ____________frameset.htm:

      <html>
      <head>
      </head>
      <frameset  rows="90px,*">
         <frame src="oben.htm" name="oben">
         <frame src="haupt.htm" name="haupt">
      </frameset>
      <body>

      </body>
      </html>

      __________haupt.htm:

      <html>
      <head>
      </head>
      <body>
      <div id="navmenu" style="position:absolute; top:10; left:10; visibility:hidden;" onMouseOver="parent.oben.OpenMenu()">
      <img src="beispielgrafik.gif" width=100 height=60 alt="beispielgrafik" border=1>
      </div>
      </body>
      </html>

      __________oben.htm:

      <html>
      <head>
      <script language="JavaScript">
      <!--
      var tm;
      function Zu()
      {
          parent.haupt.document.all.navmenu.style.visibility="hidden";
          tm = "";
      }

      function Auf()
      {
          parent.haupt.document.all.navmenu.style.visibility="visible";
      }
      function OpenMenu()
      {
          if (tm)
          {
              parent.oben.clearTimeout(parent.oben.tm);
          }
          else { Auf(); }
      }
      function CloseMenu()
      {
          tm = setTimeout("Zu()",500)
      }
      //-->
      </script>
      </head>
      <body>
      <a href="#" onMouseOver="OpenMenu()" onMouseOut="CloseMenu()"><img src="Beispiel.gif" width=100 height=60 alt="beispielgrafik" border=1></a>
      </body>
      </html>

      Viele Gruesse
      Hartmut R.

      1. Allerdings funktioniert es immer noch nicht. Ich glaube nach wie vor, dass das (zweite) mouseover-Event in meinem Navigationsmenu vor dem mouseout-Event im oberen Frame - und damit auch vor dem Setzen der tm-Variable - ausgeloest wird. Daher klappt das Menue wieder zu, auch wenn man mit der Maus draufgeht.

        Hallo Sebastian!

        Jau! Das (zweite) mouseover-Event in Deinem Navigationsmenu wird vor dem mouseout-Event im oberen Frame abgespielt, also erst zweimal hintereinander "Init()" und dann erst "Loeschen()", obwohl es von der Logik her erst "init()", dann "Loeschen()", dann "Init()" sein sollte.

        Wenn die Browser JavaScript so interpretieren wuerden, wie der Perl-Interpreter Perl, gaebs keine Probleme.

        Ich habe aber eine Loesung gefunden:
        Auf der Seite "home.html" folgendes:

        <DIV id="Bildbereich" onmouseout="parent.oben.Loeschen();"
        onmouseover="window.setTimeout('parent.oben.Init();',200)"
        style="LEFT: 77px; POSITION: absolute; TOP: 0px; VISIBILITY: hidden; WIDTH: 113px">

        Durch das kleine Timeout werden die ersten beiden onmouseover und onmouseout zuerst abgearbeitet.

        Koennte man aber auch so drehen:
        Einen Layer unter die Menues, und beim onmouseover auf diesen Layer dann "Loeschen()".

        Viele Gruesse
        Hartmut R.

        1. Hallo Hartmut!

          Funktioniert jetzt super. Nochmals vielen Dank!

          Gruß

          Sebastian

          Allerdings funktioniert es immer noch nicht. Ich glaube nach wie vor, dass das (zweite) mouseover-Event in meinem Navigationsmenu vor dem mouseout-Event im oberen Frame - und damit auch vor dem Setzen der tm-Variable - ausgeloest wird. Daher klappt das Menue wieder zu, auch wenn man mit der Maus draufgeht.

          Hallo Sebastian!

          Jau! Das (zweite) mouseover-Event in Deinem Navigationsmenu wird vor dem mouseout-Event im oberen Frame abgespielt, also erst zweimal hintereinander "Init()" und dann erst "Loeschen()", obwohl es von der Logik her erst "init()", dann "Loeschen()", dann "Init()" sein sollte.

          Wenn die Browser JavaScript so interpretieren wuerden, wie der Perl-Interpreter Perl, gaebs keine Probleme.

          Ich habe aber eine Loesung gefunden:
          Auf der Seite "home.html" folgendes:

          <DIV id="Bildbereich" onmouseout="parent.oben.Loeschen();"
          onmouseover="window.setTimeout('parent.oben.Init();',200)"
          style="LEFT: 77px; POSITION: absolute; TOP: 0px; VISIBILITY: hidden; WIDTH: 113px">

          Durch das kleine Timeout werden die ersten beiden onmouseover und onmouseout zuerst abgearbeitet.

          Koennte man aber auch so drehen:
          Einen Layer unter die Menues, und beim onmouseover auf diesen Layer dann "Loeschen()".

          Viele Gruesse
          Hartmut R.