Beiträge von Sempervivum

DER Auch wenn mein Posting #15 nur aus zwei Zeilen besteht, empfehle ich, es nicht zu ignorieren. Du schriebst ja schon in deinem Eingangsposting, dass isset() nicht zum Ziel führt. empty() ist dagegen der richtige Ansatz und sollte zum Ziel führen, wenn man es richtig anwendet.

Bei mir funktioniert dein Code einwandfrei. Bist Du sicher, dass Du empty() mit der richtigen Polarität verwendest?

if (empty($_POST['name'])) echo 'name is empty';

Zitat

bei einer Aktualisierung der Seite fällt die Sprache auf die Browsersprache zurück - ist dies Absicht?

Nein, so sollte es genau nicht sein, beim Aktualisieren der Seite oder Aufruf einer anderen sollte die manuelle Auswahl erhalten bleiben und das hat mit meiner Testdatei auch funktioniert. Beschreibe mal deine Testbedingungen: Welcher Browser, lokaler Test mit oder ohne Webserver, gibt die Console irgend welche Anhaltspunkte?

PS: Browserunterstützung sieht gut aus:

https://caniuse.com/#feat=namevalue-storage

sessionStorage heißt, dass der Wert nur während einer Browsersitzung gespeichert wird, localStorage dagegen dauerhaft.

Da dir eine dauerhafte Speicherung lieber wäre, habe ich es mal mit localStorage implementiert und bin selbst überrascht, wie einfach es ist:

    <script>
        var userlang = localStorage.getItem("lang");
        if (userlang) {
            document.querySelector("input[name='rdlang'][value='" + userlang + "']").checked = true;
        }
        var rbs = document.querySelectorAll("input[name='rdlang']");
        for (var i = 0; i < rbs.length; i++) {
            var therb = rbs[i];
            therb.addEventListener("change", function() {
                localStorage.setItem("lang", this.value);
            });
        }
    </script>

Das Skript musst Du am Ende des Body, vor dem schließenden </body>, einfügen.

Ich bin mir noch nicht sicher, ob man dort ein try-catch braucht; ich glaube, mich zu erinnern, dass es in einem anderen Projekt zu einem Laufzeitfehler kam, wenn localStorage nur deaktiviert war, obwohl der Browser es unterstützte. Sollten wir mal beobachten.

What about your HTML? Please post it.

Zitat

Gibt es eine Möglichkeit die Sprache zu (zwischen-)speichern?

Selbstverständlich, dafür gibt es zwei Möglichkeiten:

• Serverseitig in einer Sessionvariablen oder
• Clientseitig im Session- oder Localstorage, je nachdem, welches Verhalten gewünscht ist

The flexyboxes page is fine for training purposes but it is not suitable for creating a nested layout like the one you require.

You write: "before i had normal boxes " - probably that HTML is suitable and needs new styling by flexlaout only. Show us that HTML so that we can check

BTW: These browser specific definitions like -ms-flex-item-align are no longer necessary, you can omit them.

Damit es funktioniert musst Du:

• Einen Text mit Zeilenumbrüchen definieren
• Die Funktion nicht nur definieren sondern auch aufrufen
• Den geänderten Text auch ausgeben:

    <style>
        .textcontainer {
            border: 2px solid lightblue;
        }
    </style>
    <div class="textcontainer" id="textcontainer1"></div>
    <div class="textcontainer" id="textcontainer2"></div>
    <script>

        // Text definieren
        var thetext = 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr,\n\
         sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,\n\
          sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.\n\
           Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.\n\
            Lorem ipsum dolor sit amet, consetetur sadipscing elitr,\n\
             sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,\n\
              sed diam voluptua.';
        // Funktion definieren
        function nl2br(str, is_xhtml) {
            if (typeof str === 'undefined' || str === null) {
                return '';
            }
            var breakTag = (is_xhtml || typeof is_xhtml === 'undefined') ? '<br />' : '<br>';
            return (str + '').replace(/([^>\r\n]?)(\r\n|\n\r|\r|\n)/g, '$1' + breakTag + '$2');
        }

        // Funktion aufrufen, um den Text umzuwandeln
        var newtext = nl2br(thetext);

        // Originalen und umgewandelten Text ausgeben
        document.getElementById("textcontainer1").innerHTML = thetext;
        document.getElementById("textcontainer2").innerHTML = newtext;
    </script>

