eddy: onclick layer öffnen/schließen

Hi,

ich würde gerne bei einem klick (onclick oder onmouseup) auf einen Link ein layer öffnen.
Dieses soll dabei an die Position des Mauszeigers verschoben werden.
Durch einen weiteren klick ausserhalb des layers (also auf den Link oder sonst wo hin im Dokument) soll es wieder geschlossen werden.

Das letztere bekomm ich einfach net hin.
Wenn ich document.onclick o.ä. benutze, schließt er einen klick innerhalb des layer mit ein, dadurch verschwindet der layer wieder :(

was kann man da tun?

Gruß,
Eduard

  1. hallo,

    was kann man da tun?

    Zunächst einmal den Code angeben, den du benutzt hast.

    Grüße aus Berlin

    Christoph S.

    --
    Visitenkarte
    ss:| zu:) ls:& fo:) va:) sh:| rl:|
    1. <body>
        <a href="#" onMouseUp="showmenu(event)">Link 1</a>
        <table id="menu" class="menu">
          <tr>
            <td valign="middle">Sequenz: </td>
            <td valign="middle"><input onMouseDown="" type="text" style="font-size:9px; width:25px; height:10px;" maxlength="4"></td>
            <td><a href="http://www.selfhtml.org">OK</a></td>
          </tr>
        </table>

      <script language="javascript">
          ie = ((document.all) && (window.offscreenBuffering) ) ? true : false;
          nn = ((document.captureEvents) && (!document.getElementById)  ) ? true : false;
          mz = ((document.getElementById) && (!document.all) && (document.documentElement)  ) ? true : false;
          op = ((document.getElementById) && (navigator.userAgent.indexOf('Opera') != -1) ) ? true : false;
          //document.onclick = hidemenu;
          function showmenu(event){
            document.getElementById("menu").style.display = "block";
            if(ie){
             document.getElementById("menu").style.top = event.clientY + "px";
              document.getElementById("menu").style.left = event.clientX + "px";
            }else if(nn||mz||op){
              document.getElementById("menu").style.top = event.pageY + "px";
              document.getElementById("menu").style.left = event.pageX + "px";
            }
            document.onmousedown = hidemenu;
          }
          function hidemenu(){
            document.getElementById("menu").style.display = "none";
          }
        </script>
      </body>

      1. hallo,

        Ich vermute, du hast diesen Codeschnipsel irgendwo gefunden. Es gibt natürlich den stereotypen Hinweis:

        <script language="javascript">

        Da fehlt natürlich die type-Angabe.

        ie = ((document.all) && (window.offscreenBuffering) ) ? true : false;

        Das halte ich für problematisch, da nicht nur IE "document.all" kann.

        Prinzipiell kann es schon über "display" laufen, in vereinfachter Form geht das dann so:

        <div id="div1" onclick="document.getElementById('div2').style.display='block'; this.style.display='none'">DIV1</div>
        <div id="div2" onclick="document.getElementById('div1').style.display='block'; this.style.display='none'" style="display:none">DIV2</div>

        Hier funktioniert es natürlich nur mit einem Mausereignis _innerhalb_ des eingeblendeten DIV. Du kannst natürlich den zweiten EventHandler auch in <body> schreiben.

        Grüße aus Berlin

        Christoph S.

        --
        Visitenkarte
        ss:| zu:) ls:& fo:) va:) sh:| rl:|
        1. Hi,

          versuch das mal (siehe unten).

          Sorry, hab deine Anfrage nur ueberflogen, daher das Missverstaendnis.

          Entscheidend is die Schleife, und dass du verstehst was da passiert ...

          while(elem.parentNode != null)
             {
              elem = elem.parentNode;
              if(elem.id != null && elem.id == "menu")
               return;
             }

          Es wird vom geklickten Element mittels parentNode immer zu dessen Vater gesprungen. Kommt man auf dem Pfad am table-Element vorbei, dann spring aus der Funktion mit return (d.h. es wird nix gemacht!).

          Wird die Scheife ganz durchgelaufen (hier bis zum document-Objekt, wleches kein Parent hat), dann wird die letzte Zeile noch ausgefuehrt, da das "return" nie ausgefueht wird -> verstecken.

          Hope this helps

          Kann man sicher noch besser machen, aber das is ein funktionierendes (?) Bsp.

          <body>
            <a href="#" id="menulink" onMouseUp="showmenu(event)">
             Link 1
           </a>
           <table id="menu" class="menu">
            <tr>
             <td valign="middle">
              Sequenz:
             </td>
             <td valign="middle">
              <input type="text" style="font-size:9px; width:25px; height:10px;" maxlength="4">
             </td>
             <td>
              <a href="http://www.selfhtml.org">
               OK
              </a>
             </td>
            </tr>
           </table>

          <script language="javascript" type="text/javascript">
            document.onmousedown = hidemenu;

          function showmenu(event){
             //event = event || window.event; // unnoetig solang event nicht benutzt wird
             //elem = event.target || event.srcElement; // unnoetig solang event nicht benutzt wird
             document.getElementById("menu").style.display = "block";
            }

          function hidemenu(event)
            {
             event = event || window.event;
             elem = event.target || event.srcElement;
             while(elem.parentNode != null)
             {
              elem = elem.parentNode;
              if(elem.id != null && elem.id == "menu")
               return;
             }
             document.getElementById("menu").style.display = 'none';
            }
           </script>
          </body>

          1. hallo dr.Colossos,

            hallo,

            Sorry, hab deine Anfrage nur ueberflogen, daher das Missverstaendnis.

            Ic habe gar keine Anfrage gestellt.

            Entscheidend is die Schleife, und dass du verstehst was da passiert ...

            Das verstehe ich, und halte es für "zu viel". Ein EventHandler reicht aus.

            Grüße aus Berlin

            Christoph S.

            --
            Visitenkarte
            ss:| zu:) ls:& fo:) va:) sh:| rl:|
            1. Oooops, die Antwort war nicht fuer dich, sondenr fuer den Thead-Starter gedacht, sorry.

              Vorallem in Bezug auf seine Antwort auf mein 1. Statement.

          2. Es funktioniert genauso wie ich gern haben wollt.
            Vielen Dank für die schnelle Hilfe.

            Gruß,
            Eduard

      2. Hi,

        Du musst das event beim Menue registrieren.

        So aus'm Stehgreif wuerde ich folgendes vorschlagen.

        document.getElementById("menu").onclick = hidemenu;

        Bedauerlicherweise kannst du das (glaub ich) erst ausfuehren, wenn       das Dokument vollstaendig geladen ist, d.h. du muesstest dir evtl. eine init-Funktion schreiben, die du via <body onload='init()'> aufrufst.

        function init()
        {
            document.getElementById("menu").onclick = hidemenu;
        }

        Auch koenntest du "hidemenu" direkt im Layer aufrufen:
        <div id="menu" onclick="hidemenu()">...</div>

        Dann bist aber wieder bei DOM1 angelangt, und das waere zu vermeiden.

        Du kannst mal weiter suchen, wie man am besten Events fuer Elemente registriert, oder jemand gibt dir einen schlauen Tipp hier.

        Ach ja, was auch ginge ...

        function hidemenu(event)
        {
              event = event || window.event;
              elem = event.target || event.srcElement;
              if(elem.id == "menu")
                    elem.style.display = "none";

        }

        Denke letzteres is sauber, und am besten ... lass mich aber gerne korrigieren ...

        1. Hi,

          ich dachte mir ich erlaeuter hier noch ein paar Details.

          Mit ...

          document..onclick = hidemenu;

          ... registrierst du die Funktion hidemenu() fuer jeden Klick auf das Dokument. D.h., auch wenn du auf ein image, link, div etc. innerhalb des Dokuments klicks, feuert das event, und hidemenu() wird ausgefuert.

          function hidemenu(event)
          {
                event = event || window.event;
                elem = event.target || event.srcElement;
                if(elem.id == "menu")
                    elem.style.display = "none";
          }

          "event" kannst du bei diesen Methoden immer dazu schreiben, das Event-Objekt wird dann implizit uebergeben.

          event = event || window.event; ist ein Switch fuer MS und Standard-Methodik. window.event is MS-Syntax, event fuer alle anderen. Das gibt die das Event-Objekt zurueck.

          Analog mit elem = event.target || event.srcElement;. Ersteres ist der Standard, zweiteres MS.
          In jedem Fal kriegst hier das ANGEKLICKTE Element zurueck.

          Naja, und wenn dieses Element nun die id "menu" hat, dann setzen wir "display: none". Fertig!

          Hope this helps

          1. Hi,

            ich würds gerne genau anders rum haben.
            Das Menü soll genau dann geschlossen werden wenn es nicht angeklickt wurde.

            habs so zur Zeit:

            <body>
              <a href="#" id="menulink" onMouseUp="showmenu(event)">Link 1</a>
              <table id="menu" class="menu">
                <tr>
                  <td valign="middle">Sequenz: </td>
                  <td valign="middle"><input type="text" style="font-size:9px; width:25px; height:10px;" maxlength="4"></td>
                  <td><a href="http://www.selfhtml.org">OK</a></td>
                </tr>
              </table>

            <script language="javascript" type="text/javascript">
                document.onmousedown = hidemenu;

            function showmenu(event){
                  event = event || window.event;
                  elem = event.target || event.srcElement;
                  document.getElementById("menu").style.display = "block";
                }
                function hidemenu(event)
                {
                  event = event || window.event;
                  elem = event.target || event.srcElement;
                  if(elem.id != "menu"){
                    document.getElementById("menu").style.display = 'none';
                  }
                }
              </script>
            </body>

            Nun wird das menu aber immer noch geschlossen wenn ich direkt reinklicke.
            Darfs aber net, weil dort ja ein input-feld ist, in welches ich gern was eintragen würde ohne dass das menü davor verschwindet.

            das document.onmousedown = hidemenu; wird also auch ausgeführt wenn ich auf das menü klicke. vlcht gibts was andres, dass da hilft?

            Gruß,
            Eduard