Beiträge von Sempervivum

Mir scheint, die Erklärung ist folgende: Du berechnest die Höhe des roten Divs ja mit Javascript und das steht direkt vor dem schließenden </body> und wird sofort ausgeführt, nachdem das HTML eingelesen wurde. Das ist normaler Weise vollkommen OK, nur hier ist es so, dass Du diese Schriftart "Noto Sans JP" von extern lädst. Das dauert einen kurzen Moment und offenbar wird das Javascript ausgeführt, bevor die Schrift vollständig geladen ist und daher wird die Höhe dieser Schrift nicht berücksichtigt. Dies dürfte sich beheben lassen, indem Du das Javascript erst im load-Event ausführst, dann sollte sicher gestellt sein, dass alle externen Dateien vollständig geladen sind.

Vielleicht interessiert es den einen oder anderen: Ich bin da auf ein cooles Feature von Javascript gestoßen, das ich bisher noch nicht kannte: Mit dem Schlüsselwort yield kann man nach für nach Werte aus einem Array abholen und dazwischen etwas anderes erledigen ohne dass die Schleife sofort bis zum Ende durchrast. Weder MDN noch SelfHTML noch w3schools haben es mir verständlich gemacht aber hier bei Stackoverflow ist es ganz gut erklärt:

https://stackoverflow.com/questions/2282…d-in-javascript

Meine Demo zum Ausprobieren und Verstehen:

    <div id="question"></div>
    <button id="nextBtn">Next Question</button>
    <script>
        // from stackoverflow:
        function* foo(x) {
            while (true) {
                x = x * 2;
                yield x;
            }
        }
        var g = foo(2);
        console.log(g.next()); // -> 4
        console.log(g.next()); // -> 4
        console.log(g.next()); // -> 4



        const questions = ['Question 1', 'Question 2', 'Question 3', 'Question 4'],
            questionContainer = document.getElementById('question');

        function* quiz(arr) {
            for (let item of arr) {
                // return item or next question
                // and wait for next request:
                yield item;
            };
        }

        // get next question:
        function getQuestion() {
            const question = q.next();
            // question.done is indicating that
            // there are no more questions left.
            // question.value is containing
            // the question itself.
            if (!question.done) {
                questionContainer.textContent = question.value;
            } else {
                questionContainer.textContent = 'no more questions';
            }
        }
        q = quiz(questions);
        document.getElementById('nextBtn').addEventListener('click', getQuestion);
        getQuestion();
    </script>

Man muss beachten, dass dies mit forEach nicht funktioniert, siehe hier:

https://stackoverflow.com/questions/2931…-inner-function

Die Funktion counter hat 2 Parameter; beide müssen Funktionen sein mit jeweils einem Parameter. getCounter definierst Du jedoch mit 2 Parametern Du kannst ohne weiteres counter mit zwei Mal der selben Funktion aufrufen:

function getCounter(idx) {
  console.log(idx);
}
counter(getCounter, getCounter)