Rufst Du dann die Seite auf, erkennst Du, dass der originale Text ohne Zeilenumbrüche dargestellt wird, aber der umgewandelte mit.

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

Ich hatte es bisher so verstanden: Der Benutzer wählt einen Ort im Select aus. Für diesen Ort sollen dann die Koordinaten lat und lng übertragen werden. Aber jetzt schreibst Du: "um für jeden Ort ein Hidden mit zu geben?" Also sollen für alle Orte in dem Select die Koordinaten übertragen werden?

PS: Andere Lösung ohne Javascript: lat und lang durch Semikolon getrennt zum value-Attribut der option hinzu fügen. Dann kannst du sie in PHP wieder zerlegen und benutzen.

value="ort;50.4300;12.10410"

Da musste ich einen Moment überlegen, aber jetzt verstehe ich, denke ich, was Du vor hast. Soweit ich das überblicke, geht das am einfachsten mit Javascript:

Die zwei hidden inputs außerhalb des Select und nur einmal anlegen.

Die Koordinaten lat und lang als data-Attribute jeweils bei den options hinzu fügen.

Eventlistener beim select für das change-Event. Darin die data-Attribute mit lat und lng der ausgewählten Option auslesen und als value in die beiden Inputs eintragen.

So, ich bin jetzt in das PHP von Stackoverflow eingestiegen und habe heraus gefunden, warum das automatische Umschalten nicht funktioniert:

Lautet das Kürzel z. B. en-gb, so werden beide Hälften getrennt ausgewertet. Das "gb" rechts vom Bindestrich bekommt eine höhere Priorität und wird deshalb als bevorzugte Sprache ausgewählt. Im HTML und CSS ist jedoch nur "en" vorhanden, so dass die Umschaltung nicht funktioniert.

Ich habe den Code so geändert, dass es funktionieren sollte. Die Funktion ist jetzt kürzer und das Array länger. Ich hoffe, aus meinen Kommentaren wird klar, wie es konfiguriert werden muss.

Bei der manuellen Umschaltung habe ich mich für die CSS-Lösung entschieden. Typisch dafür ist, dass es gewisse Einschränkungen gibt: Die Radiobuttons müssen ganz am Anfang des Body stehen und wenn man die Labels entspr. Zustand hervorheben will, muss man sie entspr. adressieren.

Allzu intensiv habe ich es nicht getestet. Wenn Du Fehler findest, melde dich wieder.

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta charset="UTF-8">
    <title>Test Sprachumschaltung</title>
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">

    <?php
function get_prefered_language(array $available_languages, $http_accept_language) {

    $langs;
    preg_match_all('~([\w-]+)(?:[^,\d]+([\d.]+))?~', strtolower($http_accept_language), $matches, PREG_SET_ORDER);
    foreach($matches as $match) {

        list($a, $b) = explode('-', $match[1]) + array('', '');
        $value = isset($match[2]) ? (float) $match[2] : 1.0;

        if(isset($available_languages[$match[1]])) {
            $langs[$match[1]] = $value;
            continue;
        }
    }
    arsort($langs);

    return $langs;
}
// Die folgende Zeile aktivieren zum Test fuer Englisch
// $_SERVER["HTTP_ACCEPT_LANGUAGE"] = 'en-us,en;q=0.8,es-cl;q=0.5,zh-cn;q=0.3';

// Languages we support
// Key: language from browser
// Value: language used in HTML/CSS class
$available_languages = array(
    "de" => "de", "de-de" => "de", "de-at" => "de", "de-ch" => "de",
    "en" => "en", "en-us" => "en", "en-gb" => "en", "en-ca" => "en"
);
$displayed_languages = array_unique($available_languages);
$langs = get_prefered_language($available_languages, $_SERVER["HTTP_ACCEPT_LANGUAGE"]);
if (count($langs) > 0) {
    reset($langs);
    $thelang = $available_languages[key($langs)];
} else $thelang = "de";

