Für eine gewisse Zeitspanne mit Hilfe von JS HTML-Code durch anderen HTML-Code ersetzen

[Severus]

Hallo,

für mein Webprojekt möchte ich gerne ein weihnachtliches Doodle, das das Standardlogo zwischen dem 1.12, 0 Uhr, und dem 27.12, 0 Uhr ersetzt. Das geht wohl mit Javascript, oder?

Wenn ich diese Idee fortsetze, könnte ich auch mein Silvester-Doodle (zw. dem 31.12, 0 Uhr, und dem 2.1, 0 Uhr) einbauen.

In der Programmabfolge sollte also wie folgt sein

1. ist die aktuelle Zeit zwischen dem gesetzten Rahmen (1.-26.12.) ?
   -> wenn ja: zeige HTML1 (Weihnachtslogo)
   -> wenn nicht, weiter
2. ist die aktuelle Zeit zwischen dem gesetzten Rahmen (31.12-1.1.)
   -> wenn ja: zeige HTML2 (Silvesterlogo)
   -> wenn nicht, weiter
3. ergo ist es keine der beiden Bedingungen
   -> zeige HTML0 (Standardlogo)

Idealerweise lädt der Browser von den 3 HTML-Codes nur das, was gerade gebraucht wird. Was ich meine: Wenn das Standardlogo gebraucht wird, weil weder der 1.-26., noch der 31.-1. ist, dann braucht er ja die trafficverursachenden Grafiken aus HTML1 und 2 gar nicht laden.

Hat ein Forenmitglied vielleicht eine Idee, mit welchem Code ich sowas löse?

Lieben Gruße Severus

[Gunnar Bittersmann]

@@Severus

für mein Webprojekt möchte ich gerne ein weihnachtliches Doodle, das das Standardlogo zwischen dem 1.12, 0 Uhr, und dem 27.12, 0 Uhr ersetzt. Das geht wohl mit Javascript, oder?

Wenn du damit Node.js im Sinn hast, ja.

Idealerweise lädt der Browser von den 3 HTML-Codes nur das, was gerade gebraucht wird. Was ich meine: Wenn das Standardlogo gebraucht wird, weil weder der 1.-26., noch der 31.-1. ist, dann braucht er ja die trafficverursachenden Grafiken aus HTML1 und 2 gar nicht laden.

Eben. Du willst das Markup serverseitig generieren. Üblicherweise ist dafür PHP das Mittel der Wahl. getdate() und if, elseif, else in der alternativen Syntax sind die Zutaten.

<?php
  $currentDate = getdate();
?>

<?php if ($bedingung1): ?>
  <!-- HTML1 (Weihnachtslogo) -->
<?php elseif ($bedingung2): ?>
  <!-- HTML2 (Silvesterlogo) -->
<?php else: ?>
  <!-- HTML0 (Standardlogo) -->
<?php endif; ?>

😷 LLAP

[JürgenB]

Hallo,

das geht auch mit Javascript, aber

• der Fall „Javascript läuft nicht“ muss behandelt werden, z.B. mit einem Default-Code.
• wer in den Quelltext blickt, sieht was kommt und was war.

Ich habe das mal für einen Aprilscherz gemacht, da war es nicht schlimm, war eh nur digitales Ungeziefer.

@Severus
Welche Technik steht dir zur Verfügung. Welche Technik beherrscht du? Wie sind deine Randbedingungen?

Gruß
Jürgen

[Gunnar Bittersmann]

@@JürgenB

das geht auch mit Javascript, aber

… das ist aufwendiger. Man kann ja nicht einfach alle Bilder ins Markup packen und deren Sichtbarkeit umschalten, sondern muss eins davon mit JS ins DOM tun.

😷 LLAP

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Man kann ja nicht einfach alle Bilder ins Markup packen und deren Sichtbarkeit umschalten, sondern muss eins davon mit JS ins DOM tun.

Man kann ein <img src="data:" alt=""/>-Element ins Markup packen und die Werte der src- und alt-Attribute mit JavaScript ändern: Beispiel.

😷 LLAP

[JürgenB]

Hallo Gunnar,

