Beiträge von Sempervivum

Ich nehme an, der fragliche Listener ist der auf gamesSection in playGame. Warum kannst Du den denn nicht außerhalb der Funktion registrieren? Dieses gameSection scheint doch vollkommen statisch zu sein, weil die Variable ganz am Anfang außerhalb von allen Funktionen definiert wird.

Das mehrfache Registrieren könnte man durch eine Statuskennung unterbinden, aber ich würde zunächst eine andere Lösung suchen.

Edit: Vermutung: Die Variable start ist das Problem, weil sie lokal in playGame definiert ist und nicht verfügbar, wenn der Listener außerhalb definiert wird.

BTW: Wenn ich das richtig überblicke, kannst Du die meisten deiner let durch const ersetzen.

Auch ohne jQuery kein Problem, wenn man von dem Schnipsel in Posting #3 ausgeht:

        (function () {
            const waitBefore = 2000;
            const waitAfter = 2000;
            const step = 4;
            function scroll() {
                var position = window.pageYOffset;
                window.scrollBy(0, step);
                if (position === window.pageYOffset) {
                    setTimeout(function () {
                        window.scrollTo(0, 0);
                        location.reload(true);
                    }, waitAfter);
                } else {
                    window.setTimeout(scroll, 10);
                }
            }
            setTimeout(scroll, waitBefore);
        }());

Ich habe eine Weile gerätselt, aber ich denke, ich habe jetzt den Grund gefunden, warum der z-index von dem Photoswipe nicht wirkt: Der Photoswipe-Container ist ein Kindelement vom main und ein Kindelement kann keinen anderen z-index haben als das Eltern-Element, siehe hier:

https://stackoverflow.com/questions/1605…dex-than-parent

Der z-index von main ist 90 und muss auch kleiner sein als der der Nav, damit diese immer sichtbar ist, wenn das Photoswipe aus ist.

Versuche, den Container des Photoswipe außerhalb von main zu legen, so dass er ein direktes Kindelement von body ist.

Sehr gut, wie ich sehe, hattest Du es schon selbst heraus gefunden.

So funktionierts mit dem Verschieben:

image.style.backgroundPosition = x + '% ' + y + '%';

d. h. die Gänsefüßchen sind überflüssig.

Zitat

wie ich dieser id die position des bild verschieben kann

Meinst Du damit, das Hintergrundbild verschieben um das richtige Teilbild sichtbar zu machen? Dann brauchst Du IMO nicht die ID und musst es auch nicht für jedes Bild von Hand machen, sondern Du kannst es mit der Anweisung machen, die Du schon in deinem Code hast:

            image.style.backgroundPosition = '"' + x + '%' + y + '%' + '"';

Jetzt verstehe ich. Erst Mal die ID: Einen Index hast Du ja schon. Dann kannst Du einfach die ID aus dem Array auslesen und dem Element zuweisen:

image.id = knights[i];

Mit der Anzeige der Sprites bist Du anscheinend schon auf dem richtigen Wege. Man kann es nur schlecht beurteilen, wenn man nicht weiß, wie das Bild aussieht.

Verstehe ich genauso wenig. Sollen das dann die IDs werden, weil Du ja auch von IDs schreibst? Auf jeden Fall müssen auch die Dateinamen der Bilder irgendwo her kommen, denn Du willst ja eine Bilderreihe erzeugen.

Was meinst Du denn mit "Namen", die Dateinamen?

Da gibt es verschiedene Möglichkeiten:

1. Wenn das HTML und die Bilder, etc., nicht allzu umfangreich sind, kannst Du die Druckversion in der selben Datei unterbringen und die Sichtbarkeit für den Druck mit einer Mediaquery umschalten:

https://wiki.selfhtml.org/wiki/CSS/Media_Queries#Medientypen

2. Wenn Du gern eine getrennte Datei haben willst oder wenn diese wegen des Umfangs, siehe oben, angeraten ist, kannst Du die Druckversion mit Ajax, z. B. von einem Druck-Button gesteuert, mit Ajax einlesen.

Das liegt daran, dass Du dem div.logo ein padding zugewiesen hast und gleichzeitig eine Breite von 100%. Diese 100% gelten dann für die Breite ohne Padding, d. h. mit Padding ergibt sich eine Breite von mehr als 100%.

Lösung, indem Du width: 100%; für div.logo löschst und body display: flex; und flex-direction: column; zuweist.

Edit: Wie ich sehe, braucht es gar kein display: flex; für body, denn div ist ja ein Blockelement und füllt von allein die verfügbare Breite aus.

Wenn Du das alles so siehst, solltest Du aber auch deine Aktivitäten bei der Webentwicklung allein im stillen Kämmerlein betreiben und nicht anderen zumuten, sich durch einen Wust von inline-Styles zu kämpfen

Etwas unkonventionell, das Ganze aber hat was

Zitat

