HTML5 - Sprachwechsel (automatisch und per Tab)

oli28 · 11. Januar 2019

Zitat von Arne Drews

Was muss meine Funktion können?

Die Funktion soll die übermittelten verfügbaren Sprachen aus dem Browser auslesen, idealer Weise nach Priorität sortiert.

Diese Sprachen sollen mit den erlaubten Sprachen verglichen werden. Die erste verfügbare Sprache, die erlaubt ist, soll meine Sprache sein.

Wird keine verfügbare Sprache in den erlaubten gefunden, soll meine Standardsprache verwendet werden.

Dies ist mir klar. Das Verständnis dafür ist, vermute ich, durchaus da. Mir geht es jedoch klar an dem technischen Verständnis im HTML-Bereich. (meine 'Kenntnisse' sind ein paar lachhafte HTML-Lektionen in der Berufsschule gefolgt von vielen langen und mittel erfolgreichen Stunden des herumprobierens)

Zitat von Arne Drews

Die Nutzung selber wäre allerdings relativ simpel:

Das mag es für Dich sein, für mich ist es dies leider, noch nicht - wie gesagt

Zitat von oli28

etwas ausserhalb von meinen Möglichkeiten..

Zitat von Arne Drews

Weitergehende Erklärungen spare ich mir erstmal, weil Du es vermutlich eh nicht nutzen wirst.

Die ist, vor allem für mich, natürlich schade. Auch wenn ich nicht genau weiss inwiefern diese Aussage hier nützlich erscheinen sollte.

Mich freut jede Hilfe sehr, die Sprachumschaltung ist ein Thema das ich, mangels Fachwissen, schon länger vor mir her schiebe. Dass das Ziel jetzt so 'nahe' ist freut mich noch mehr.

oli28 · 11. Januar 2019

Zitat von Sempervivum

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

Ich habe kurz gegoogelt und versucht die Vorteile/Nachteile abzuwägen.

Bei der Serverseitigen Sessionsvariablen ist es 'nur' bis zum Ende der Sitzung gespeichert, wenn ich dies richtig verstanden habe? Dies ist toll, noch besser wäre natürlich eine 'dauerhafte' Speicherung.
Client-Session vermute ich wie oben?
Client-Local, da ist vermutlich eine längerfristige Speicherung möglich?

Die Speicherplatz-Einschränkung wird für diesen Fall keine Hindernisse darstellen..

Wie sieht denn der Aufwand und die Kompatibilität (Gerät/Browser) aus? Oder hast Du eine Empfehlung was Du vorschlagen würdest?

Sempervivum · 11. Januar 2019

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:

Code

    <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>

Alles anzeigen

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.

Sempervivum · 11. Januar 2019

PS: Browserunterstützung sieht gut aus:

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

Arne Drews · 12. Januar 2019

Wenn Du alles verstehen würdest, hättest Du die Frage nicht gestellt und Dir wirft auch dahingehend niemand etwas vor.

Du hast Dich aber für einen Weg entschieden, von dem man Dich leider nicht abholen kann, wie es scheint. Das ist der einzige Grund, warum ich mein Beispiel nicht im Detail hier ausführe. Du reagierst in diesem Thread fast ausschließlich auf die Beiträge von Sempervivum, der Dir zwar sehr intensiv hilft, aber die Lösung aus meiner Sicht leider nicht gut ist.

Das ist aber Deine Entscheidung, ich versuche nur einen alternativen Lösungsansatz darzustellen, bin aber keineswegs böse oder enttäuscht, wenn Du daran Mangels Verständnis nicht interessiert bist. Ich bastel halt niemandem die Lösungen vor, wie es hier gerade passiert. Ist nebenbei bemerkt auch ziemlich spooky, wenn man bedenkt, dass die helfende Person das Forum mal mit Pauken und Trompeten verlassen hat, weil er diese Lösungshilfe anderer Forenmitglieder verteufelt hat.

Aber was solls, jeder muss wissen, was er tut.

oli28 · 13. Januar 2019

Zitat von Arne Drews

Du hast Dich aber für einen Weg entschieden, von dem man Dich leider nicht abholen kann, wie es scheint. Das ist der einzige Grund, warum ich mein Beispiel nicht im Detail hier ausführe. Du reagierst in diesem Thread fast ausschließlich auf die Beiträge von Sempervivum, der Dir zwar sehr intensiv hilft, aber die Lösung aus meiner Sicht leider nicht gut ist.

Die Entscheidung meines Weges basiert nur auf der Tatsache, dass ich eine Chance habe das ganze am Schluss auf meiner Website zu verwenden.

Zitat von Arne Drews

Ich bastel halt niemandem die Lösungen vor, wie es hier gerade passiert. Ist nebenbei bemerkt auch ziemlich spooky, wenn man bedenkt, dass die helfende Person das Forum mal mit Pauken und Trompeten verlassen hat, weil er diese Lösungshilfe anderer Forenmitglieder verteufelt hat.

