Style mit getELementById ändern

[Kermit]

Hallo zusammen,
habe mir ein kleines Javascript geschrieben und wollte dieses nun in Contao einbinden.

Den JS-Code habe ich in das Dateisystem hochgeladen und unter Themes/Seitenlayouts mit einem zusätzlichen Header-Tag

<script type="text/javascript" src="tl_files/DND/js/animation.js"></script>

verknüpft.

Bei Body-Onload noch die Funktion eingetragen: animation ()

JS wird geladen und Funktion ausgeführt. Habe ich durch ein alert sichergestellt.

Habe einen kleine HTML-Code geschrieben und diesen in Templates abgelegt und in den Artikel mittel Insert-Tag eingefügt.

<div>
<div id="mainframe">
	<div id="image1"></div>
        <div id="text1"><h1>Textbeispiel#01</h1></div>
	<div id="image2"></div>
        <div id="text2"><h1>Textbeispiel#02</h1></div>
  </div>
</div>

Über CSS habe ich nun die Elemente angepasst und mit left:-680px verschoben.
Das Script soll nun die einzelnen Elemente animieren.
Dafür nutze ich

window.document.getElementById("image1").style.left=-680+a0;

Leider sprechen die Elemente nicht darauf an. Warum?
Habe die Geschichte vorher zu Fuss ausprobiert. Habe die Dateien mal zusammen gepackt und angehängt.
Öffnen und die index.html öffnen.

Gruß
Kermit

[cliffparnitzky]

Moin,

hmm, ich weiß jetzt nicht genau, warum du left den Wert '-680+a0' zuweist.

Im Grunde erwartet left den X-Wert einer Koordinate in den üblichen Maßeinheiten (%, px, em ...).

Die Maßeinheit ist dabei meiner Meinung nach zwingend und macht alles zu einem String.

Das müsste dann so aussehen:

window.document.getElementById("image1").style.left="-620px";

Wie du das genau animieren willst steht ja hier nicht.

Ggf. musst du den neuen Zielwert für left zuvor berechnen.

Grüße, cliff

[Kermit]

Danke für den Tip. Werde es gleich mal ausprobieren.
Jedoch kann ich nicht ganz nachvollziehen warum das lokal funktionierte.. Siehe Zip.

Kermit

[Kermit]

Hallo,

vielen Dank für den Denkanstoß.

Die Lösung:

window.document.getElementById("image1").style.left=-680+a0+"px";

Zur Info. Mit der Variable a0 wird ein Wert übergeben der immer größer wird. Somit kommt das Bild von links ins Bild...

Gruß
Kermit

[cliffparnitzky]

Super,

warum das lokal klappte weiß ich auch nicht.

Das mit dem a0 hatte ich vermutet .... deshlab meinte ich, dass der neue Zielwert für left ggf. zuvor berechnet werden muss.

Unter Umständen kann sone Kombination wie du beschreibst auch in die Buchse gehen.

Aber wenn es klappt wie gewünscht .... dann Super.

Grüße, Cliff

[Kermit]

Naja, ich werde nun morgen mir ein kleines Drehbuch für die Animation schreiben. Dann kann ich den Code entsprechend anpassen und optimieren.

Vielen Dank.

Kermit