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

packen wir's an

Ein Popup anzufassen bedeutet,

• klarzustellen, welches Popup wir verschieben wollen
• festzuhalten, wo es angefasst wird, damit wir es relativ zur Mausposition richtig platzieren können.

Wie immer in solchen Fällen erstellen wir in Javascript eine Funktion, also ein Stück Programm, das bereitsteht und bei Bedarf abgerufen werden kann. Dieser Ausdruck "bei Bedarf" muss jetzt etwas genauer umschrieben werden. Aus der Sicht der Besucher unserer Webseite ist der Bedarf gegeben, wenn ihnen das Popup in den Weg kommt, oder etwas technischer gesprochen, wenn sie mit der Maus auf seinen Titelbalken fahren und die Maustaste drücken.

In der Welt von Javascript ist das ein so genanntes Ereignis, und dieses Ereignis geschieht nicht aus heiterem Himmel, sondern immer im Zusammenhang mit einem Objekt.

Na bravo.

Objekt ist auch wieder so ein Allerweltswort.

Tatsächlich ist alles, was auf einer Webseite kreucht und fleucht ein Objekt. Unsere Funktion anfassen soll aber nicht von jedem Objekt ausgelöst werden, das ergäbe keinen Sinn. Die Funktion ist mit der Titelleiste verknüpft, denn die ist es, die wir anfassen müssen. Wir werden das später noch genauer formulieren, vorderhand reicht es, dass wir darauf zählen können, dass unsere Funktion anfassen nie zum Zuge kommt, ohne dass eine Titelleiste im Spiel wäre. Und wir dürfen damit rechnen, dass es auch bekannt ist, welche Titelleiste es ist.
Das ist wichtig für unsere Funktion, wie wir gleich sehen werden.

Nun schreiben wir also unsere Funktion anfassen, und die sieht folgendermassen aus:

function anfassen(evnt) {
  var mybox = document.getElementById(this.mboxid) ;       // das Popup ausfindig machen
  movingBox = this.mboxid ;                                // die Id des Popups festhalten
  mybox.deltax = mx - mybox.posx ;                         // Distanzen zwischen Mauszeiger und
  mybox.deltay = my - mybox.posy ;                         // linker oberer Ecke des Popups festhalten
  this.style.cursor = "move" ;                             // die Form des Cursors ändern
}

Dazu einige Erläuterungen:

• schon in der einleitenden Funktionszeile erscheint das Wörtchen evnt und deutet darauf hin, dass da ein Ereignis mit im Spiel sei. Wir haben das schon bei der Bestimmung der Mausposition kennen gelernt; es hat etwas mit der verschiedenen Bauweise der Browser zu tun.
• this — auf der nächsten Zeile — bezieht sich auf das Objekt, das das Ereignis ausgelöst hat, in unserem Falle also auf den Titelbalken des zu bewegenden Popups. Wenn wir auf einer Seite mehrere Popups haben, brauchen wir nicht für jedes ein eigenes Javascript-Programm; anhand der Angabe this kann unsere Funktion unterscheiden, welcher Titelbalken angeklickt worden ist.
  Dieser Titelbalken gehört zu einem ganz bestimmten Popup, und wie ein Hund den Namen seines Halters auf dem Halsband mit sich führt, führt der Titelbalken den Namen seines Popups in der Variablen mboxid mit sich. (Dass der Hund ein Halsband bzw der Titelbalken eine Variable mit dem Namen mboxid und der richtigen Beschriftung trägt, dafür werden wir auch noch sorgen müssen.)

  Wenn wir nun diesen Namen in die Variable movingBox stellen, lösen wir einiges aus: die Funktion mouseMove, die bei jeder noch so kleinen Mausbewegung abläuft, wirft ja immer auch einen Blick auf diese Variable, und wenn da nun der Name eines Popups drin ist, wird dieses Popup auch verschoben.

• In den nächsten beiden Zeilen berechnen wir die horizontale und vertikale Distanz zwischen dem Mauszeiger und der linken oberen Ecke des HTML-Elements. Die Koordinaten dieser linken oberen Ecke haben wir als mybox.posx bzw. mybox.posy zur Verfügung, die Koordinaten der Maus als mx bzw. my.

  (Woher die Mauskoordinaten kommen, wissen wir: Aus der Funktion mousePos. Aber auch die linke obere Ecke unseres Popup wird uns nicht einfach so geschenkt, die müssen wir selber suchen. Das gehört dann in den Abschnitt "Kennenlernen")

• Die letzte Zeile enthält ein hübsches CSS-Detail: Wenn wir den Titelbalken angefasst haben, soll sich der Mauszeiger verändern und das Symbol zum Verschieben anzeigen — üblicherweise die in alle vier Himmelsrichtungen zeigenden Pfeile. Schon jetzt ahnen wir, dass wir das beim "Loslassen" wieder rückgängig machen müssen.

Wir können damit bereits ein Popup anfassen und bewegen. Nun müssen wir noch das erste und das letzte Glied der Kette schmieden: Wir müssen das bewegte Popup auch wieder loslassen können (letztes Glied) und — die Voraussetzung für alles — wir müssen es überhaupt erst mal kennen lernen, bevor wir es anfassen können.