Das verstehe ich und respektiere Deine Sicht. Für persönliche Differenzen ist mein Thread jedoch vielleicht nicht der richtige Austragungsort..

Zitat von Sempervivum

Da dir eine dauerhafte Speicherung lieber wäre, habe ich es mal mit localStorage implementiert

Das funktioniert grossartig, zwar ist es nur auf der aktuelle Session basieren, bei einer Aktualisierung der Seite fällt die Sprache auf die Browsersprache zurück - ist dies Absicht?

Sempervivum · 13. Januar 2019

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?

oli28 · 14. Januar 2019

Zitat von Sempervivum

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?

Sorry, das war falscher Alarm oder vielleicht ein Problem mit meinem Browser. Es läuft alles - danke vielmals!

oli28 · 31. Januar 2019

Guten Morgen! Eine Frage tat sich die Tage noch auf, ein Teil des php-Teils im Head verursacht einen weissen Balken ganz oben auf der Website. Ich habe versucht herauszufinden welcher Teil es genau ist - der Code sieht aktuell so aus

PHP

<?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-at" => "de", "de-de" => "de", "de-li" => "de", "de-lu" => "de", "de-ch" => "de",
    "en" => "en", "en-au" => "en", "en-bz" => "en", "en-ca" => "en", "en-ie" => "en", "en-jm" => "en", "en-nz" => "en", "en-ph" => "en", "en-za" => "en", "en-tt" => "en", "en-gb" => "en", "en-us" => "en", "en-zw" => "en",
    "fr" => "fr", "fr-be" => "fr", "fr-ca" => "fr", "fr-fr" => "fr", "fr-lu" => "fr", "fr-mc" => "fr", "fr-ch"
);
$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[value='fr']:checked ~ *:not([class*='lang-fr'])[class*='lang-'] {display: none;}
    input[value='fr']:checked ~ * *:not([class*='lang-fr'])[class*='lang-'] {display: none;}
</style>

Alles anzeigen

Wenn ich diesen Teil entferne ist der Balken weg

Code

$displayed_languages = array_unique($available_languages);

Hast Du eine Idee wie der Balken ausgelöst werden könnte..?

Sempervivum · 31. Januar 2019

Aus der Variablen $displayed_languages werden die Inputs für die Sprachumschaltung generiert. Ich vermute stark, wenn Du diese Zeile löschst, funktioniert die ganze Umschaltung nicht mehr?

Um zu sehen, was den Balken verursacht, müsste man das HTML und das CSS sehen. Poste das doch mal bitte, d. h. nicht das PHP sondern das generierte HTML aus der Quelltextansicht des Browsers. Oder noch besser, die URL der Seite, falls Du sie online hast.

Tipp ins Blaue: Hast Du die Inputs vielleicht mit visibility: hidden; unsichtbar gemacht?

oli28 · 31. Januar 2019

Selbstverständlich, dann geht nix mehr. Es war nur für mich um herauszufinden ob ich irgendwo einen Fehler gemacht habe beim Include oder so..

Du findest die Website hier: [hidden]

Das Template ohne den lustigen Balken oben hier: https://html5up.net/uploads/demos/prologue/

Zitat

Tipp ins Blaue: Hast Du die Inputs vielleicht mit visibility: hidden; unsichtbar gemacht?

Nicht, dass ich wüsste

Ich habe es versucht es mit den Entwicklertools von Chrome zu identifizieren, damit kam ich jedoch nicht weiter.

Arne Drews · 31. Januar 2019

[id^="rdlang"] { display:none; }

oli28 · 31. Januar 2019

Zitat von Arne Drews

[id^="rdlang"] { display:none; }

Funktioniert perfekt, danke vielmals!

oli28 · 5. März 2019

Guten Morgen zusammen!

Ich stecke nochmals an einer Ecke fest, bei der Mobilversion lässt sich die Sprache nicht umschalten - bei der Desktopversion funktioniert es prächtig. Ich habe das Gefühl es hängt mit der aufpoppenden Navi zusammen, komme jedoch nicht dahinter. Ich habe den Code angehängt.

Hat jemand eine Idee?

Sempervivum · 5. März 2019

Mein Computer kann leider diese Datei nicht auspacken. Poste besser die URL der Seite.

oli28 · 5. März 2019

Aber gerne! url.domain

Sempervivum · 5. März 2019

Da wird durch das Skript in utils.js in Zeile 113 die Default-Aktion für den Klick unterdrückt. Deaktiviere das preventDefault() und es sollte funktionieren:

Code

$this._hide = function (event) {

            // Already hidden? Bail.
            if (!config.target.hasClass(config.visibleClass))
                return;

            // If an event was provided, cancel it.
            if (event) {

                // event.preventDefault(); // <== hier
                event.stopPropagation();

            }

Alles anzeigen

oli28 · 5. März 2019

Funktioniert perfekt..

HTML5 - Sprachwechsel (automatisch und per Tab)

Jetzt mitmachen!

Teilen