Mit dieser Zeile:
function counter(callback, newCallback) {

gibst Du vor, dass die Funktion counter 2 Parameter erwartet und es wird auch innerhalb auf beide zugegriffen.

Hier:

counter(getCounter);

übergibst Du jedoch nur einen wenn Du sie aufrufst.

Der Code an sich scheint mir richtig zu sein, nur dieser Kommentar:

Zitat

// Hier wird eine Funktion definiert, die einen Wert zurückgeben soll:

ist IMO missverständlich: Unter "einen Wert zurückgeben" versteht man i. allg. dass die Funktion einen Rückgabewert mit der return-Anweisung zurück gibt. Das ist jedoch hier nicht der Fall sondern die Funktion, die als callback übergeben wurde, wird aufgerufen und der Wert als Parameter übergeben.

// Der Fehler liegt hier: Da Du innerhalb der Funktion doSomethingElse auf ids zugreifst,
// musst Du dies als Parameter definieren:
// function doSomethingElse() {
function doSomethingElse(ids) { 
    console.log(ids);
}

Verwirrend könnte sein, dass hier keine Rede von dem Parameter ist:

getCountRows(doSomethingElse);

Da in der Funktion getCountRows jedoch die Funktion mit diesem Parameter aufgerufen wird, funktioniert das trotzdem:

callback(ids);

Die Fehlerquelle liegt darin, dass ich ständig irritiert war, was denn nun in diesem Parameter drin steckt: Mir drängte sich auf, dass es die IDs selber sind, Daher empfehle ich nrQuestions oder nrIds.

Das Beispiel, das Du da gefunden hast, ist schon Mal sehr gut. Angewendet auf deine Zeilenanzahl müsste das dann in etwa so aussehen:

        // Ermittelt die Anzahl der Fragen und ruft die Callback-Funktion auf:
        function getCountRows(callback) {
            // BTW: Offenbar brauchst Du hier keine Parameter,
            // daher kannst Du das FormData auch weg lassen:
            //const countIds = new FormData();
            fetch('countRows.php', {
                method: 'post',
                // body: countIds
                // BTW2: Mir scheint, der Name ids ist hier irreführend,
                // wir ermitteln die Anzahl der Fragen, nicht wahr?
            }).then(ids => {
                return ids.json();
            }).then(ids => {
                callback(ids);
            });
        }

        // Erstellt eine Frage, deren Antwortmöglichkeiten und die Punktzahl:
        function makeQuestion(nrQuestions) {
            // unabhängig vom Namen, den der Wert in getCountRows hatte (ids),
            // finden wir unter dem Parameter, hier nrQuestions, den Wert vor,
            // mit dem diese Funktion in getCountRows aufgerufen wurde.
            const oneQuestion = new FormData();
            oneQuestion.append('id', i);
            fetch('getQuestions.php', {
                // usw. wie bisher
            });
        }

        // Und der Aufruf dann so:
        getCountRows(makeQuestion);

        // Und in dem anderen Zusammenhang, Anzeigen eines Prologs, etwa so:
        function makeProlog(nrQuestions) {
            // Hier die Anweisungen um den Prolog mit der
            // Anzahl der Fragen anzuzeigen
        }
        // Und der Aufruf:
        getCountRows(makeProlog);

Vorteil: Das Ganze ist etwas aufgeräumter, weil die einzelnen Bestandteile in Funktionen aufgeteilt wurden.

Nachteil: Die Reihenfolge, in der die Funktionen aufgerufen werden, ist nicht mehr ganz so offensichtlich.

Du hast vollkommen Recht, etwas zu duplizieren ist fast immer eine unschöne Lösung. Und die Standard-Alternative ist, den Code in eine Funktion zu packen und diese mehrfache aufzurufen. Was die Sache hier ein wenig kompliziert macht, ist die Tatsache, dass die Abfrage der Anzahl der Fragen asynchron abläuft, d. h. Du kannst nicht einfach im then einen Return machen, um den Wert zurück zu liefern. Aber es gibt eine Lösung: Der Funktion eine Callback-Funktion als Parameter übergeben, in der die Aktionen stehen und diese dann im then-Zweig aufrufen. Versuche es auf diesem Wege und wenn Du nicht zum Ziel kommst, melde dich wieder.

Zitat

Wie kann das sein? & Wie kann ich die ganzen Container auf die komplette Höhe strecken?

Du hast zwar html und body auf die volle Höhe gestreckt, aber was fehlt ist eine Anweisung, die dem main-Container sagt, dass er die volle Höhe ausfüllen soll:

main {
    display: flex;
    flex-direction: row;
    height: 100%;
}

Davon abgesehen ist IMO ist der main-Container überflüssig, denn body ist für Styling nicht tabu. Außerdem wäre es konsequent, statt der Maße in Prozent die Flex-Anweisungen zu verwenden. Dann könnte das CSS so aussehen:

        html,
        body {
            height: 100%;
            margin: 0em;
            padding: 0em;
        }

        body {
            display: flex;
        }

        section#left {
            flex-grow: 2;
            background-color: darkkhaki;
            align-items: stretch;
        }

        section#right {
            display: flex;
            flex-direction: column;
            flex-grow: 3;
        }

        #right div {
            padding: 0em;
            margin: 0em;

        }

        section#right div:first-child {
            background-color: darkorange;
            flex: 3;
        }

        section#right div:nth-child(3) {
            background-color: darkturquoise;
            flex: 3;

        }

        section#right div:nth-child(4) {
            background-color: dodgerblue;
            flex: 1;
        }

        section#right div:nth-child(4) p {
            margin: 0em;
        }

        section#right .row {
            display: flex;
            flex-direction: row;
            background-color: darkred;
            flex: 3;
        }

        section#right .row article {
            flex: 3;
            border: 1px solid black;
        }

Ist dein Problem denn eigentlich gelöst worden?

Sieh dir clip-path an:

https://www.mediaevent.de/css/clip-path-2.html

Ich weiß nicht, ob clip-path vor oder nach der Transformation angewendet wird. Teste es aus.

Alternativ geht auch ein Container darum herum mit overflow: hidden; und geeigneter Größe und Positionierung.

Gut, dass Du den Link gepostet hast. Wie sind denn die Backslashes da hinein geraten? Von denen abgesehen, sieht die Datei gut aus. Lösche sie und beobachte ob es dann funktioniert.

Ja, Du kannst den Code auch komplett auslagern aber dann muss Du die script-Tags und die Zeilen mit den Kommentarzeichen <!-- //-->

weg lassen. Ich hoffe, Du hast sie bisher nicht drin. Nur das was ich in Posting #3 gepostet habe, in die js-Datei. Der Browser weiß schon durch das Einbinden mit dem Script-Tag, dass es sich um Javascript handelt.

Du hast jetzt die Skript-Tags verschachtelt. Erst die Daten einbinden und dann den Rest:

<script src="data.js" ></script>
<script> 
/** Ab hier nichts mehr ändern! **/ 
var num = Math.random(); 
var ran = Math.floor((image.length - 1) * num) + 1; 
document.write('<div id="zahl1">' + link[ran] + '</div><div id="nichtmarkieren"><img src="' + image[ran] + '" border="0" /></div></a>'); 
</script>