Ja ich weiß, Tabellen sollten am Besten komplett vermieden werden, aber manchmal geht dies leider nicht.

Das ist ein Missverständnis, das man häufig antrifft. Es trifft zu, dass man vermeiden sollte, Tabellen für Layoutzwecke zu missbrauchen. Handelt es sich dagegen um die Darstellung von Daten, die von ihrer Struktur her tabellarisch sind, ist nichts dagegen einzuwenden.

Man sollte jedoch etwas anderes vermeiden: Float, sofern es nicht tatsächlich um das Umfließen eines Elementes geht. Dafür, die Anordnung von Elementen zu steuern, sind Flex- und Gridlayout entwickelt worden. Ich habe das CSS in deiner Mediaquery mal auf Flex umgestellt und siehe da, es wird so dargestellt, wie gewünscht.

        @media screen and (max-width:700px) {

            table,
            tr,
            td {
                padding: 0;
                border: 1px solid black;
            }

            table {
                border: none;
            }

            thead {
                display: none;
            }

            tr {
                display: flex;
                flex-direction: column; /* Tabellenzellen jetzt untereinander darstellen */
                width: 100%;
                margin-bottom: 2em;
            }

            td {
                /* float: left; */
                display: flex; /* Elemente, :before und Zelleninhalt, nebeneinander darstellen */
                /* width: 100%; */ /* Die Breite wird jetzt durch das flex für tr festgelegt */
                padding: 1em;
            }

            td::before {
                content: attr(data-label);
                word-wrap: break-word;
                background: #eee;
                border-right: 2px solid black;
                width: 20%;
                /* float: left; */
                padding: 1em;
                font-weight: bold;
                margin: -1em 1em -1em -1em;
            }

            .spalte {
                /* float: left; */
                width: 60%;
            }
        }

Zitat

allerdings würde ich den Zeitstempel, bis wann der Timer laufen soll ... darin speichern.

Genau das tut das vorhandene Skript, siehe ab Zeile 33 in Posting #6:

                var target_date = Date.now() + time_limit; // set the countdown date
                // Endezeit in den Localstorage eintragen
                localStorage.setItem('target_date', target_date);

bzw. ab Zeile 85 in der optimierten Version in Posting #23.

Zitat

Aber ich bin gern für vorschläge offen Man kann ja nur dazu lernen

Wenn das so ist: Ich habe das Ganze etwas überarbeitet, so dass man eine Funktion für beliebig viele Timer verwenden kann. Die Statusvariablen onload und isChecked wegrationalisiert. Ich finde es so wesentlich übersichtlicher.

    <div id="timer1">
        <div class="toggle text">
            <label style="left: -1.5em;"> Unter
                <input type="checkbox" class="unter" value="90"> <span class="slider"></span>
            </label>
        </div>
        <br>
        <div class="countdown">
            <div class="tiles color-full"></div>
        </div>
    </div>
    <div id="timer2">
        <div class="toggle text">
            <label style="left: -1.5em;"> Unter
                <input type="checkbox" class="unter" value="180"> <span class="slider"></span>
            </label>
        </div>
        <br>
        <div class="countdown">
            <div class="tiles color-full"></div>
        </div>
    </div>
    <!-- Beliebig viele weitere HTML-Bloecke fuer Timer anlegen -->
    <script>
        function Timer(id) {
            // Timervariable fuer das setInterval
            var thetimer;
            var container = document.getElementById(id);
            var thecb = container.querySelector('.unter');
            thecb.addEventListener('click', timerUnter);
            var thetiles = container.querySelector('.tiles');
            var target_date = localStorage.getItem('target_date-' + id);
            var time_limit;
            if (target_date) {
                // Endezeit vorhanden: Zeitdifferenz berechnen
                time_limit = target_date - Date.now();
                // Timer starten
                setTimeout(
                    function () {
                        //alert( 'done' );
                    }, time_limit);
                doCountdown();
                // Timer starten
                thetimer = setInterval(doCountdown, 1000);

                thecb.checked = true;
            }
            function doCountdown() {
                var days, hours, minutes, seconds; // variables for time units
                var countdown = thetiles; // get tag element
                // find the amount of "seconds" between now and target
                var seconds_left = (target_date - Date.now()) / 1000;

                if (seconds_left >= 0) {
                    console.log(time_limit);
                    if ((seconds_left * 1000) < (time_limit / 2)) {
                        thetiles.classList.remove("color-full");
                        thetiles.classList.add("color-half");
                    }
                    if ((seconds_left * 1000) < (time_limit / 4)) {
                        thetiles.classList.remove("color-half");
                        thetiles.classList.add("color-empty");
                    }

                    days = pad(parseInt(seconds_left / 86400));
                    seconds_left = seconds_left % 86400;

                    hours = pad(parseInt(seconds_left / 3600));
                    seconds_left = seconds_left % 3600;

                    minutes = pad(parseInt(seconds_left / 60));
                    seconds = pad(parseInt(seconds_left % 60));
                    // format countdown string + set tag value
                    countdown.innerHTML = "<span>" + hours + ":</span><span>" + minutes + ":</span><span>" + seconds + "</span>";
                }

            }
            function pad(n) {
                return (n < 10 ? '0' : '') + n;
            }
            function timerUnter(event) {
                if (this.checked) {
                    var minutes = this.value;
                    var time_limit = minutes * 60 * 1000;
                    target_date = Date.now() + time_limit; // set the countdown date
                    // Laufzeit in den Localstorage eintragen
                    localStorage.setItem('target_date-' + id, target_date);
                    //set actual timer
                    setTimeout(
                        function () {
                            //alert( 'done' );
                        }, time_limit);
                    doCountdown();
                    // Timer starten
                    thetimer = setInterval(doCountdown, 1000);
                } else {
                    thetiles.classList.remove("color-empty");
                    thetiles.classList.add("color-full");
                    thetiles.innerHTML = '';
                    clearInterval(thetimer); // Timer löschen
                    localStorage.removeItem('target_date-' + id);
                }
            }
        }
        var thetimer1 = new Timer('timer1');
        var thetimer2 = new Timer('timer2');
        // Beliebig viele weitere Objekte anlegen
    </script>

