Beiträge von Sempervivum

In einem anderen Thread hast Du ja schon den Hinweis bekommen, dass ein HTML-Dokument in PHP mit DOMDocument geparsed werden kann. Möglicher Weise ist dies subjektiv, weil ich mit Javascript und CSS besser vertraut bin, aber ich fand es immer eine Qual, das Ergebnis auszuwerten, mit xpath oder so geht das, aber die Syntax ist sehr kryptisch.

Ich weiß auch gar nicht, ob dort externes CSS berücksichtigt wird, müsstest Du mal recherchieren.

Unabhängig ob PHP oder JS:

Bei Auswerten oder Parsen von Strings, wie Du es in dem Code oben für die Maßeinheit der Schriftgröße machst, geht alles viel einfacher, wenn Du RegEx verwendest. In deiner Funktion isBlank() tust Du das ja schon.

Ich fürchte, direkt in der HTML-Datei wirst Du nicht an den Text der CSS-Datei heran kommen, sondern Du müsstest sie erst mit Ajax holen, oder gleich auf dem Server auswerten und parsen.

Es gibt jedoch eine andere Möglichkeit: Du kannst mit Javascript und der Funktion getComputedStyle die Schriftgröße aller Elemente auslesen und prüfen.

Vorteil: Es ist egal, ob sie inline, eingebettet im HTML, oder in einer externen Datei definiert ist.

Nachteil: Wird mit Klassen im Selektor gearbeitet, würdest Du die selbe Regel mehrfach prüfen.

Da gibt es mehrere Lösungsmöglichkeiten:

Zunächst mal kann man einen Eventlistener auch wieder entfernen, siehe hier:

https://wiki.selfhtml.org/wiki…arget/removeEventListener

Das setzt allerdings voraus, dass es sich nicht um eine anonyme Funktion handelt, was aber kein Problem sein dürfte.

In jQuery ist das etwas einfacher durch die Aufrufe von on() und off().

Alternativ kannst Du den Startzeitpunkt außerhalb definieren und den Listener ebenfalls außerhalb registrieren, aber den Wert für den Startzeitpunkt erst innerhalb der Funktion zuweisen. Solange Du letzteres nicht getan hast, hat die Variable den Wert null und Du kannst sie später auch wieder auf diesen Wert zurück setzen, so dass Du eine Info hast, ob der Startzeitpunkt gesetzt ist.

Persönlich würde ich das zweite Verfahren vorziehen.

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/ques…igher-z-index-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?).