?>
    <style>
        input[value='de']:checked ~ *:not([class*='lang-de'])[class*='lang-'] {display: none;}
        input[value='de']:checked ~ * *:not([class*='lang-de'])[class*='lang-'] {display: none;}
        input[value='en']:checked ~ *:not([class*='lang-en'])[class*='lang-'] {display: none;}
        input[value='en']:checked ~ * *:not([class*='lang-en'])[class*='lang-'] {display: none;}
        input { display: none; border: 2px solid transparent;}
        input[id='rdlang-de']:checked ~ label[for='rdlang-de'] {border: 2px solid grey;}
        input[id='rdlang-en']:checked ~ label[for='rdlang-en'] {border: 2px solid grey;}
    </style>
</head>
<body>
    <!-- Die Inputs, die im folgenden generiert werden, muessen ganz am Anfang des Body stehen.
    Die Labels können an beliebiger Stelle stehen. -->
    <?php
        foreach($displayed_languages as $acc_lang => $disp_lang) {
            if ($disp_lang == $thelang) $rq = ' checked'; else $rq = '';
            echo '<input type="radio" id="rdlang-' . $disp_lang . '" name ="rdlang" value="' . $disp_lang . '"' . $rq . '>';
        }
    ?>
    <label for="rdlang-de">Deutsch</label>
    <label for="rdlang-en">English</label>
    <p class="lang-de">Dies ist deutscher Text</p>
    <p class="lang-de">Dies ist noch ein deutscher Text</p>
    <div>
        <p class="lang-de">Dies ist eingebetteter deutscher text</p>
    </div>
    <p class="lang-en">This is english text</p>
    <p class="lang-en">This is another english text</p>
    <div>
        <p class="lang-en">This is nested english text</p>
    </div>
    <img src="images/sun.jpg">
</body>
</html>

Zitat

Wenn ich bei meinem Browser jetzt 'Englisch' einstelle kommt nicht englisch, wenn ich 'Englisch (Vereinigte Staaten)' einstelle klappt es. Das gleiche auch mit Deutsch.

Daran habe ich auch schon gedacht und ich habe dieses Problem erwartet. Es liegt daran, dass es bei einigen Sprachen regionale Ausprägungen gibt, z. B. en-US. Du hast das ja schon gefunden. Ich werde es mir ansehen und eine Lösung ausarbeiten. Muss mich erst Mal schlau machen wie man das in Opera umstellt.

Bei der Benutzerumschaltung tendiere ich dahin, es clientseitig zu machen, damit die Seite beim Umschalten nicht neu geladen wird und nicht flackert. Erst dachte ich an Javascript, aber dann habe ich einen Blick auf das Codepen in deinem ersten Posting geworfen und gesehen, dass es ohne weiteres auch mit reinem CSS geht, wenn auch die Selektoren etwas kompliziert würden. Hast Du da eine bestimmte Präferenz?

Dann können wir uns ja dem nächsten Schritt zuwenden: Manuelle Umschaltung durch den Benutzer.

Zitat

Im Moment kommt bei mir noch folgendes:

Code

1. 0) { reset($langs); $thelang = key($langs); } else $thelang = "de"; echo ''; ?>
3. Dies ist deutscher Text
5. This is english text

Da offenbar der PHP-Code angezeigt statt interpretiert wird, vermute ich, dass Du deiner Seite noch nicht die Endung .php gegeben hast?

Den Code hatte ich getestet und bei mir hat er einwandfrei funktioniert.

Zitat

und zwar war darum ein div container der keine höhe hatte, also hat dieser eine höhe und breite von 0px und davon 100% ist genau NULL... richtig?

Genau, das war es, was ich oben gemeint hatte.

Zitat

Wenn ich jedoch nur background-size: 100%; eingebe wird es wieder unten abgeschnitten. Warum?

Da musste ich selbst erst Mal genau nachlesen:

https://wiki.selfhtml.org/wiki/CSS/Eigen…background-size

Sie schreiben:

Zitat