Das wird alles hier erklärt:

https://wiki.selfhtml.org/wiki/HTML/Web_Components/template

Demnach wird ein Template zwar geparst und auf Richtigkeit geprüft aber nicht gerendert und nicht in das DOM eingehängt.

Zitat

Irgendwie widersteht es mir schon Degin und Script zu vermengen. Insbesondere, da CSS ja eigentlich unter anderem daraus entstanden ist, um Inhalt und Design-Angaben zu trennen.

Das hat natürlich immer noch seine Berechtigung. Man müsste aber auch die Begründung dieser Forderung berücksichtigen: Wenn ich es richtig verstehe, soll dadurch lesbarer, übersichtlicher und leicht zu ändernder Code entstehen.

Wenn auf der anderen Seite aber eine Situation entsteht:

Zitat

Und irgendwie habe ich es auch bisher immer mit irgendwelchen Tricks geschafft, zumindest das Layout ohne JS aufzubauen und auch - zumindest im Frontend - weitestgehend auf JS zu verzichten...

kann durch Trickserei dieses Ziel in das Gegenteil verkehrt werden und ich würde eine Lösung bevorzugen, mit einem Skript eine geradlinige Berechnung durchzuführen.

Bestes Beispiel sind Slideshows rein mit CSS: Machbar und eine interessante Herausforderung, aber eine Qual, wenn es um die Erweiterung geht.

Oder man denke an die Aufgabe, eine Reihe von Containern unabhängig vom Inhalt auf gleiche Höhe einzustellen. Bevor es Flexlayout gab, nur mit Javascript zu lösen (oder gab es doch irgend welche Tricks mit CSS?).

Zitat

Ja ich habe das ganze jetzt 5x hintereinander

Ich nehme an, das bedeutet, dass Du auch die Funktion TimerUnter 5x hast und jedes Mal timerspezifisch angepasst hast? Wenn Du es so hast und keine Erweiterungen zu erwarten sind, ist es ja gut, aber es wäre kein Problem gewesen, diese Funktion so ändern, dass eine einzige beliebig viele Timer verwalten kann.

Zitat

var timer in die funktion mit rein weil ich das ganze 5 mal habe, also 5 Timer

Eigentlich wäre das die beste Methode, man hat dann nur das Problem, dass sie bei einem erneuten Aufruf nicht mehr greifbar ist. Man müsste das Ganze dann objektorientiert anlegen, d. h. diese Variable im Objekt definieren, das nur einmal erzeugt wird. Und dann die Funktionen darin, die nötig sind.

Zitat

werde jetzt einfach 5 timer Variablen machen und die einfach oben deklarieren

Das ist sicher möglich, aber wahrscheinlich wirst Du dann auch Teile des Javascript vervielfachen müssen. IMO nicht so günstig und ich würde den objektorientierten Ansatz vorziehen.

Ich habe mit deinem Code eine Testdatei gemacht und denke, ich verstehe, was dein Ziel ist: Du möchtest die Divs von der Breite her so einrichten, dass keines abgeschnitten ist, auch wenn wegen des Scrollings rechts ein Teilbereich unsichtbar ist.

Wenn es meine Aufgabe wäre, hätte ich nicht solche Berührungsängste, Parameter mit Javascript zu berechnen. CSS ist nun mal nicht dafür gedacht, zu rechnen, wenn man mal von solch einfachen Dingen wie calc absieht, sondern sieht bestimmte Verfahren bzw. Layoutmuster vor, die mit Flex- oder Gridlayout definiert werden und wo der Browser dann die passenden Abmessungen berechnet.

Einfach die passende Breite der Divs ausrechnen und setzen.