Display specific divs or content based on browser language?

Question

I'm creating a pretty simple site of maybe 4 pages, that I want to be available in English, French, and Portuguese.

Is there a way, with javascript, to detect the browsers language, then only display certain divs that correspond to their language?

For example, if their language is French, instead of showing <div id="footer_en"> it will use <div id="footer_fr">?

Answer 1

The usual approach is to keep the languages separate (one HTML file per language for example) and send the content back in the language they want. You could try to parse the Accept-Language header and send back the closest match; you'd probably want to include a language selection widget of some sort as well.

If you really want to do this on the client with JavaScript then you should:

• Set the lang attribute on each piece of content (or wrapper `s).
• Grab the language from navigator.languages, navigator.language, or navigator.userLanguage (check them all, languages is the latest, language should be everywhere, and userLanguage is AFAIK for older IEs) and have a suitable default in hand just in case.
• Then show everything whose lang matches the language and hide everything whose lang doesn't match.

For example, if you have this HTML:

<div lang="en" class="wrapper">
    <h1>English</h1>
    <p>Here is some English content.</p>
</div>
<div lang="fr" class="wrapper" style="display: none;">
    <h1>Française</h1>
    <p>Voici le contenu en français.</p>
</div>
<div lang="pt" class="wrapper" style="display: none;">
    <h1>Português</h1>
    <p>Aqui você encontra o conteúdo Português.</p>
</div>

And then some JavaScript (I'll use jQuery as that's my weapon choice):

$(document).ready(function() {
    var known = { en: true, fr: true, pt: true };
    var lang  = ((navigator.languages && navigator.languages[0]) || navigator.language || navigator.userLanguage || 'en').substr(0, 2);
    if(!known[lang])
        lang = 'en';
    // Find all <div>s with a class of "wrapper" and lang attribute equal to `lang`
    // and make them visibile.
    $('div.wrapper[lang='  + lang + ']').show();
    // Find all <div>s with a class of "wrapper" and lang attribute not equal
    // to `lang` and make them invisibile.
    $('div.wrapper[lang!=' + lang + ']').hide();
});

Here's a live example: http://jsfiddle.net/ambiguous/kwcfL67a/

If you keep the show/hide logic in a separate function that takes a language argument then it would be pretty easy to provide a language selection widget of some sort too.

You could also use a class for the language if that's easier to work with using your JavaScript tools but leaving the lang attribute around would be a good idea.

---

Thanks to coliff for the navigator.languages update that recent versions of Chrome seem to need.