Dieses Skript erlaubt der Surferin,
durch die „Kalenderblätter” zu blättern, |
und die Darstellung ein wenig anzupassen, wie in der Hilfe beschrieben. |
Das „Blättern” erfolgt, indem die Eigenschaften display
und visibility
der betroffenen Elemente gesetzt werden. Da hier zwei verschiedene Sätze von CSS-Regeln (für die Bildschirmansicht und den Druck) benutzt werden, muss ich besonders vorsichtig sein. Die direkten Eigenschaften beeinflussen beide Darstellungen. Im Hinblick auf mehrere CSS-Regelsätze (z.B. für Bildschirme, Mobilgeräte und Drucker) ist es sinnvoll, CSS-Eigenschaften nicht direkt per Javascript zu setzen, sondern geeignete Attributwerte zu setzen.
Ich habe mich dennoch entschieden, CSS-Eigenschaften direkt zu setzen. Das angezeigte Kaldenderblatt (div
-Element) hat die Eigenschaft display: block
. Wenn die Surferin „blättert”, darf ich nicht display: none
setzen, weil dann das Blatt nicht gedruckt würde, sondern muss die display
-Eigenschaft entfernen. Auf dem Deckblatt ist die Schaltfläche „zurück” (links) verborgen, auf dem Dezember-Blatt ist die Schaltfläche „weiter” (rechts) verborgen. Um die Schaltflächen anzuzeigen, darf ich nicht deren display
-Eigenschaft zum Beispiel auf block
setzen, weil sie dann auch im Ausdruck erschienen.