nicht angemeldet
Count down-Uhr, Audiodatei wird nicht abgespielt
Rolf B
Auge
Gunnar Bittersmann
Matthias Scharwies
Tabellenkalk
Der MartinHallo: Hat jemand einen Tipp für mich, wo das Problem beim nachstehenden Code bestehen könnte? Die Audiodatei sollte bei Countdown 10 Sekunden abgespielt werden, aber es tut sich nichts - zumindest nicht im Browser. Beim Test auf W3Schools dagegen funktioniert alles wie gewollt.
Danke schon mal für die Hilfe & Gruß, Franck.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Countdown Clock with Audio</title>
<style>
body {
font-family: Trebuchet MS, sans-serif;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-image: url('https://schulressourcen.de/schulressourcen/0repositorium/bkgrd_pic1.jpg'); /* Background picture */
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
color: white; /* Font color */
}
#countdown {
font-size: 200px;
font-weight: bold; /* Font bold */
}
</style>
</head>
<body>
<div id="countdown">01:00.0</div>
<audio id="audio" src="https://schulressourcen.de/schulressourcen/0repositorium/thx.wav"></audio>
<script>
// JavaScript for the countdown clock
function startCountdown() {
// Set the countdown duration to 15 seconds (in milliseconds)
var countdownDuration = 15 * 1000; // 15 seconds * 1000 milliseconds
// Set the time when the countdown should end
var endTime = new Date().getTime() + countdownDuration;
// Update the countdown every 0.1 second
var x = setInterval(function() {
// Get the current date and time
var now = new Date().getTime();
// Calculate the distance between now and the end time
var distance = endTime - now;
// Calculate minutes, seconds, and tenths of seconds
var minutes = Math.floor(distance / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
var tenths = Math.floor((distance % 1000) / 100);
// Format minutes, seconds, and tenths to add leading zeros if needed
var formattedMinutes = (minutes < 10) ? "0" + minutes : minutes;
var formattedSeconds = (seconds < 10) ? "0" + seconds : seconds;
var formattedTenths = tenths;
if (formattedTenths < 10) {
formattedTenths = "0" + formattedTenths;
}
// Display the countdown
document.getElementById("countdown").innerHTML = formattedMinutes + ":" + formattedSeconds + "." + formattedTenths;
// If the countdown reaches 00:10, play the audio
if (formattedMinutes == "00" && formattedSeconds == "10") {
document.getElementById("audio").play();
}
// If the countdown is over, display a message
if (distance < 0) {
clearInterval(x);
document.getElementById("countdown").innerHTML = "00:00.0";
}
}, 100);
}
// Start the countdown when the page loads
window.onload = startCountdown;
</script>
</body>
</html>
-
Hallo Franck,
Hinweis für HTML-Code bei Selfhtml: Setze davor eine Zeile, in der ~~~html steht. Setze dahinter eine Zeile, in der ~~~ steht. Ich habe das für Dich gemacht.
Die Seite funktioniert bei mir so: Der Countdown beginnt bei 15 und läuft im Zehntelsekundentakt herunter, das Audio beginnt dramatisch bei 10 und endet kurz nach 0.
Fragen also:
-
Soll das so sein?
-
Befindet sich deine Testseite auf schulressourcen.de?
- Wenn ja, warum verlinkst Du sie dann nicht und zwingst uns das Erstellen einer eigenen Testseite auf?
- Wenn nein: Hast Du die Genehmigung von schulressourcen.de, ihre Bandbreite für deine Webseite zu nutzen?
-
Mit welchem URL-Schema rufst Du die Seite auf? http? https? file?
Inhaltlich solltest Du Dir Intl.DateTimeFormat anschauen, damit formatieren sich Zeitangaben bequemer. Ich würde Dich dafür gerne auf's Selfwiki verweisen, aber da bin ich noch nicht mit dem Beispiel fertig. Hier steht's bei Mozilla.
Rolf
--
sumpsi - posui - obstruxi-
Moin Rolf,
Inhaltlich solltest Du Dir Intl.DateTimeFormat anschauen, damit formatieren sich Zeitangaben bequemer. Ich würde Dich dafür gerne auf's Selfwiki verweisen, aber da bin ich noch nicht mit dem Beispiel fertig. Hier steht's bei Mozilla.
ich habe deinen sehr nützlichen Hinweis in meine Antwort eingebaut – das DateTimeFormat macht Laune, d.h. ich könnte da auch etwas der Arbeit im Wiki übernehmen.
Viele Grüße
Robert
-
-
Moin Franck,
Hat jemand einen Tipp für mich, wo das Problem beim nachstehenden Code bestehen könnte? Die Audiodatei sollte bei Countdown 10 Sekunden abgespielt werden, aber es tut sich nichts - zumindest nicht im Browser. Beim Test auf W3Schools dagegen funktioniert alles wie gewollt.
#countdown { font-size: 200px; font-weight: bold; /* Font bold */ }200 Pixel ist sehr groß – aber viel wichtiger ist die Frage, wie sich diese Größe beim Zoomen verhält? Die Empfehlung ist daher Schriftgrößen nicht in Pixel anzugeben, sondern z.B. in
em.<div id="countdown">01:00.0</div>Hier wäre ein
output-Element passender.// JavaScript for the countdown clock function startCountdown() { // Set the countdown duration to 15 seconds (in milliseconds) var countdownDuration = 15 * 1000; // 15 seconds * 1000 milliseconds // Set the time when the countdown should end var endTime = new Date().getTime() + countdownDuration;Ich glaube, dass (relevante) Browser, die das
audio-Element kennen, auchletundconstkennen:const duration_ms = 15 * 1000; // oder gleich im Kopf: 15000// Update the countdown every 0.1 second var x = setInterval(function() { // Get the current date and time var now = new Date().getTime(); // Calculate the distance between now and the end time var distance = endTime - now; // Calculate minutes, seconds, and tenths of seconds var minutes = Math.floor(distance / (1000 * 60)); var seconds = Math.floor((distance % (1000 * 60)) / 1000); var tenths = Math.floor((distance % 1000) / 100);Die Konstante
1000 * 60kannst du außerhalb der Funktion einmal als Konstante festlegen und dann hier jedes Mal verwenden, das spart etwas CPU. Aber es geht noch etwas einfacher:const fracSec = distance / 1e3; const seconds = Math.floor(fracSec % 60); const tenths = Math.floor(fracSec % 1 * 10);Oder mit Rolfs Tipp als Einzeiler:
// außerhalb des setTimeout: const options = { 'minute': 'numeric', 'second': 'numeric', 'fractionalSecondDigits': 1 }; const dateFormatter = new Intl.DateTimeFormat(undefined, options); // Formatierung der Zeitdifferenz innerhalb der Funktion: document.getElementById("countdown").innerText = dateFormatter.format(distance);// If the countdown reaches 00:10, play the audio if (formattedMinutes == "00" && formattedSeconds == "10") { document.getElementById("audio").play(); }Es kann passieren, dass genau diese Sekunde, warum auch immer, in der Anzeige übersprungen wird, d.h. der Vergleich auf kleiner-gleich und ob das Audio bereits läuft ist sicherer:
if (fracSec <= 10 && /* audio spielt noch nicht */) { document.querySelector('audio').play(); }Ich habe jetzt auf die Stelle nicht herausfinden können, wie man herausfindet, ob ein Audio bereits spielt, daher der Kommentar für die zweite Bedingung oben.
// If the countdown is over, display a message if (distance < 0) { clearInterval(x); document.getElementById("countdown").innerHTML = "00:00.0"; }Das sollte besser sein
if (distance <= 0) { clearInterval(x); document.getElementById("countdown").innerText = "00:00.0"; }// Start the countdown when the page loads window.onload = startCountdown;Schöner wäre
startCountdownals Event-Listener hinzuzufügen –loadwartet ja bis alle Ressourcen geladen worden sind:window.addEventListener('load', startCountdown);Im Fehlerfall hilft dir auf jeden Fall ein Tastendruck auf
F12um in den Browser-Entwicklertools nach Meldungen zu schauen.Viele Grüße
Robert-
Hallo Robert,
font-size
die Frage ist, was hier die Anforderung ist. Es gibt ja mehrere Rahmenbedingungen:
- Anzeige soll GROẞ sein
- Anzeige soll weder horizontal noch vertikal den Viewport überschreiten (egal ob das Viewportformat Portrait oder Landscape ist)
D.h. man muss die Größe der Box ermitteln, die für die Zeitanzeige nötig ist, und die Fontsize so wählen, dass sie weder zu hoch noch zu breit ist. Und dies bei jeder Größenänderung des Viewports und der Zoomstufe anpassen. Ich habe gerade keine Vorstellung, wie sich das mit CSS lösen ließe, das braucht meiner Meinung nach JavaScript. Wie bitte, Gunnar? Ob ich dein Bier halten kann? Klar…
dateFormatter.format vs Abfrage auf 10s
Wenn Du den dateFormatter verwendest, gibt's formattedMinutes etc nicht. Die sollte man eh nicht verwenden, sondern direkt mit den Millisekunden arbeiten. ICH würde eine const setzen, wo der Schwellwert drinsteht, ab dem das Audio spielen soll, und einfach abfragen, ob der Schwellwert überschritten ist. Die formatierten Sekunden sind dann irrelevant. Ähnliches gilt für die Abschaltung des Intervalltimers. Wenn man dann noch die Ermittlung der diversen Elemente aus der Timerfunktion heraushält, wird sie deutlich übersichtlicher:
function startCountdown() { const countdownDuration = 15*1000, audioDuration = 10*1000; const startTime = Date.now(), endTime = startTime + countdownDuration, playTime = endTime - audioDuration; const audioElement = document.getElementById("audio"), displayElement = document.getElementById("countdown"), dateFormatter = new Intl.DateTimeFormat(undefined, { 'minute': 'numeric', 'second': 'numeric', 'fractionalSecondDigits': 1 }); const timer = setInterval(function() { const now = Date.now(), displayElement.textContent = dateFormatter.format(endTime - now); if (now >= playTime && audioElement.paused) audioElement.play(); if (now >= endTime) clearInterval(timer); }, 50); } window.addEventListener("load", startCountdown);Ich habe statt new Date().getTime() noch die kürzere Variante Date.now() verwendet. Sie erzeugt kein unnötiges Date-Objekt.
Ob man nun window.onload=startCountdown verwendet oder die addEventListener-Version, ist vom Ablauf her wurscht. Die onload-Variante hat halt den Nachteil, dass sie ein Highlander ist (es kann nur Einen geben). Die addEventListener-Variante ist der Englishman (kann gesittet in der Schlange stehen).
Ich finde es auch „netter“, die play-Methode nur aufzurufen, wenn das Audio noch nicht spielt. Ist doch doof, wenn einem jemand zehnmal pro Sekunden "los mach schon" ins Ohr brüllt, wenn man schon längst macht. Wichtig ist es nicht, das audio-Element ist da entspannt und spielt einfach weiter, wenn man während des Abspielens play() aufruft.
Es ist auch wichtig, das Intervall nicht auf 100ms festzulegen. setInterval garantiert die Intervalldauer nicht, die Intervalle können länger sein. Deswegen lieber doppelt so oft die Anzeige aktualisieren, sonst kann das für die Leute, die in Spielhallen Hausverbot haben[1], zu visuellen Quirks führen.
Ich hatte ja noch überlegt, statt
10die duration-Eigenschaft des Audio-Elements auszulesen, aber das bringt nix, weil dieser Ton über die 0 hinaus nachklingt.Rolf
--
sumpsi - posui - obstruxi
Weil ihr Auge so schnell ist, dass sie den Bewegungen der Räder folgen können und sie deshalb viel wahrscheinlicher gewinnen als die meisten von uns, für die das drehende Rad nur visueller Matsch ist ↩︎
-
Hallo
Wie bitte, Gunnar? Ob ich dein Bier halten kann? Klar…
Pffft, das kriegt der doch nie zurück. 😆
Bekäme man das nicht irgendwie mit
clamphin?Tschö, Auge
--
„Habe ich mir das nur eingebildet, oder kann der kleine Hund wirklich sprechen?“ fragte Schnapper. „Er behauptet, nicht dazu imstande zu sein“ erwiderte Victor. Schnapper zögerte (…) „Nun …“ sagte er schließlich, „ich schätze, er muss es am besten wissen.“ Terry Prattchett, Voll im Bilde-
@@Auge
Wie bitte, Gunnar? Ob ich dein Bier halten kann? Klar…
Pffft, das kriegt der doch nie zurück. 😆
Ich nehm dann ein frisches – auf Rolfs Deckel.
Kwakoni Yiquan
--
Ad astra per aspera
-
-
Servus!
Hallo Robert,
font-size
die Frage ist, was hier die Anforderung ist. Es gibt ja mehrere Rahmenbedingungen:
- Anzeige soll GROẞ sein
- Anzeige soll weder horizontal noch vertikal den Viewport überschreiten (egal ob das Viewportformat Portrait oder Landscape ist)
D.h. man muss die Größe der Box ermitteln, die für die Zeitanzeige nötig ist, und die Fontsize so wählen, dass sie weder zu hoch noch zu breit ist. Und dies bei jeder Größenänderung des Viewports und der Zoomstufe anpassen. Ich habe gerade keine Vorstellung, wie sich das mit CSS lösen ließe, das braucht meiner Meinung nach JavaScript.
Herzliche Grüße
Matthias Scharwies
--
Die Signatur findet sich auf der Rückseite des Beitrags.-
Hallo Matthias,
probiert's halt aus.
Challenge: Die Fontsize muss so limitiert sein, dass die Anzeige weder in der Höhe noch in der Breite zu groß wird, aber so groß wie möglich. Ein absolutes Maximum kannst Du auch noch hinzufügen, wenn's klappt.
Rolf
--
sumpsi - posui - obstruxi-
Servus!
Hallo Matthias,
probiert's halt aus.
Wie gesagt: Am Samstag hab' ich wieder Zeit.
Hier ein Tutorial: https://css-tricks.com/how-to-create-an-animated-countdown-timer-with-html-css-and-javascript/
Ana Tudor hat in den Kommentaren eine verbesserte Version gepostet.
Challenge: Die Fontsize muss so limitiert sein, dass die Anzeige weder in der Höhe noch in der Breite zu groß wird, aber so groß wie möglich. Ein absolutes Maximum kannst Du auch noch hinzufügen, wenn's klappt.
Ja, aber
font-size: 100emauf nem 40-Zöller muss auch nicht.Herzliche Grüße
Matthias Scharwies
--
Die Signatur findet sich auf der Rückseite des Beitrags.-
Hallo allerseits: Danke für die Beiträge! Ich muss mich durch diese jetzt erst einmal durcharbeiten und werde dann sehen ob der entscheidende Hinweis dabei ist. So auf Anhieb habe ich das noch nicht erkannt. Kurz noch zu Rolfs Anmerkungen:
Soll das so sein?
- Ja.
Befindet sich deine Testseite auf schulressourcen.de?
- Nein, lokal.
Wenn ja, warum verlinkst Du sie dann nicht und zwingst uns das Erstellen einer eigenen Testseite auf? s.o.
Wenn nein: Hast Du die Genehmigung von schulressourcen.de, ihre Bandbreite für deine Webseite zu nutzen? Ja.
Mit welchem URL-Schema rufst Du die Seite auf? http? https? file? http und https, beides versucht. Funktionieren beide nicht.
Gruß, Franck
-
Moin Franck,
Mit welchem URL-Schema rufst Du die Seite auf? http? https? file?
http und https, beides versucht. Funktionieren beide nicht.
was heißt „funktioniert nicht“? Und was steht in der Browser-Konsole?
Viele Grüße
Robert -
Hallo Franck,
lokal heißt: auf deinem eigenen PC läuft ein Webserver und von dort rufst Du deine Testseite über http bzw. https ab?
Aber ist egal - ich unterlag einer falschen Annahme. Du bindest das Audio als https ein und das geht immer, egal ob von file, http oder https Seiten.
Damit wären wir bei Roberts Frage: Öffne die Entwicklerwerkzeuge (F12 Taste im Desktop-Browser), gehe auf die Console-Seite und lade dann die Seite neu. Kommen Fehlermeldungen?
Rolf
--
sumpsi - posui - obstruxi
-
-
@@Rolf B
Challenge: Die Fontsize muss so limitiert sein, dass die Anzeige weder in der Höhe noch in der Breite zu groß wird, aber so groß wie möglich.
Die Werte sind magic numbers, da muss man sehen, dass es Mit Fallback-Fonts immer noch passt.
Wichtig: dicktengleiche Tabellenziffern verwenden, damit die Zahlen beim Runterzählen nicht hin- und herhüpfen.
Kwakoni Yiquan
--
Ad astra per aspera-
Hallo Gunnar,
hier hast Du dein Bier zurück. Hab auch nicht viel davon getrunken…
Das ist ein guter Ansatz, aber nicht ganz, was ich dachte, da der Container inline-size verwendet und dadurch seine Höhe selbst festlegt.
Es müsste schon size sein, zusammen mit einer Festlegung der Containerhöhe von außen (sonst bringt size nix).
In etwa so: https://jsfiddle.net/Lx8o13fe/
Allerdings bin ich mit der Fontabhängigkeit unglücklich…
Rolf
--
sumpsi - posui - obstruxi
-
-
-
-
Servus,
der vorgestellte Timer geht ja, Problem ist imho nur die Einbindung des externen wav-Files - warum eigentlich kein mp3 mit ca 30% Dateigröße?
Eigentlich wollte ich so einen Timer mit SVG und custom properties ins Wiki setzen und war jetzt ziemlich erstaunt, was wir bereits alles haben:
- JavaScript/Tutorials/komfortable_Timer-Funktion von 2007!
- JavaScript/WindowOrWorkerGlobalScope/setTimeout#Countdown mit [Los] und [Stop]
- JavaScript/Objekte/Date/now#Timer die Basic-nofrills-Variante
- CSS/Custom_properties_(CSS-Variablen)#Countdown
da würde ich heute aber trotzdem ein meter einsetzen!
Daneben gibt es viele Einzeltutorials
- JavaScript/Tutorials/Validierung von Zeitangaben
- JavaScript/Tutorials/Zeitberechnung
- JavaScript/Tutorials/komfortable Timer-Funktion
- JavaScript/Tutorials/Monatskalender
- JavaScript/Tutorials/Ausführungszeiten messen
Hat irgendjemand Lust, das alles mal neu zu gliedern und dann sukzessive neuzufassen?
@Felix Riesterer Wir hatten ja für die JS-Spiele mal ein Reaktionsspiel angedacht. Hier ist es ja schon: JavaScript/Objekte/Date/now#Reaktionsspiel
Herzliche Grüße
Matthias Scharwies
--
Die Signatur findet sich auf der Rückseite des Beitrags.-
Guten Morgen,
ich hatte vor drei Wochen mal vorgestellt, was wir im Wiki so alles haben. Mittlerweile haben wir einiges zusammengelegt.
JavaScript/Tutorials/Zeit & Datum
integriert die vorherigen Tutorials
- JavaScript/Objekte/Date/Einführung
- JavaScript/Tutorials/Zeitberechnung
Bonus: @Rolf B stellt dort eine Osterberechnung vor. Vielen Dank!
JavaScript/Tutorials/Timer und Countdown
ersetzt:
- JavaScript/Tutorials/komfortable Timer-Funktion
- JavaScript/Tutorials/Ausführungszeiten messen
Da könnte jemand im April die beiden vorhandenen Timer mit SVG und CSS optisch aufwerten und zum Schluss auch einen Signalton reinbringen.
Leider hat @Franck Dettfurth nicht gesagt, warum sein externes audio nicht lädt.
@klawischnigg s Vermutung finde ich stichhaltig.
JavaScript/Tutorials/Monatskalender
Das war mal ne schnelle Arbeit mit document.write und wurde 2015 modernisiert. Mittlerweile müsste man das Script aber so schreiben, dass man von Monat zu Monat kommen kann.
@Felix Riesterer Wir hatten ja für die JS-Spiele mal ein Reaktionsspiel angedacht. Hier ist es ja schon: JavaScript/Objekte/Date/now#Reaktionsspiel
Herzliche Grüße
Matthias Scharwies
--
Die Signatur findet sich auf der Rückseite des Beitrags.-
Hallo Matthias,
ich habe mich jetzt am bestehenden Beispiel bewusst nicht orientiert und würde diesen Vorschlag in den Raum werfen:
https://www.borchmann-one.de/selfhtml/calendar.html
Die Kalendertage sind eine Liste, die Darstellung erfolgt mit Grid, die Farbgebung mit CSS und ein paar Klassen.
Sourcecode ist noch nicht im Wiki, kann über Quelltext Anzeigen abgerufen werden.
Ab August 2024 sieht's komisch aus, weil Monate, die am Wochenende beginnen, ggf. eine Zeile mehr brauchen. Ich wollte aber jetzt keine weiteren Dummyzellen anlegen. Man könnte für #three-months noch align-items:start setzen, aber gut sieht's dann auch nicht aus.
Update: Beitrag gepostet: 20:20 Uhr. Der Serverlog sagt:
[28/Mar/2024:20:23:38 +0100] "GET /selfhtml/calendar.html HTTP/1.1" 200 6573 "-" "Mozilla/5.0 (Macintosh; ..."Das nenn ich mal prompte Reaktion 😂
Rolf
--
sumpsi - posui - obstruxi-
Servus!
Hallo Matthias,
ich habe mich jetzt am bestehenden Beispiel bewusst nicht orientiert und würde diesen Vorschlag in den Raum werfen:
https://www.borchmann-one.de/selfhtml/calendar.html
Die Kalendertage sind eine Liste, die Darstellung erfolgt mit Grid, die Farbgebung mit CSS und ein paar Klassen.
Ja, perfekt!
Sourcecode ist noch nicht im Wiki, kann über Quelltext Anzeigen abgerufen werden.
Ab August 2024 sieht's komisch aus, weil Monate, die am Wochenende beginnen, ggf. eine Zeile mehr brauchen.
Das ist halt so, Ein Februar kann evtl. sogar in 4 Wochen, andere in 5 Wochen untergebracht werden. Und manchmal braucht man eben 6 Wochen
Ich wollte aber jetzt keine weiteren Dummyzellen anlegen. Man könnte für #three-months noch align-items:start setzen, aber gut sieht's dann auch nicht aus.
Update: Beitrag gepostet: 20:20 Uhr. Der Serverlog sagt:
[28/Mar/2024:20:23:38 +0100] "GET /selfhtml/calendar.html HTTP/1.1" 200 6573 "-" "Mozilla/5.0 (Macintosh; ..."Das nenn ich mal prompte Reaktion 😂
Rolf
Herzliche Grüße
Matthias Scharwies
--
Die Signatur findet sich auf der Rückseite des Beitrags.-
@@Matthias Scharwies
https://www.borchmann-one.de/selfhtml/calendar.html
Die Kalendertage sind eine Liste, die Darstellung erfolgt mit Grid, die Farbgebung mit CSS und ein paar Klassen.
Ja, perfekt!
Unsinn.
(Mehr dazu gleich.)
Kwakoni Yiquan
--
Ad astra per aspera
-
-
@@Rolf B
https://www.borchmann-one.de/selfhtml/calendar.html
Die Kalendertage sind eine Liste
Äh, warum das denn?
Mo, Di, …, So sind Spaltenüberschriften – und nicht etwa mit den Kalendertagen gleichgestellte Listitems.
Auch Zeilenüberschriften ließen sich finden: KW 42, KW 43, … – wenn man diese denn anzeigen möchte.
Tabellarischer als ein Kalender können Daten kaum sein (in beiden Sinnen des Wortes). Cheatahs Weisheit hat nichts an Aktualitüat eingebüßt: „Wenn [es sich um tabellarische Daten handelt], ist alles andere als eine Tabelle falsch.“ [Zitat 121]
die Darstellung erfolgt mit Grid
Bei korrektem Markup gibt’s die Darstellung frei Haus.
die Farbgebung mit CSS und ein paar Klassen.
Bei korrektem Markup (d.h. Spaltenüberschriften als
thausgezeichnet, nicht alstd) braucht man nicht ein paar Klassen. Nur eine für die Tage des Vor- und des Folgemonats.Ab August 2024 sieht's komisch aus, weil Monate, die am Wochenende beginnen, ggf. eine Zeile mehr brauchen.
Es gibt Jahre, da sieht’s schon im Februar komisch aus, wenn der eine Zeile weniger braucht.
Da muss man halt mit umgehen, dass die Zeilenanzahl zwischen 4 und 6 schwankt. Die leere(n) Zeile(n) auffällig dunkelgrau zu färben ist nicht der beste Umgang damit. Einfach nichts tun ist besser.
Kwakoni Yiquan
--
Ad astra per aspera-
Servus!
@@Rolf B
https://www.borchmann-one.de/selfhtml/calendar.html
Die Kalendertage sind eine Liste
Und hier?
Für mich wäre das ne
ol.Herzliche Grüße
Matthias Scharwies
--
Die Signatur findet sich auf der Rückseite des Beitrags.-
Hallo,
Für mich wäre das ne
ol.Eine?
Vier! Und zwar geschachtelt: Eine Monats-ol, mit drei items, die jeweils eine Tages-ol enthalten…Gruß
Kalk -
@@Matthias Scharwies
Und hier?
Für mich wäre das ne
ol.Das ist eine ganz andere Darstellung.
Ich bin dagegen auch nicht gefeit. Bei meinem Kuck-mal-was-sich-mit-Grid-alles-machen-lässt habe ich u.a. auch ein Periodensystem vorgestellt. Und in Teil 2 noch ein anderes.
Beim Periodensystem sind die Spalten die Gruppen, die Zeilen die Perioden – eine Tabelle.
Und anders als beim Kalender ist die Anzahl der Spalten nicht willkürlich gewählt, sondern von der Natur vorgegeben.
Und warum ist das so? Fun fact: Mein Chemielehrer beim Abi stellte immer wieder solche Fragen. Und auf die meisten von denen war die Antwort: Schrödinger-Gleichung.
Kwakoni Yiquan
--
Ad astra per aspera-
Guten Morgen,
Für mich wäre das ne
ol.Das ist eine ganz andere Darstellung.
Da hat @molily mal nen Artikel zu geschrieben: Trennung von Inhalt, Darstellung und Verhalten
Zuerst: @Rolf B Vielen Dank für das Beispiel und vor allem für das Neuschreiben des Scripts. Das aus 2001 konnte man nicht übernehmen.
Kritik an Stefan Münz: Er nennt den Kalender Schmuckstück, zeigt aber keinen Use Case.
Heute würde man so einen Kalender zu Unterstützung von Buchungen oder eben als Grundlage für einen Terminplaner nehmen. Das kann man erwähnen, eine komplette App oder die fertige Webseite eines Konzertveranstalters sprengt aber natürlich den Rahmen für ein Tutorial.
Deshalb würde ich es begrüßen, wenn wir das Script zuerst auch für eine Tabelle nutzen, bei der wir dann
tfoot tr:hoverfür Zeilen und Gunnars Idee für Spalten:hover verwenden.Die Grid-Variante könnte man so umbauen, dass man sowohl die "Tabelle" als auch eine Listenansicht mit einigen Terminen hat. Evtl. könnte die Monatsliste als ol mit einem start-Attribut gestartet werden und die Tage dann einfach vom Browser errechnet werden. Ist das sinnvoll?
Wahlweise kann man dann in die 3-Monatsansicht umschalten und dabei die Einträge ausblenden. So funktioniert mein Terminplaner.
Herzliche Grüße
Matthias Scharwies
--
Die Signatur findet sich auf der Rückseite des Beitrags.
-
-
-
Hallo Gunnar Bittersmann,
Tabellarischer als ein Kalender können Daten kaum sein
Das sagst Du. Wenn man recherchiert, findest man Anhänger beider Ansichten. Zumeist sind diese Blogs relativ alt, das Thema scheint schon längst zur Ruhe gekommen sein.
Mo, Di, …, So sind Spaltenüberschriften – und nicht etwa mit den Kalendertagen gleichgestellte Listitems.
Ja, da hast Du recht. Das müsste ein eigener Überschriftenbereich sein, das gehört nicht in die gleiche Liste.
Ich habe einen Kalender erstmal als Liste von Ereignissen angesehen, wie viele andere auch.
Eine Tabelle braucht sachliche Zusammenhänge in den Zeilen und in den Spalten. Bei den Zeilen könnte man die Kalenderwoche anführen, bei den Spalten den Wochentag.
Aber die Darstellung in 7 Spalten ist nicht zwingend, es gibt genügend andere Kalenderdarstellungen, die funktionieren. Das wirft schon die Frage auf, ob die Daten tatsächlich tabellarisch sind. Oder nur ihre gewohnte Darstellung.
Wie ein Screenreader einen Kalender präsentiert, weiß ich nicht. Das ist unser Dauerproblem: wir wollen Zugänglichkeit propagieren und haben die Tools nicht, um den Erfolg zu testen. Ich hab ja einmal mit NVDA rumgemacht, aber das Ding schreckt einen sehfähigen Menschen doch arg ab. Man muss wohl gezwungen sein, das Tool zu nutzen. Es ist halt der beste OpenSource Screenreader, was nicht bedeutet, dass es der beste Screenreader ist.
Vermutlich muss man einen als Liste gemarkupten Kalender mit etlichen visuell versteckten Screenreader-Hints versehen, damit er funktioniert. Keine Ahnung, ob das mit einer Table einfacher ist.
Rolf
--
sumpsi - posui - obstruxi-
@@Rolf B
Aber die Darstellung in 7 Spalten ist nicht zwingend, es gibt genügend andere Kalenderdarstellungen, die funktionieren. Das wirft schon die Frage auf, ob die Daten tatsächlich tabellarisch sind. Oder nur ihre gewohnte Darstellung.
Ja, die 7 ist willkürlich gewählt. Man hätte eine Woche auch 5, 6 oder 8 Tage lang machen können oder das Konzept Woche gar nicht einführen. (Tag, Monat und Jahr hingegen sind von der Natur vorgegeben.) Manche meinen, die 7-Tage-Woche sei von Gott so vorgesehen, aber an sowas glaube ich nicht.
Wie dem auch sei, wir haben nun mal die linear verlaufende Zeit[1][2] in einen künstlichen 7-Tage-Rhythmus gezwungen. Und das spiegelt sich in der Darstellung im Kalender wider.
Kwakoni Yiquan
--
Ad astra per aspera
Für uns jedenfalls. Andere Wesen fragen: “Linear time, what is this?” Star Trek: DS9 S1:E2 ↩︎
Rios: “Time’s a funny thing.” Q: “Yes, it is.” Star Trek: Picard S2:E10 ↩︎
-
@@Gunnar Bittersmann
-
Für uns jedenfalls. Andere Wesen fragen: “Linear time, what is this?” Star Trek: DS9 S1:E2
-
Rios: “Time’s a funny thing.” Q: “Yes, it is.” Star Trek: Picard S2:E10
- Q: “And here I was thinking the next generation wouldn’t think so linearly.” Star Trek: Picard S3:E10
Nach dem voll verkackten Ende (Picard spielt mit seinen Kumpels Poker anstatt zurück nach Hause zu Laris zu gehen) ist das zweite Ende (der Prozess gegen die Menschheit geht mit Jack weiter) sehr gelungen.
Kwakoni Yiquan
--
Ad astra per aspera -
-
-
-
-
Hi there,
Hallo: Hat jemand einen Tipp für mich, wo das Problem beim nachstehenden Code bestehen könnte? Die Audiodatei sollte bei Countdown 10 Sekunden abgespielt werden, aber es tut sich nichts - zumindest nicht im Browser. Beim Test auf W3Schools dagegen funktioniert alles wie gewollt.
Ich vermute das liegt daran, daß die Browser seit einigen Jahren Audio-Dateien erst abspielen, wenn auf der Seite irgendeine User-Interaktion stattgefunden hat. Angeblich soll damit Unfug verhindert werden.
Du startest Dein Countdown-Skript mit dem Window-Load-Event, das wertet der Browser nicht als User-Interaktion. Probier einfach aus, ob Dein Skript funktioniert, wenn Du den Countdown mit einem Buttonklick startest...
-
Servus!
Hi there,
Hallo: Hat jemand einen Tipp für mich, wo das Problem beim nachstehenden Code bestehen könnte? Die Audiodatei sollte bei Countdown 10 Sekunden abgespielt werden, aber es tut sich nichts - zumindest nicht im Browser. Beim Test auf W3Schools dagegen funktioniert alles wie gewollt.
Ich vermute das liegt daran, daß die Browser seit einigen Jahren Audio-Dateien erst abspielen, wenn auf der Seite irgendeine User-Interaktion stattgefunden hat. Angeblich soll damit Unfug verhindert werden.
Ja, klingt logisch. Ich hatte dauernd an CORS gedacht und wsl. die anderen auch, die dauernd gefragt hatten, was im Seiteninspektor dazu steht.
Du startest Dein Countdown-Skript mit dem Window-Load-Event, das wertet der Browser nicht als User-Interaktion. Probier einfach aus, ob Dein Skript funktioniert, wenn Du den Countdown mit einem Buttonklick startest...
Da könnte man auch die Dauer des Timers nach Benutzerwunsch einstellen.
Herzliche Grüße
Matthias Scharwies
--
Die Signatur findet sich auf der Rückseite des Beitrags. -
Hallo,
Ich vermute das liegt daran, daß die Browser seit einigen Jahren Audio-Dateien erst abspielen, wenn auf der Seite irgendeine User-Interaktion stattgefunden hat. Angeblich soll damit Unfug verhindert werden.
das klingt vernünftig, scheint aber in Chromia nicht so realisiert zu sein. Im Microsoft Chrome (aka Edge), der uns von unserer IT in regelmäßigen Abständen immer wieder als Standardbrowser aufs Auge gedrückt wird, hab ich mich schon oft geärgert, dass irgendwelche Sounds ungefragt losplärren.
Firefox ist dagegen so zurückhaltend und diskret, wie man es wünschen und erwarten würde.Einen schönen Tag noch
Martin--
Wo wir sind, ist das Chaos. Aber wir können leider nicht überall sein.-
Hi there,
Ich vermute das liegt daran, daß die Browser seit einigen Jahren Audio-Dateien erst abspielen, wenn auf der Seite irgendeine User-Interaktion stattgefunden hat. Angeblich soll damit Unfug verhindert werden.
das klingt vernünftig, scheint aber in Chromia nicht so realisiert zu sein. Im Microsoft Chrome (aka Edge), der uns von unserer IT in regelmäßigen Abständen immer wieder als Standardbrowser aufs Auge gedrückt wird, hab ich mich schon oft geärgert, dass irgendwelche Sounds ungefragt losplärren.
Also im Chromium unter Linux ist es definitiv so. Auf der Seite https://www.chromium.org/audio-video/autoplay/ kann man folgendes nachlesen:
"Generally, in Chrome developers can no longer assume that audio is allowed to play when a user first arrives at a site..."
Bzgl. Edge verrät der Mirkosaft-Copilot: (mußte ich erst nachschauen)
"Wenn Sie in der Vergangenheit eine bestimmte Website besucht und mit Medien auf der Site interagiert haben, ermöglicht Edge die automatische Wiedergabe basierend auf Ihren vorherigen Interaktionen."
Offenbar merkt sich der Edge, daß Du auf der Seite schon irgendwann einmal herummanipuliert hast. Ist auch irgendwie eigenartig, naja, Mirkosaft halt.
Ich hab mich damit eigentlich schon ziemlich oft auseinandergesetzt, weil ich viele Seiten mit Audio-Abspielen erzeugt habe (wobei allerdings immer das Audio Sinn und Zweck der Seite war, Audio als "Hintergrundmusik" oder ähnliches auf einer Webseite ist ein absolutes No-Go) und die beste Lösung für die Geschichte ist halt einfach ein Button, der das Œuvre startet. "Ungefragt losplärren" ist wahrscheinlich nie eine gute Idee, egal in welchem Environment oder zu welchem Zweck...
-
Hallo,
Bzgl. Edge verrät der Mirkosaft-Copilot: (mußte ich erst nachschauen)
"Wenn Sie in der Vergangenheit eine bestimmte Website besucht und mit Medien auf der Site interagiert haben, ermöglicht Edge die automatische Wiedergabe basierend auf Ihren vorherigen Interaktionen."
das ist aber offenslichtlich nur die halbe Wahrheit, denn das passiert mir auch auf Sites, die ich nie vorher wissentlich besucht habe.
Offenbar merkt sich der Edge, daß Du auf der Seite schon irgendwann einmal herummanipuliert hast. Ist auch irgendwie eigenartig, naja, Mirkosaft halt.
Wenn's so wäre ... okay. Reicht aber als Erlärung nicht aus.
Einen schönen Tag noch
Martin--
Wo wir sind, ist das Chaos. Aber wir können leider nicht überall sein.-
Hi there,
Wenn's so wäre ... okay.
Finde ich eigentlich nicht. Welche Logik soll dem zugrunde liegen? Nur weil ich vor ein paar Monaten schon einmal auf einer Seite war bin ich implizit damit einverstanden, daß die Seite sofort losbrüllt?
Reicht aber als Erlärung nicht aus.
Keine Ahnung. Wahrscheinlich ist das einfach irgendwie halbseiden implementiert...
-
-
-
-
