Inhalt

Einleitung Voraussetzungen Pop Up, Pop down gleich loslegen und gestalten vorknöpfen weg damit aufpolieren und es bewegt sich doch viel Arbeit! Fang die Maus! ja wo ist sie denn? Schiebung! packen wir's an und Tschüss Casting Schleife drum Das Ganze Flatter, flatter Vorhang auf! Klappe zu!

---

Service

Kontakt & Feedback

CSS Anwendung

Pop Up, Pop down

Schleife drum

Das eigentliche Kennenlernen hat ja nun eigentlich stattgefunden. Aber wenn uns an der Bekanntschaft mit diesem Popup wirklich etwas liegt, dann bohren wir gleich zu Beginn etwas tiefer und fragen z.B.: "Ja aber wie ist denn das nun, liebes Popup, hast du denn auch einen Titelbalken?"

Und so sehen dann die nächsten Schritte aus:

1. var i ;
for(i=0 ; i<mybox.childNodes.length ; i++) {
  . . .
}

   Hier bauen wir eine sogenannte Schleife. Das ist ein Programmteil, der mehrfach wiederholt werden kann. In unserem Falle geht's darum, dass wir die erste DIV innerhalb unseres Popups finden wollen — das sollte dann nämlich unser Titelbalken sein.

   Nun kann unser Popup aber beliebig viele HTML-Elemente enthalten, das wissen wir jetzt, da wir das Javascript-Programm verfassen, natürlich nicht im Voraus. Javascript gibt uns aber ein paar Hilfsmittel:
   childNodes ist z.B. die Sammlung aller in unserem HTML-Objekt enthaltenen weiteren HTML-Objekte,
   childNodes.length nennt ihre Anzahl.

   Unsere Schleife verwendet eine Variable namens i um die HTML-Objekte zählen. Sie beginnt dann mit dem ersten Element (i=0 — JavaScript beginnt in solchen Fällen bei 0 statt (wie wir's würden) bei 1), wiederholt das Ganze nochmals, wenn der Wert von i kleiner ist als die Anzahl Elemente in unserem Popup (i<mybox.childNodes.length) und erhöht i jedesmal um 1.
   Hat unser Popup z.B. 3 Elemente, dann wird die Schleife einmal für i=0 durchlaufen, danach für i=1, danach für i=2 und dann ist Schluss, denn i=3 ist nicht mehr kleiner als die Gesamtzahl 3.

   Was denn nun da mehrfach ausgeführt wird, hab ich erst mit drei Pünktchen angedeutet, aber du ahnst sicher, dass das natürlich der wichtigste Teil ist.

2. var i ;
for(i=0 ; i<mybox.childNodes.length ; i++) {
  if(mybox.childNodes[i].tagName == "DIV") {
    mybox.childNodes[i].onmousedown = anfassen ;
    mybox.childNodes[i].onmouseup = loslassen ;
    mybox.childNodes[i].mboxid = boxid ;
    mybox.style.position = "absolute" ;
    mybox.style.top = mybox.posy + "px" ;
    mybox.style.left = mybox.posx + "px" ;
    break ;
  }
}

   Die Schreibweise childNodes[i] weist darauf hin, dass wir beim i-ten Durchgang durch die Schleife auch das i-te Element bearbeiten. Das ist der eigentliche Zweck solcher Schleifen: der Reihe nach mehrere Objekte, Elemente oder Variablen auf die gleiche Art und Weise zu verarbeiten.

   In unserem Falle prüfen wir mit der Anweisung if(mybox.childNodes[i].tagName == "DIV") ob es sich beim i-ten Element um eine DIV handelt, denn wir gehen davon aus, dass die erste DIV in unserem Popup der Titelbalken ist. Und alles, was nun kommt, machen wir nur, wenn's tatsächlich eine DIV ist.

   Mit den ersten beiden Anweisungen onmousedown und onmouseup sagen wir, wass passieren soll, wenn jemand auf dieser DIV die Maustaste drückt bzw loslässt: Dann sollen unsere Funktionen anfassen bzw. loslassen zum Zug kommen. Wir verknüpfen hier drei Dinge miteinander: Das Objekt selber (also die DIV, die unseren Titelbalken repräsentiert), ein Ereignis (z.B. mousedown, das Drücken auf die Maustaste) und anfassen, die Funktion, die wir schon definiert haben. Damit stellen wir sicher, dass beim Anklicken des Titelbalkens die Funktion anfassen ausgeführt wird, und dass sie "weiss", welcher Titelbalken das auslösende Element war.

   Auch wenn wir mit der Maus den Titelbalken anklicken und den Titelbalken herumziehen, wollen wir doch das ganze Popup bewegen. Es macht uns daher die Sache einfacher, wenn wir dem Titelbalken gleich auch die Information anhängen, wie denn "sein" Popup heisst. (Richtig: Jetzt beschriften wir das Halsband des Hundes)

   Schliesslich stellen wir noch die CSS-Angaben des Popups richtig: Es muss absolut positioniert werden können und braucht dazu auch seine Koordinaten.

   Wenn wir das alles erledigt haben, brauchen wir die weiteren HTML-Elemente in unserem Popup nicht mehr zu untersuchen — es wird ja wohl keinen zweiten Titelbalken in unserer DIV haben.
   break sorgt dafür, dass die Schleife verlassen wird, auch wenn noch weitere Elemente zum Untersuchen da wären.

3. if(show == 0) mybox.style.display = "none" ;
else mybox.style.display = "block" ;

   Das letzte Abschnittchen berücksichtigt noch unseren Wunsch, ob das Popup von Anfang an sichtbar sein solle oder eben nicht, indem es das entsprechende CSS-Attribut display auf none oder block setzt.

Damit ist die Knochenarbeit geleistet. Die Javascript-Funktionen stehen bereit, die HTML- und CSS-Anforderungen sind bekannt, es bleiben uns lediglich noch ein paar kleine Ergänzungen, um das Ganze in Betrieb zu setzen.