JavaScriptTimer: Unterschied zwischen den Versionen
| (7 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt) | |||
| Zeile 1: | Zeile 1: | ||
| − | Manchmal kann es nützlich sein bestimmte Inhalte nur innerhalb eines definierten Zeitraums auf einer GCMS-Seite anzeigen zu lassen. | + | Manchmal kann es nützlich sein, bestimmte Inhalte nur innerhalb eines definierten Zeitraums auf einer GCMS-Seite anzeigen zu lassen. Dazu kann man sich eines kleinen JavaScripts bedienen. Folgenden Code innerhalb eines GCMS-Text Elements können sie nutzen: |
: <keinbr /> | : <keinbr /> | ||
: <script> | : <script> | ||
| Zeile 11: | Zeile 11: | ||
: } | : } | ||
: </script> | : </script> | ||
| − | Das "<keinbr/>" führt in GCMS-Text dazu, dass Zeilenbrüche über die Tastatur ignoriert werden. | + | Das "[[Automatische Zeilenumbrüche ausschalten|<keinbr/>]]" führt in dem Inhalts-Editor "GCMS-Text" dazu, dass Zeilenbrüche über die Tastatur ignoriert werden und so das leidige Layoutproblem, dass der Text nach unten geschoben wird, nicht mehr besteht. Lesen sie dazu die Ausführungen in [[Automatische Zeilenumbrüche ausschalten]]. |
| − | Der JavaScript Code enthält zwei Variablen "startDate" und "endDate". Das erstere legt das Startdatum fest, ab dem das Element angezeigt wird und das letzte das Enddatum, bis wann es angezeigt wird. Dabei gibt es einige Besonderheiten der JavaScript Date Funktion. | + | Der JavaScript Code enthält die zwei Variablen "startDate" und "endDate". Das erstere legt das Startdatum fest, ab dem das Element angezeigt wird, und das letzte das Enddatum, bis wann es angezeigt wird. Dabei gibt es einige Besonderheiten der JavaScript Date Funktion. |
| + | [[Datei:Java1.jpg|miniatur|JavaScrpit einbinden]] | ||
| + | Das Format ist folgendes: Date (Jahr,Monat,Tag,Stunde,Minuten,Sekunden,Millisekunden). Bei dem Monat muss man jeweils eins abziehen, da JavaScript bei 0 anfängt. Der Dezember ist so bspw. nicht 12, sondern 11. Auf diese Weise kann man die beiden Daten bestimmen. Das Script überprüft dann bei jedem Aufruf, ob das aktuelle Datum innerhalb dieser beiden genannten liegt (siehe if-Teil) und blendet dann das Element mit der ID "verstecktesElement" ein. Dieses muss dann auch im GCMS-Text definiert sein. Hierzu kann folgender Code genutzt werden: | ||
| + | : <nowiki><div id="verstecktesElement" style="display: none;">Hier ist Inhalt, der nur zu einer bestimmten Zeit angezeigt wird.</div></nowiki> | ||
| + | Der Inhalt ist dabei frei wählbar und kann selbst weiteren beliebigen HTML-Code enthalten. Wichtig ist nur, dass der JavaScript-Teil erst nach dem Element im Inhalt erscheint. Für eine flexiblere Verwendung empfiehlt es sich daher, den Script-Teil in ein weiteres GCMS-Text Element auszulagern. | ||
| − | + | Hier zu erstens einen neuen GCMS-Text hinzufügen. Dann zweitens das neue GCMS-Text Feld durch Anklicken und Ziehen unter das bereits bestehende ziehen. Letztlich drittens das Script einfügen und speichern. Danach erscheint der Inhalt des "versteckten Elements" nur zur zuvor definierten Zeit. | |
| − | |||
| − | |||
Aktuelle Version vom 19. Oktober 2018, 15:58 Uhr
Manchmal kann es nützlich sein, bestimmte Inhalte nur innerhalb eines definierten Zeitraums auf einer GCMS-Seite anzeigen zu lassen. Dazu kann man sich eines kleinen JavaScripts bedienen. Folgenden Code innerhalb eines GCMS-Text Elements können sie nutzen:
- <keinbr />
- <script>
- var startDate = new Date(2015,10,3,10,30,0,0); // 03.11.2015, 10:30 Uhr
- var endDate = new Date(2015,10,3,10,40,0,0); // 03.11.2015, 10:40 Uhr
- var today = new Date();
- if (today.getTime() >= startDate.getTime() && today.getTime() <= endDate.getTime()) {
- document.getElementById('verstecktesElement').style.display = 'block';
- }
- </script>
Das "<keinbr/>" führt in dem Inhalts-Editor "GCMS-Text" dazu, dass Zeilenbrüche über die Tastatur ignoriert werden und so das leidige Layoutproblem, dass der Text nach unten geschoben wird, nicht mehr besteht. Lesen sie dazu die Ausführungen in Automatische Zeilenumbrüche ausschalten.
Der JavaScript Code enthält die zwei Variablen "startDate" und "endDate". Das erstere legt das Startdatum fest, ab dem das Element angezeigt wird, und das letzte das Enddatum, bis wann es angezeigt wird. Dabei gibt es einige Besonderheiten der JavaScript Date Funktion.
Das Format ist folgendes: Date (Jahr,Monat,Tag,Stunde,Minuten,Sekunden,Millisekunden). Bei dem Monat muss man jeweils eins abziehen, da JavaScript bei 0 anfängt. Der Dezember ist so bspw. nicht 12, sondern 11. Auf diese Weise kann man die beiden Daten bestimmen. Das Script überprüft dann bei jedem Aufruf, ob das aktuelle Datum innerhalb dieser beiden genannten liegt (siehe if-Teil) und blendet dann das Element mit der ID "verstecktesElement" ein. Dieses muss dann auch im GCMS-Text definiert sein. Hierzu kann folgender Code genutzt werden:
- <div id="verstecktesElement" style="display: none;">Hier ist Inhalt, der nur zu einer bestimmten Zeit angezeigt wird.</div>
Der Inhalt ist dabei frei wählbar und kann selbst weiteren beliebigen HTML-Code enthalten. Wichtig ist nur, dass der JavaScript-Teil erst nach dem Element im Inhalt erscheint. Für eine flexiblere Verwendung empfiehlt es sich daher, den Script-Teil in ein weiteres GCMS-Text Element auszulagern.
Hier zu erstens einen neuen GCMS-Text hinzufügen. Dann zweitens das neue GCMS-Text Feld durch Anklicken und Ziehen unter das bereits bestehende ziehen. Letztlich drittens das Script einfügen und speichern. Danach erscheint der Inhalt des "versteckten Elements" nur zur zuvor definierten Zeit.
