lorena: Bei aufeinanderprallen von zwei Divs fenster öffnen

Huhu :-)

Ich möchte gerne ein Menü haben das so funktioniert: Es gibt mehrere feste Divcontainer und einen beweglichen. Der bewegliche Divcontainer fährt automatisch dorthin wo mit der Maus hingeklickt wird.
Jetzt möchte ich das wenn man auf ein festes Div klickt der bewegliche Div erst zu dem festen hinfährt und sich dann ein fenster öffnet.
Das bewegliche Div hab ich schon mal geschafft.
Ich habe da noch viele Probleme möchte mir hier aber Stück für Stück hier hilfe holen, deshalb frag ich euch hier nur nach dem nächstgelegenem Problem:
Ein festes Div hat eine feste Position die ich mit offsetLeft und offsetRight herausfinde. Die beiden werte werden mit dem beweglichen Div verglichen. Hat das bewegliche Div das feste Div erreicht wird das fenster geöffnet. Leider muss ich auf dem festen Div genau den ersten px treffen, ich möchte aber das ich das gesamte feste Div anklicken kann und sobald das bewegliche auf das feste trifft soll das Fenster geöffnet werden. Wie bekomme ich das so hin?

lg lorena

  1. Hi,

    Ein festes Div hat eine feste Position die ich mit offsetLeft und offsetRight herausfinde. Die beiden werte werden mit dem beweglichen Div verglichen. Hat das bewegliche Div das feste Div erreicht wird das fenster geöffnet. Leider muss ich auf dem festen Div genau den ersten px treffen, ich möchte aber das ich das gesamte feste Div anklicken kann und sobald das bewegliche auf das feste trifft soll das Fenster geöffnet werden. Wie bekomme ich das so hin?

    Fällt dir dazu selber etwa gar nichts ein ...?

    Wenn du nicht nur die Position der oberen linken Ecke, sondern auch noch die Maße des Elements betrachtest, dann kannst du dir auch die Position der rechten unteren Ecke errechnen.

    Dann kannst du für eine bestimmte Koordinate mittels einfacher kleiner- und grösser-Vergleiche schon mal bestimmen, ob sie "darin" liegt, oder ausserhalb.

    Und wenn du das ganze noch verfeinern willst - dann beziehst du die Maße des beweglichen Elementes auch noch mit ein - dann muss nicht dessen obere linke Ecke das andere Element "treffen", sondern es kann auch eine der anderen Kanten/Ecken sein.

    MfG ChrisB

    --
    Light travels faster than sound - that's why most people appear bright until you hear them speak.
    1. Hallo ChrisB. Vielen dank für deine Antwort :-)
      Es hat mir jedoch nur bedingt weitergeholfen.
      Im moment hab ich es so:
      Ich hole mit offsetTop und offsetLeft die Position eines festen Divs. Zudem hab ich mir zur Position zwei weitere variablen erstellt die jeweils die Position um 10px erweitern.
      Beispiel:

      var div1 = document.all.div1.offsetTop;
      var div1 = document.all.div1.offsetLeft;
      var div12 = document.all.div1.offsetTop + 10;
      var div12 = document.all.div1.offsetTop + 10;

      Es sind jetzt zwei Punkte da die zum Erfolg (öffnen der Seite) führen.
      Wie mache ich jetzt einen richtigen vergleich ob das bewegliche Div innerhalb der beiden (bzw. 4 Punkten) ist?

      Tut mir leid wenn ich dich (euch) wegen so etwas leichtem nerve, finde aber kein Tutorial was mir dabei helfen könnte :-(

      liebe grüße loren

      1. var div1 = document.all.div1.offsetTop;
        var div1 = document.all.div1.offsetLeft;
        var div12 = document.all.div1.offsetTop + 10;
        var div12 = document.all.div1.offsetTop + 10;

        wenn dein code auch im safari funktionieren soll, solltest du DOM-code verwenden und die abfrage so machen:

        var div1 = document.getElementById('div1').offsetTop;

        außerdem frage ich mich, warum du die variable erstens zweimal deklarierst und zweitens überschreibst, ohne sie zu verwenden...

        Wie mache ich jetzt einen richtigen vergleich ob das bewegliche Div innerhalb der beiden (bzw. 4 Punkten) ist?

        ich würde ganz allgemein eine kleine funktion dafür schreiben:

          
        var vergleicheposition = function(div1, div2){  
          var position = function(div){  
            var top = left = 0;  
            while(div.nodeName != 'BODY'){  
              top += div.offsetTop*1;  
              left += div.offsetLeft*1;  
              div = div.parentNode;  
            }  
            return {top:top,left:left};  
          };  
          div1 = position(div1);  
          div2 = position(div2);  
          return (div1.top == div2.top && div1.left == div2.left);  
        }
        

        die funktion gibt true zurück, wenn sich die, linke, obere, Ecke der beiden eingabe-divs direkt übereinander befindet, ansonsten gibt es false;

        mfG Felix Nehrke

        P.S.: Besuche unseren Blog:  http://www.pommes-blog.de

        --
        Manchmal gibs was neues :)
        fo:| ch:| rl:( br:> n4:? ie:( va:) de:> zu:) fl:( ss:| ls:[ js:)
        1. Hallo nemoinho. Danke für deine Hilfe :-)
          Leider bringt auch das mich nicht weiter. Denn das was dein Code macht, macht mein Script schon automatisch. Sobald sich die beiden "linken oberen ecken" treffen ist es "true". Die beiden linken oberen Ecken sind jeweils nur 1px groß. Ich möchte das zumindest das Eck von dem feststehenden div eine größe von 5px hat.

          Ich hoffe ihr versteht was ich meine :-(

          viele liebe grüße lorena

          1. Hi,

            Leider bringt auch das mich nicht weiter.

            Ich habe dir doch einen Hinweis gegeben, wie man das umsetzen könnte.
            Das ist eigentlich recht simple Mathematik, genauer Geometrie.
            Wenn du uns nicht deine eigenen (fortführenden) Gedanken zu dazu mitteilst, sondern wiederholt nur, dass es dich nicht weiter bringe - dann können wir dir auch kaum weiterhelfen.

            Fang mit einem Blatt Papier an, und male dir ein paar Beispielfälle auf.
            Mache dir klar, welcher Zusammenhang zwischen Koordinaten und Maßen, und einer Überschneidung der Elemente besteht.
            Und dann entwickle daraus Formeln und Abfragen/Fallunterscheidungen, die sich in JavaScript umsetzen lassen.

            MfG ChrisB

            --
            Light travels faster than sound - that's why most people appear bright until you hear them speak.
            1. Hallo ChrisB :-)

              Wie ich schon sagte komme ich mit dem hier:

              Und dann entwickle daraus Formeln und Abfragen/Fallunterscheidungen, die sich in JavaScript umsetzen lassen.

              nicht klar.

              Ich habe ja bereits zwei (bzw. vier) Punkte die wenn man sie verbindet ein Viereck bilden. Nun möchte ich gerne das Viereck so haben das wenn das bewegende Div irgendwo an das Viereck grenzt sich ein Fenster öffnet. Nur hab ich keine Ahnung wie der Vergleich in Javascript ausehen muss :-(

              Hoffe mir kann jemand helfen bin was Javascript angeht schwer von Begriff hehe

              viele liebe grüße lorena

              1. Hi,

                Ich habe ja bereits zwei (bzw. vier) Punkte die wenn man sie verbindet ein Viereck bilden. Nun möchte ich gerne das Viereck so haben das wenn das bewegende Div irgendwo an das Viereck grenzt sich ein Fenster öffnet. Nur hab ich keine Ahnung wie der Vergleich in Javascript ausehen muss :-(

                Wie ich schon sagte: Erst mal nicht an JavaScript denken, sondern erst mal den mathematischen Teil erledigen - Aufmalen auf einem Blatt Papier macht das ganze sicher leichter.

                MfG ChrisB

                --
                Light travels faster than sound - that's why most people appear bright until you hear them speak.
                1. Hallo :-)

                  Wie ich schon sagte: Erst mal nicht an JavaScript denken, sondern erst mal den mathematischen Teil erledigen - Aufmalen auf einem Blatt Papier macht das ganze sicher leichter.

                  Danke für den Hinweis. Ich hab auch schon ein wenig herumexperimentiert aber ich bin und war schon immer eine Niete in Mathe :-(
                  Geometrie hab ich in der Schule nicht gelernt.

                  Kannst du mir vielleicht sagen wie man solche Berechnungen nennt, damit ich mich über Google erkundigen kann?

                  viele liebe grüße lorena