Man kann ein <img src="data:" alt=""/>-Element ins Markup packen und die Werte der src- und alt-Attribute mit JavaScript ändern: Beispiel.

und mit <img src="default.svg" alt="Logo o.Ä."/> hat man den Fall „kein Javascript“ auch noch abgedeckt.

Aber Severus scheint eine andere Lösung gefunden zu haben. Wenn ich so etwas wie „… mit welchem Code …“ lese, halte ich mich mit Codevorschlägen erst mal zurück und warte, ob Rückfragen kommen.

Gruß
Jürgen

[Gunnar Bittersmann]

@@JürgenB

Man kann ein <img src="data:" alt=""/>-Element ins Markup packen und die Werte der src- und alt-Attribute mit JavaScript ändern: Beispiel.

und mit <img src="default.svg" alt="Logo o.Ä."/> hat man den Fall „kein Javascript“ auch noch abgedeckt.

Meh! Dann lädt man völlig umsonst eine Ressouce, die man einen Moment später durch eine andere ersetzt. Das sollte man vermeiden.

😷 LLAP

[JürgenB]

Hallo Gunnar,

Man kann ein <img src="data:" alt=""/>-Element ins Markup packen und die Werte der src- und alt-Attribute mit JavaScript ändern: Beispiel.

und mit <img src="default.svg" alt="Logo o.Ä."/> hat man den Fall „kein Javascript“ auch noch abgedeckt.

Meh! Dann lädt man völlig umsonst eine Ressouce, die man einen Moment später durch eine andere ersetzt. Das sollte man vermeiden.

ja, aber wie den Fall „kein Javascript“ abdecken? <noscript> wäre eine Option, aber was, wenn Javasript aktiviert ist, aber nicht geladen wird?

Andererseits kann man den Fall „kein Javascript“ genauso behandeln, wie ein nicht geladenes Bild: das Feld bleibt leer bzw. man sieht den alt-Text. Wahrscheinlich ist <noscript> mit Default-Bild die bessere Lösung.

Gruß
Jürgen

[Severus]

Es handelt sich um ein Forum mit der Software XenForo. PHP kann man ohne Probleme in den Quelltext schreiben. Ich kenne mich jedoch nicht wirklich mit PHP aus.

Bzgl JS-Alternative: Wer JS deaktiviert hat, sollte natürlich trotzdem das Standardlogo sehen. Dass man das im Quellcode sieht, ist halb so schlimm. Es ist ja einfach nur ein lustiges Gimmick, kein Geheimnis :)

Den PHP Code oben habe ich nicht so wirklich verstanden, da PHP-Tags laufend geöffnet und geschlossen werden. Kann man das nicht auch in einen PHP-Tag schreiben?

Und was wäre der Code zu den Variablen bedingung1 und 2?

[Gunnar Bittersmann]

@@Severus

Den PHP Code oben habe ich nicht so wirklich verstanden, da PHP-Tags laufend geöffnet und geschlossen werden. Kann man das nicht auch in einen PHP-Tag schreiben?

Das wäre nicht ratsam.

Und was wäre der Code zu den Variablen bedingung1 und 2?

Wie du in der Dokumentation zu getDate() lesen kannst, gibt das ein assoziatives Array zurück. Wenn du das in der Variablen $currentDate speicherst, dann hast du in $currentDate['mon'] den Monat (1—12) und in $currentDate['mday'] den Tag.

Das mit logischen Operatoren verknüpft:

if ($currentDate['mon'] == 12 && $currentDate['mday'] <= 26)

Silvester solltest du jetzt allein hinbekommen.

😷 LLAP

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Silvester solltest du jetzt allein hinbekommen.

Tip: Für Neujahr in der Dokumentation nachschauen, was dieses assoziative Array noch so bietet.

😷 LLAP

[Gunnar Bittersmann]

@@JürgenB

• der Fall „Javascript läuft nicht“ muss behandelt werden, z.B. mit einem Default-Code.

Du dachstest an <noscript><img …/></noscript>?

Das Default-Bild wird bei „JavaScript nicht unterstützt/deaktiviert“ angezeigt. Es gibt noch andere Gründe für „Javascript läuft nicht“.