(type, language und die Kommentarzeichen braucht man heute nicht mehr.)

Da sehe ich zwei Hauptprobleme:

1. Ein überflüssiges span-Tag innerhalb des Label. Dadurch überlappen sich die Labels.

2. Eine ID muss auf der Seite eindeutig sein. Daher wirkt ein Klick auf das zweite Label auf den ersten Inhalt. Du musst für jedes Label-Input-Paar eine eigene ID verwenden.

Davon abgesehen ist nav und ul für den Inhalt, der aufgeklappt wird, wenig angebracht. Besser z. B. ein section-Tag und den Inhalt darin mit Überschrift und Abschnitten strukturieren.

Da das Javascript-Syntax ist, kannst Du diesen Code auch in eine js-Datei auslagern und mit dem script-Tag einbinden. D. h. die komplette Definition der beiden Arrays:

var image = new Array();

var link = new Array();

/** Hier die (Zufalls)-Banner eintragen. **/

image[1] = \'http://Hier die Bilder URL Adresse 1\';

image[2] = \'http://Hier die Bilder URL Adresse 2\';

image[3] = \'http://Hier die Bilder URL Adresse 3\';

image[4] = \'http://Hier die Bilder URL Adresse 4\';

image[5] = \'http://Hier die Bilder URL Adresse 5\';

image[6] = \'http://Hier die Bilder URL Adresse 6\';

image[7] = \'http://Hier die Bilder URL Adresse 7\';

image[8] = \'http://Hier die Bilder URL Adresse 8\';

image[9] = \'http://Hier die Bilder URL Adresse 9\';

image[10] = \'http://Hier die Bilder URL Adresse 10\';

/** Hier die (Zufalls)-Links eintragen. **/

link[1] = \'http://Hier kommt die Zihladresse für die Bilder URL Adreese 1\';

link[2] = \'http://Hier kommt die Zihladresse für die Bilder URL Adreese 2\';

link[3] = \'http://Hier kommt die Zihladresse für die Bilder URL Adreese 3\';

link[4] = \'http://Hier kommt die Zihladresse für die Bilder URL Adreese 4\';

link[5] = \'http://Hier kommt die Zihladresse für die Bilder URL Adreese 5\';

link[6] = \'http://Hier kommt die Zihladresse für die Bilder URL Adreese 6\';

link[7] = \'http://Hier kommt die Zihladresse für die Bilder URL Adreese 7\';

link[8] = \'http://Hier kommt die Zihladresse für die Bilder URL Adreese 8\';

link[9] = \'http://Hier kommt die Zihladresse für die Bilder URL Adreese 9\';

link[10] = \'http://Hier kommt die Zihladresse für die Bilder URL Adreese 10\';

in eine Datei, z. B. data.js schreiben, ohne script-Tags, und mit diesem Code einbinden:

<script src="data.js"></script>

Was Du da beschreibst stimmt genau mit dem überein was ich im Javascript sehe:

    // Material Parallax
    if ( plugins.materialParallax.length ) {
        if ( !isNoviBuilder && !isIE && !isMobile ) {
            // Kein Novibuilder (?), kein IE, kein Mobilgerät:
            // Parallax initialisieren:
            plugins.materialParallax.parallax();
        } else {
            // Es handelt sich um ein Mobilgerät oder ...
            for ( var i = 0; i < plugins.materialParallax.length; i++ ) {
                var $parallax = $( plugins.materialParallax[ i ] );

                $parallax.addClass( 'parallax-disabled' );
                // Hintergrundbild aus data-Attribut zuweisen:
                $parallax.css( { "background-image": 'url(' + $parallax.data( "parallax-img" ) + ')' } );
            }
        }
    }

(Kommentare habe ich hinzu gefügt)

Es sollte machbar sein, das Hintergrundbild aus dem data-Attribut mit CSS so einzurichten, wie Du es brauchst.

In solch einem Fall hilft der Debugger weiter oder console.log, wenn man die fraglichen Variablen ausgibt. Sieht bei mir so aus:

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

Es ist ein Fehler, über den man hundert Mal hinweg lesen kann: Das "a" in trueanswer ist einmal groß und einmal klein geschrieben.

"Trying to access array offset on value of type bool in /users/music-quiz/www/animalgame3.php on line 21"

liegt i. allg. daran, dass eine Funktion false statt eines Arrays liefert, weil bei der Ausführung ein Fehler aufgetreten ist. Siehe z. B. die Doku von fetch:

https://www.php.net/manual/de/pdostatement.fetch.php

Um heraus zu finden, was für ein Fehler kannst Du auch die SQL-Fehler anzeigen lassen, siehe hier:

https://www.php.net/manual/de/pdostatement.errorinfo.php

Ohne dies zu sehen, scheint mir aber, dass diese Zeile überflüssig ist:

$statement->execute(array($choosen));

Du willst ja den Datensatz auslesen, wo die ID passt und dieses $choosen ist etwas anderes als die ID.