Inhalt

Service

CSS Anwendung

wie?

Grundsätzlich muss unser neues Skript viel ähnliches machen, wie das, das wir schon kennen: Es muss für jede div die Position neu ausrechnen.

Dann aber muss es nicht neue divs erstellen, sondern die bestehenden verschieben.

Nehmen wir nun einmal an, dass die neue Position statt unserer bisherigen willkürlich angenommenen auf den Koordinaten 250/250 liege, und dass wir diese in den Variablen neux und neuy zur Verfügung haben. Dann können wir etwa folgendes entwerfen:

for(i=0 ; i<text.length ; i++) {
  meinx = neux + i*abstand ;
  meiny = neuy ;

  meini = "f_" + i ;

  // x-Koordinate zuweisen
  // y-Koordinate zuweisen
}

Die Antwort auf diese letzte offene Frage sieht so aus:

  document.getElementById(meini).style.left = meinx + "px" ;

Lass dich von dieser Schreibweise nicht erschrecken; sie ist in Objekt-orientierten Welten üblich. Nimm's einfach von links nach rechts, dann lautet die Anweisung, die wir da formuliert haben:

• Sieh dir unser HTML-document an
• Befass dich darin mit jenem Element das die in der Klammer gelieferte Id hat. (In unserem Fall steht die in der Variablen meini und lautet z.B. für i=5 "f_5").
• Wenn du das Element gefunden hast, sieh dir seine style-Eigenschaften an.
• Da ist eine dabei, die heisst left.
• Dieser Eigenschaft gibst du einen neuen Wert, nämlich meinx + "px", was im Falle von i=5 "350px" sein sollte.

Und hier ist unser vollständiges Bewegungs-Skript:

for(i=0 ; i<text.length ; i++) {
  meinx = neux + i*abstand ;
  meiny = neuy ;
  meini = "f_" + i ;
  document.getElementById(meini).style.left = meinx + "px" ;
  document.getElementById(meini).style.top  = meiny + "px" ;
}

Also auf zur nächsten Frage: Wo tun wir das hin?