Beiträge von Sempervivum

Mit dem Code aus deinem ersten Posting warst Du schon auf dem richtigen Weg. Wenn Du dataType:'json' angibst, veranlasst jQuery bereits das Parsen und stellt die Daten in einer Javascript-Struktur zur Verfügung. Du kannst dich davon überzeugen, indem Du die Daten in der Console ausgibst. Aus dieser Struktur kannst Du die Daten einfach auslesen und Variablen zuweisen:

    $('.send').on('click', function(event) {
    
        event.preventDefault();
        
        var plz = $('.plz').val();
                
        $.ajax({
            
            type: 'POST',
            url: 'name.php',
            data: {plz:plz},
            dataType: 'json',
            success: function(data) {
                // Die Antwort vom Server wurde bereits geparsed und steht
                // jetzt nicht als String sondern als JS-Struktur zur Verfügung
                console.log(data);
                var ort = data.place;
                var bundesland = data.state;
                // jetzt stehen Ort und Bundesland in den Variablen zur Verfügung
            },
            error: function(data) {
                alert(data);
            }
        
        });
    
    });

Der Kern der Sache ist, dass man auf die sticky-Positionierung verzichtet und Nav und Main mit Flexlayout untereinander anordnet, dann gibt es keine Überlappung.

Die Höhe des Body habe ich auf 100vh (100% der Fensterhöhe) gesetzt, damit man die Nav nicht aus dem Blickfeld scrollen kann. Gescrollt wird jetzt statt der ganzen Seite nur noch im Main-Container (overflow:auto). Dadurch bleibt die Nav immer sichtbar.

Der Dank gebührt MrMurphy, der dieses Muster entwickelt hat.

Evtl. so:

https://jsfiddle.net/Sempervivum/8b5gzd4L/2/

funktioniert bei mir im Opera, aber ich bin mir nicht sicher, ob es zuverlässig ist, wenn der Inhalt nicht im Body sondern einem Div darin liegt.

PS: Man erkennt es, wenn der Hintergrund der Nav halb transparent ist:

https://jsfiddle.net/Sempervivum/0wmstp41/10/

Zitat

wenn die Navigation <nav> in css mit position: sticky und top 0.

Wahrscheinlich ist das tatsächlich der Grund: Der Browser springt in Wirklichkeit zu diesem Anker, so dass das betr. Div oben im Browserfenster anfängt, aber das h-Element ist durch die Navigation verdeckt und es sieht aus, als ob er zu dem Absatz darunter springt:

https://jsfiddle.net/Sempervivum/0wmstp41/9/

In der Doku von $.ajax steht:

Zitat

dataType (default: Intelligent Guess (xml, json, script, or html))

Type: String

The type of data that you're expecting back from the server.

d. h. dieser Parameter definiert, welche Daten vom Server in Empfangsrichtung zurück erwartet werden. Mit dem Senden der Parameter hat das nichts zu tun. D. h. deine "datas" musst Du so wie sie sind an die Funktion übergeben.

Vielleicht so:

    <style>
        .frage:valid + span {
           display: inline;
        }
        .frage + span {
            display: none;
        }
    </style>
    Nenne die einwohnerreichste Stadt in Deutschland
    <input class="frage" required pattern="^Berlin$">
    <span>Die Tabelle für Berlin</span>
    Nenne die zweitgrößte Stadt in Deutschland nach Einwohnerzahl
    <input class="frage" required pattern="^Hamburg$">
    <span>Die Tabelle für Hamburg</span>

Allerdings weiß ich nicht genau, wie das mit der Tabelle gemeint ist.

Ja, gibt es. Einmal hier bei HTML-Seminar:

https://www.html-seminar.de/css-flexbox.htm

und hier bei CSS-Tricks:

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Zitat

Ein Bildschirm kann doch nur eine bestimmte Breite haben, oder?

Also müsste ich dann für jede mögliche Bildschirmbreite ein eigenes @media

erstellen. Aber ich kenne nicht alle Bildschirmbreiten oder Höhen.

