Bilingual site with JS

Question

Bilingual site with JS

Asked 9 years, 8 months ago

Viewed 152 times

3

I had to put a bilingual site and found this script below, which by the way helped a lot, but it always shows the two versions "BR" "ENG" before "hide" one of them. Even by changing the order of events he continues to show both languages. I’m missing something, but I’m not getting it. Someone has a light?

This is the code:

<script type="text/javascript">
        function createCookie(name, value, days) {
            if (days) {
                var date = new Date();
                date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
                var expires = "; expires=" + date.toGMTString();
            }
            else
                expires = "";
            document.cookie = name + "=" + value + expires + "; path=/";
        }
        function readCookie(name) {
            var nameEQ = name + "=";
            var ca = document.cookie.split(';');
            for (var i = 0; i < ca.length; i++) {
                var c = ca[i];
                while (c.charAt(0) === ' ')
                    c = c.substring(1, c.length);
                if (c.indexOf(nameEQ) === 0)
                    return c.substring(nameEQ.length, c.length);
            }
            return null;
        }
        function language(lang_on, lang_off) {
            createCookie("langue_on", lang_on, 365);
            createCookie("langue_off", lang_off, 365);
            for (var i = 0; i < document.getElementsByTagName("div").length; i++) {
                if (document.getElementsByTagName("div")[i].lang === lang_on) {
                    document.getElementsByTagName("div")[i].style.display = "block";
                }
                if (document.getElementsByTagName("div")[i].lang === lang_off) {
                    document.getElementsByTagName("div")[i].style.display = "none";
                }
            }
        }
        function startlanguage() {
            var notdefined;
            var lang_on = readCookie("langue_on");
            var lang_off = readCookie("langue_off");
            if (lang_on === notdefined) {
                lang_on = "pt";
            }
            if (lang_off === notdefined) {
                lang_off = "en";
            }
            language(lang_on, lang_off);
        }
        window.onload = function () {
            startlanguage();
        };
    </script>

I call it that:

<div lang="en">ENGLISH!</div>
<div lang="pt">PORTUGA!</div>

This happens because it only properly executes the code in the event onload. Try to remove the call startlanguage of the event onload, but it may not work due to some element that has not yet been fully loaded by the browser at the time of code execution.

– Vinícius Gobbo A. de Oliveira

2015/02/19 at 18:23
When removing "startlanguage" from the function, it stops hiding the secondary language.

– Bruno Martins

2015/02/19 at 18:39
I see that you are using cookies, I believe that the visibility of the div with the language can be set already in the server-side. Another alternative is to leave the two with display: none, then make one of the two visible in the onload

– Tobias Mesquita

2015/02/19 at 19:09
Does not solve, it takes the same action when removing startlanguage.

– Bruno Martins

2015/02/19 at 22:34
If the script is being loaded at the end of the body it will only be executed after the body is loaded, in this case it would be interesting to leave the script in the head along with the styles. This would force the script to run before any part of the site was rendered. You can externalize script to a file and upload it to the head.

– ooredroxoo

2015/02/19 at 23:10
In both cases the script loads the two languages. Bad thing’s fault.

– Bruno Martins

2015/02/20 at 12:02

Show 1 more comment

2 answers

Browser other questions tagged javascript html

You are not signed in. Login or sign up in order to post.

by Matheus Cristian • **1,045** points · Answer 1 · 2015-02-20T03:05:06+00:00

1

I created a function for you that is: http://jsfiddle.net/3ywm7Lyq/

Instead of using cookie I used localStorage, you can change the default language value in line 2 of the javascript code....

Put a button to give a localStorage.clear() then visualize their code.

– Renan Gomes

2015/02/20 at 03:19
Pq delete if the localstorage reason and precisely to store the language for when to return to the site....

– Matheus Cristian

2015/02/20 at 03:32
Simple: Because it is an example, there is no need to keep information that will not be useful saved in Jsfiddle (and whenever any user access the link this will be done). An example is different from a real application, so I suggested you put a button to clear this information after viewing the code.

– Renan Gomes

2015/02/20 at 03:39
The reduction of the code was perfect @Renan, but it’s the same as the previous code, it loads the two languages, and from what I understand in the code, if the page changes (from Home to Who we are) it returns to 'en' right?

– Bruno Martins

2015/02/20 at 12:33

by Vitor Arbex • **252** points · Answer 2 · 2015-04-21T14:20:16+00:00

Bilingual site with JS?

Just one comment, The title of the question was perfect but its description induces the answers to fix the code posted, and not propose the most correct solution that would adopt an established standard.

Responding, I believe that the ideal thing for you is to use the L10n standard, and there are well-established Javascript libraries that support L10n. For example the l10n.js (Which is used for Firefoxos location).

This way you don’t need to break your head creating a new structure for each language, you will only need to create a JSON properties file with the keys of the strings and their respective value in each supported language.