Automatisierter Inhalt abhängig von Tag und Uhrzeit

**dereo** · 22.11.2021, 09:42

Ähnlich wie 3dr würd ich gern automatisiert Inhalte definieren, in meinem Fall sollte es aber ähnlich wie bei Öffnungszeiten sein.
Hätte im Idealfall gern in der linken Spalte eines zweispaltigen Layouts ein individuelles Bild angezeigt, damit der Seitenbesucher gleich sieht, es ist jemand im Büro anzutreffen oder nicht. Hab schon ein wenig im Forum gestöbert, aber nicht wirklich was Entsprechendes gefunden, außer eine eher umständliche Lösung mit Events und Kalender.

Könnte man eventuell mit html so was gestalten mit "erreichbar" (entsprechendes Bild angezeigt zum Beispiel Mo-Fr von 10 bis 13 und 14 bis 16 und Sa 10 bis 12) bzw. "nicht erreichbar" (entsprechende Grafik wird dann sonntags und außerhalb der Zeiten vom erreichbaren Termin eingeblendet)? Wäre schön, wenn jemand einen Tipp für mich hätte!

Danke!

**bizon** · 22.11.2021, 11:04

Der Thread heißt Zeitgesteuert Inhalte immer wieder anzeigen.

Erstelle ein Template und benenne es z.B. templates/js_stundenweise.html5 mit diesem Inhalt:

Code:

<script>
(function () {
    var d = new Date();
    var n = d.getHours();

    if (n > 19 || n < 6) {
       document.body.classList.add('nacht');
    } else {
       document.body.classList.add('tag');
    }
})();
</script>

Aktiviere dieses Template im Seitenlayout.

Damit erhält <body> je nach Uhrzeit die Klasse 'nacht' bzw. 'tag'.

Dann erstelle deine Inhaltselemente für Tag bzw. Nacht und gib denen die Klassen 'showatday' bzw. 'showatnight'.

CSS:

Code:

/* Show at day or night */
.showatday,
.showatnight {
    display: none;
}
.tag .showatday {
    display: block;
}
.nacht .showatnight {
    display: block;
}

Weitere Feinheiten kannst du damit sicher auch umsetzen.

**dereo** · 22.11.2021, 12:30

Zitat von bizon

Der Thread heißt Zeitgesteuert Inhalte immer wieder anzeigen.

Erstelle ein Template und benenne es z.B. templates/js_stundenweise.html5 mit diesem Inhalt:

Code:

<script>
(function () {
    var d = new Date();
    var n = d.getHours();

    if (n > 19 || n < 6) {
       document.body.classList.add('nacht');
    } else {
       document.body.classList.add('tag');
    }
})();
</script>

Aktiviere dieses Template im Seitenlayout.

Damit erhält <body> je nach Uhrzeit die Klasse 'nacht' bzw. 'tag'.

Dann erstelle deine Inhaltselemente für Tag bzw. Nacht und gib denen die Klassen 'showatday' bzw. 'showatnight'.

CSS:

Code:

/* Show at day or night */
.showatday,
.showatnight {
    display: none;
}
.tag .showatday {
    display: block;
}
.nacht .showatnight {
    display: block;
}

Weitere Feinheiten kannst du damit sicher auch umsetzen.

Vielen Dank!!! "Zeitgesteuert" hätte ich halt als Suchbegriff nehmem sollen