Nun kommt zum Schluss noch das Wichtigste: Wir müssen die Popups, die wir bewegen können wollen,
kennenlernen und uns vergewissern, dass sie alle Voraussetzungen dazu erfüllen.
Wir machen dazu wieder eine Javascript-Funktion, der wir zwei Angaben mit auf den Weg geben:
Den Namen des Popups, das wir beweglich machen wollen und einen Hinweis, ob das Popup von Anbeginn an
sichtbar sein soll oder nicht. Diese beiden Zustände bezeichnen wir der Einfachheit halber mit1
(sichtbar) und 0 (unsichtbar). Unser erstes Popup mit der Id fensterlein können wir also mit dem Aufruf
register_box("fensterlein",0) ;
beweglich und unsichtbar machen.
Also, gehen wir Schritt für Schritt voran.
function register_box(boxid,show) {
Damit fangen wir unsere Funktion an. Die beiden Angaben, die wir machen, können wir als boxid bzw. show
ansprechen, was wir gleich sehen werden. Ausserdem öffnen wir die bereits bekannte geschweifte Klammer,
in welcher der ganze Code drinstehen wird, der diese Funktion bildet.
var mybox = document.getElementById(boxid) ;
Wenn wir diese Funktion nun z.B. mitregister_box("fensterlein",0) ;aufgerufen haben, dann
enthält nun die Variable boxid den Namen "fensterlein", und es ist, als hätten wir geschrieben
var mybox = document.getElementById("fensterlein") ;
Diese Zeile sagt folgendes aus: "Wenn ich im Folgenden von mybox spreche, dann meine ich damit
jeweils das HTML-Element, dessen Id mir beim Aufruf der Funktion genannt wurde."
var destx = mybox.offsetLeft;
var desty = mybox.offsetTop;
var thisNode = mybox;
while (thisNode.offsetParent &&
(thisNode.offsetParent != document.body)) {
thisNode = thisNode.offsetParent;
destx += thisNode.offsetLeft;
desty += thisNode.offsetTop;
}
Dies ist ein Stück Javascript, das ich aus dem Internet übernommen habe. Ohne allzutief ins Detail zu gehen,
halte ich einfach fest, dass es die absolute Position unseres Popups im Browserfenster ermittelt und in den
Variablen destx bzw. desty festhält. Du kannst diese Zeilen bedenkenlos übernehmen,
auch wenn du sie nicht in allen Einzelheiten verstehst. Für uns ist vor allem eins wichtig: In diesem Zeitpunkt,
wo diese Funktion aufgerufen wird, muss das Popup sichtbar sein, weil es sonst keine Koordinaten hat, die wir
ermitteln könnten. (Das ist der Grund, warum die Popups nicht von allem Anfang an unsichtbar sein sollten.)
mybox.posx = destx ;
mybox.posy = desty ;
Nun steht unsere Funktion da, mit den beiden Koordinaten in den Händen bzw in den Variablen destx und
desty, und sie weiss genau, dass diese Werte für immer verloren sind, sobald die Funktion endet.
Wenn wir diese Werte behalten und später verwenden wollen, müssen sie daher an einem geeigneten Ort sichergestellt
werden, und das geschieht in den beiden hier zitierten Anweisungen. Damit werden die beiden Werte dem Objekt
mybox mitgegeben, und sie können dann unter dem Namen mybox.posx bzw. mybox.posy
beim Anfassen und beim Verschieben wieder beigezogen werden.
Das war die erste Hälfte des Kennenlernens: Wir haben das gewünschte Objekt anhand seiner Id im HTML-Code gefunden,
wir haben seine Position auf dem Bildschirm mit Hilfe einiger zusammengestohlener Javascript-Anweisungen ermittelt,
und wir haben diese Position im Objekt selber als mybox.posx und mybox.posy notiert.
Nun müssen wir das Popup noch so weit bringen, dass es sich von uns auch anfassen lässt.