😷 LLAP

[Gunnar Bittersmann]

@@Severus

für mein Webprojekt möchte ich gerne ein weihnachtliches Doodle, das das Standardlogo zwischen dem 1.12, 0 Uhr, und dem 27.12, 0 Uhr ersetzt.

SELFHTML setzt genau das wohl auch ein. Oder ist da jemand heute früh aufgestanden und hat dem Logo die blaue Mütze aufgesetzt?

Sollte das beim Twitter-Account nicht auch so sein, @Matthias Apsel?

😷 LLAP

[Matthias Apsel]

Hallo Gunnar Bittersmann,

SELFHTML setzt genau das wohl auch ein. Oder ist da jemand heute früh aufgestanden und hat dem Logo die blaue Mütze aufgesetzt?

Natürlich nicht 😀. Nur im Blog läuft es nicht automatisiert.

Sollte das beim Twitter-Account nicht auch so sein, @Matthias Apsel?

Gerne.

Bis demnächst
Matthias

[Christian Kruse]

Hallo Gunnar,

deine Grafik ist übrigens im Chrome kaputt:

Freundliche Grüße,
Christian Kruse

[Rolf B]

Hallo Christian,

ich hatte mich schon gewundert, von welcher Mütze Gunnar da redet...

Nicht dass ich Blue Beanie erklärt bekommen müsste (den Begriff - die Inhalte vielleicht schon 😉)

Rolf

[Der Martin]

Hallo,

ich hatte mich schon gewundert, von welcher Mütze Gunnar da redet...

Nicht dass ich Blue Beanie erklärt bekommen müsste (den Begriff - die Inhalte vielleicht schon 😉)

naja, was dahintersteckt, ist mir schon latent bekannt. Unklar ist mir allerdings, wie jemand auf die Idee kommen konnte, diese Mützen Beanie (also Böhnchen) zu nennen.

Live long and pros healthy,
 Martin

[Gunnar Bittersmann]

@@Christian Kruse

deine Grafik

Meine? Hm, hab ich die mal erstellt? Weiß nicht mehr.

ist übrigens im Chrome kaputt:

Hm, als Hintergrundbild eingebundene SVG-Grafik.^[1] Wenn man die direkt aufruft, ist die Mütze da.

Ist da vielleicht nicht die Grafik kaputt, sondern Chrome?

Besser gesagt: Chromium. Edge ist auch betroffen. Safari aber ebensowenig wie Firefox.

😷 LLAP

---

1. Jaja, ich weiß, ein redundantes Akronym. ↩︎

[Christian Kruse]

Hallo Gunnar,

deine Grafik

Meine? Hm, hab ich die mal erstellt? Weiß nicht mehr.

Ja, hast du 😀

Wenn man die direkt aufruft, ist die Mütze da.

Ja, ist mir heute morgen auch aufgefallen. Früher[tm] ging das auch im Chrome, ich hatte das damals geprüft. Aber ich hatte noch keine Zeit da mal genauer drauf zu schauen.

Freundliche Grüße,
Christian Kruse

[Rolf B]

Hallo Gunnar,

könnte ein Cache hatschi gewesen sein - das Böhnchen ist bei mir jetzt auch in Chrome sichtbar. Oder irgendwer hat noch irgendwas gehext.

Rolf

[Rolf B]

Hallo Rolf,

update: Ich habe das Forum inkognito in Chrome aufgerufen: Keine Mütze. Strg+F5 - immer noch keine Mütze. SVG-Link direkt aufgerufen: Mit Mütze. Zurück zum Forum: Mütze ist da?!

Was zum grundgütigen Geier?

Rolf

[Christian Kruse]

Hallo Rolf,

update: Ich habe das Forum inkognito in Chrome aufgerufen: Keine Mütze. Strg+F5 - immer noch keine Mütze. SVG-Link direkt aufgerufen: Mit Mütze. Zurück zum Forum: Mütze ist da?!

Hehe, kann ich bestätigen. Lustig.

Freundliche Grüße,
Christian Kruse