Beiträge von Sempervivum

Sempervivum

Du erzeugst die Elemente erst im onload-Event. Füge ich dort eine Ausgabe ein, funktioniert es:

Code

    window.onload  = function () {
        viewClass[0].classList.add('classActiv');
        clearcontent('bgHeroes');
        createKnights();
        createWarriors();
        createAssassins();
        createArchers();
        createMechanics();
        createWizards();
        createPriests();
        console.log(document.getElementById('neraxis').id)
    }

Alles anzeigen

Ich vermute, Du hast versucht, außerhalb dieser Funktion zuzugreifen, als das Element noch nicht definiert war.

Sempervivum

PS: Eine Alternative könnte aber sein, das data-Attribut statisch einzuschalten, aber die Buttons, die dazu gehören, mit CSS unsichtbar zu machen. Das ginge dann auch mit Mediaqueries.

Sempervivum

Ich fürchte, mit Mediaqueries kann man nur CSS-Eigenschaften setzen aber keine Attribute

Siehe hier:

https://stackoverflow.com/questions/3760…with-mediaquery

Sempervivum

Bei mir funktioniert display: inline-block; schon, in dieser Demo nimmt der Container nur den Platz entspr. dem Inhalt ein und ist zentriert ausgerichtet:

HTML

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Test</title>
    <style>
        ul.slides li {
            text-align: center;
        }

        ul.slides {
            list-style-type: none;
        }

        .container {
            display: inline-block;
        }
    </style>
</head>

<body>
    <div class="hero hero-slider">
        <ul class="slides">
            <li data-bg-image="images/dia0.jpg">
                <div class="container" style="background:rgba(21,18,21,0.7)">
                    <h2 class="slider-title">Willkommen</h2>
                    <p>Text ...</p>
                    <p>Text ...</p>
                </div>
            </li>
        </ul>
    </div>
</body>


</html>

Alles anzeigen

Sempervivum

Bei dem Fiddle muss ich doch vorsichtig Bedenken anmelden:

1. ul als direktes Kind von ul ist nicht valide

Zitat

Error: Element ul not allowed as child of element ul in this context.

2. Die Beschreibung gehört zu dem Bild und sollte daher sowohl aus semantischen als auch funktionalen Gründen in dem li mit dem Bild liegen.

3. Fraglich, ob eine Liste für die Beschreibung in diesem Fall semantisch sinnvoll ist. Wahrscheinlich liegt der TO mit Überschrift und Absätzen schon richtig.

4. Löst nicht das Problem des TO, denn die Beschreibung nimmt nach wie vor nach rechts die gesamte Fensterbreite in.

html-seminar.de/woltlab/attachment/2215/

Sempervivum

basti1012 So ist es natürlich eine Kleinigkeit, wenn alle Zellen die selbe Breite haben. Der Knackpunkt hier ist jedoch, dass sich die Zellen variabel an den Inhalt anpassen sollen. Der TO schreibt ja:

Zitat

wie ich die Breite der einzelnen divs definiere. Denn diese ergibt sich ja erst aus dem Platz der einzlenen divs welche die Daten brauchen.

Außerdem ist das wesentliche bei Flex, dass sich die Container an den Inhalte anpassen. Der Tabellenkopf hat bei dir jedoch eine feste Höhe.

Sempervivum

Ich empfehle, etwas bewährtes zu verwenden, nämlich datatables:

https://datatables.net/examples/basic_init/scroll_y.html

Vielfältig konfigurierbar, z. B. können nicht benötigte Features ausgeschaltet werden.

Sempervivum

Das ist natürlich blöd. Ich hatte es auch getestet und zufällig ein Beispiel mit px gewählt, so dass mir dies nicht aufgefallen ist. Dann kommt dieser Weg für dich also nicht in Frage.

Sempervivum

Diesen Link habe ich unter meinen Lesezeichen, dort sind die Grundlagen ganz gut erklärt:

https://danielfett.de/2006/03/20/reg…uecke-tutorial/

Sehr gut zum Lernen und zum Testen ist diese Seite:

https://regex101.com

RegEx ist sehr mächtig und es lohnt sich auf jeden Fall, sich darin einzuarbeiten. Unabhängig von dieser Aufgabe gibt es sehr viele Einsatzmöglichkeiten.

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.

Sempervivum

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.

Sempervivum

Da gibt es mehrere Lösungsmöglichkeiten:

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

https://wiki.selfhtml.org/wiki/JavaScrip…veEventListener

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.

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.

Sempervivum

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

Code

        (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);
        }());

Alles anzeigen

Sempervivum

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.

Sempervivum

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

Sempervivum

So funktionierts mit dem Verschieben:

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

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

Sempervivum

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:

Code

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

Sempervivum

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.

Sempervivum

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.

Beiträge von Sempervivum

Erstellte id zugreifen, wie?

Data Paging gößenanhängig machen

Data Paging gößenanhängig machen

div Breite an Inhalt anpassen

div Breite an Inhalt anpassen

Position fixed und sticky in ie11

Position fixed und sticky in ie11

Mit Javascript eine CSS-Datei Parsen - wie geht das?

HTML-Code mit PHP analysieren - geht das?

HTML-Code mit PHP analysieren - geht das?

Mit Javascript eine CSS-Datei Parsen - wie geht das?

Game: Reaktionsmesser

Game: Reaktionsmesser

Webseite automatisch scrollen lassen

Photoswipe blendet die Navigation nicht aus obwohl z-index vieeel höher ist

Eine id hinzufügen, wie?

Eine id hinzufügen, wie?

Eine id hinzufügen, wie?

Eine id hinzufügen, wie?

Eine id hinzufügen, wie?