Die erste Angabe spezifiziert die gewünschte Breite der Hintergrundgrafik, die zweite entsprechend die Höhe. Ist nur ein Wert gegeben, so wird die Höhe unter Beibehaltung des Seitenverhältnisses skaliert.

D. h. ist das Seitenverhältnis von Container und Hintergrundbild nicht gleich, wird etwas abgeschnitten, oder es bleibt freier Raum bzw. das Bild wiederholt sich, abhängig von background-repeat.

Zitat

dann ist es auch unten abgeschnitten.

und auch bei

background-size: cover;

Das ist genau das Verhalten von cover: Das Bild wird so angepasst, dass es ohne Verzerrung den Container ausfüllt. Stimmen die Seitenverhältnisse nicht überein, führt das dazu, dass etwas abgeschnitten wird, entweder seitlich oder oben/unten.

Zitat

etwas ausserhalb von meinen Möglichkeiten..

Keine Sorge, es geht auch einfacher.

Zitat

Grundsätzlich möchte ich auch, weil es so wenig Text pro Seite ist, auch lieber nicht mehrere SeiteX_[Sprache].html haben

Auch das ist kein Problem. Versuche diesen Code:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta charset="UTF-8">
    <title>Test Sprachumschaltung</title>
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <?php
function prefered_language(array $available_languages, $http_accept_language) {

    $available_languages = array_flip($available_languages);

    $langs;
    preg_match_all('~([\w-]+)(?:[^,\d]+([\d.]+))?~', strtolower($http_accept_language), $matches, PREG_SET_ORDER);
    foreach($matches as $match) {

        list($a, $b) = explode('-', $match[1]) + array('', '');
        $value = isset($match[2]) ? (float) $match[2] : 1.0;

        if(isset($available_languages[$match[1]])) {
            $langs[$match[1]] = $value;
            continue;
        }

        if(isset($available_languages[$a])) {
            $langs[$a] = $value - 0.1;
        }

    }
    arsort($langs);

    return $langs;
}
// Die folgende Zeile aktivieren zum Test fuer Englisch
// $_SERVER["HTTP_ACCEPT_LANGUAGE"] = 'en-us,en;q=0.8,es-cl;q=0.5,zh-cn;q=0.3';

// Languages we support
$available_languages = array("en", "de");

$langs = prefered_language($available_languages, $_SERVER["HTTP_ACCEPT_LANGUAGE"]);
if (count($langs) > 0) {
    reset($langs);
    $thelang = key($langs);
} else $thelang = "de";

echo '<style>:not([class*=\'lang-' . $thelang . '\'])[class*=\'lang-\'] {display: none;}</style>';
?>
</head>
<body>
<p class="lang-de">Dies ist deutscher Text</p>
<p class="lang-en">This is english text</p>
<img src="images/sun.jpg">
</body>
</html>

Du brauchst dann nur die Klasse lang-de oder lang-en usw. zu den HTML-Tags hinzufügen. Ist keine dieser Klassen vorhanden, wie in dem Beispiel beim img-Tag, wird das Element unabhängig von der Sprche angezeigt.

Das PHP ist im Wesentlichen von hier:
https://stackoverflow.com/questions/3770…language-in-php

Nächster Schritt: Das PHP auslagern, damit die Seiten übersichtlicher werden.

Übernächster Schritt: Umschaltung durch Benutzer hinzu fügen.

Im Video funktioniert das, was Du oben gepostet hast, auch nicht, denn Du hast das Gleichheitszeichen hier vergessen:

punkte(name1 + name2).length;

Richtig wäre:

punkte = (name1 + name2).length;

Mir scheint, dass dieser Kurs weniger zu empfehlen ist: Ziemlich nachlässig gemacht, da wird zunächst Code hingeschrieben, der nicht funktioniert, z. b. length() und dann schnell korrigiert und die Verwendung von document.write ist eher nicht zu empfehlen.

Ich empfehle, lieber das Tutorial hier bei html-seminar durchzuarbeiten:

https://www.html-seminar.de/javascript.htm

Zitat

dann verschwindet das Bild komplett.

Hast Du da vielleicht width und height weg gelassen?