Genau deshalb fragt man in aller Regel mit einer Mediaquery nicht eine bestimmte Breite ab, sondern legt eine Grenze mit min-width oder max-width fest und hat dann nur noch zwei Möglichkeiten: Fenster kleiner, dann wende diese CSS-Regeln an - Fenster größer oder gleich dann wende jene CSS-Regeln an.

U. u. kann es mehr als einen Umschaltpunkt geben, aber für den Anfang sollte erst Mal einer genügen.

Dafür gibt es mehrere Lösungen:

Auf float verzichten und dem div mit dem Text display: inline-block und eine minimale Breite min-width zuweisen. Dann sollte der Browser beides untereinander darstellen, sobald die Fensterbreite zu klein wird.

oder

Auf Float verzichten und mit Flexlayout beides nebeneinander anordnen und mit einer Mediaquery bei einer geeigneten Fensterbreite auf Darstellung untereinander umschalten.

Zitat

mich würde das auch interessieren.

Dann soll dir geholfen werden, bevor dieser Thread geschlossen wird. Informiere dich über Mediaqueries und Flexlayout:

https://www.html-seminar.de/css-flexbox.htm

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

Mit Flex kannst Du die Anordnung der Container fest legen, nebeneinander oder untereinander. Und mit Mediaqueries kannst Du zwischen beiden je nach Bildschirmbreite umschalten.

_{Die sind wohl von meinen Tests. Ich habe Chrome benutzt, in Opera ging es nicht.}

Bei mir scheint dein letzter Link aber zu funktionieren. Ton wird aufgezeichnet und korrekt abgespielt.

Zitat

Muß jetzt irgendwie den Blob auf den Server kriegen.

Das wird hier diskutiert:
https://stackoverflow.com/questions/1333…t-upload-a-blob

Weil es mich interessierte, habe ich es mal getestet und dies funktioniert bei mir:

        function doneEncoding(blob) {
            var fd = new FormData();
            fd.append('data', blob);
            $.ajax({
                method: 'POST',
                url: 'saveblob.php',
                data: fd,
                processData: false,
                contentType: false,
                success: function (output) {
                    console.log("done");
                    document.getElementById("outpt").innerHTML = output;
                }
            });

            // Recorder.setupDownload(blob, "myRecording" + ((recIndex < 10) ? "0" : "") + recIndex + ".wav");
            // recIndex++;
        }

saveblob.php

<?php

error_reporting(E_ALL);
ini_set('display_errors', '1');

var_dump($_FILES);
$file = 'test.wav';
move_uploaded_file ($_FILES['data']['tmp_name'], $file);
?>

Zitat

Aber ich gehe erstmal Googeln weil doneEncoding sagt mir gerade gar nix ?

Diese Funktion ist nichts Allgemeines, sondern sie ist spezisch in deinem Skript definiert. Beim Googeln wirst Du vermutlich auch nicht anderes als dieses Skript finden.

Sieh dir die Funktion doneEncoding an. Die hat als Parameter das Blob mit dem Audio. Damit kannst Du dann weiter arbeiten.

Zitat

Muss der <!doctype html> nicht ausführlicher sein?

Nein, keine Sorge, mit HTML5 hat es diese starke Vereinfachung beim Doctype gegeben.

Zitat aus den Fehlemeldungen:

Zitat

element "header" undefined
You have used the element named above in your document, but the document type you are

using does not define an element of that name.

Die semantischen Tags wie "header", "main", "footer" etc. wurden erst mit HTML5 eingeführt. Um sie zu verwenden, musst Du den entspr. Doctype verwenden:

<!doctype html>

PS: Die Listenstruktur ist jedoch nicht valide:

Zitat

Error: Element a not allowed as child of element ul in this context. (Suppressing further errors from this subtree.)

From line 8, column 17; to line 8, column 27

<a href=""><li>Ho

Zitat

und im <header> den Seiten-Titel (als <h1>

Ach so, da hatte ich dich falsch verstanden, ich dachte, die Überschrift sollte zur Navigation gehören. Dann ist sie natürlich im nav-Tag nicht so gut aufgehoben und ein header-Tag ist eher angebracht. Unter diesen Bedingungen finde ich deine Lösung B) gut.