CODEWITHSUNDEEP
javascripthtmllocalization
Scott Chandler
Scott Chandler

Reputation: 299

Display specific divs or content based on browser language?

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

Upvotes: 3

Views: 12979

Answers (3)

mu is too short
mu is too short

Reputation: 434795

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.

Upvotes: 6

Brett Pontarelli
Brett Pontarelli

Reputation: 1728

Start with this:

var userLang = (navigator.language) ? navigator.language : navigator.userLanguage;
userLang = substr(1,2);

Then set <body class="userLang">, which I leave up to you as I don't want to assume you are using a specific javascript library or framework. Next up you can use CSS to show, hide, or do what ever you want on you divs. For example if fr is your default:

#footer_fr { display: block; }
#footer_pt { display: none; }
#footer_en { display: none; }
body.pt #footer_en { display: none; }
body.pt #footer_fr { display: none; }
body.pt #footer_pt { display: block; }

I'm not sure the above is perfect CSS, but you get the idea.

Upvotes: 2

user268396
user268396

Reputation: 11996

Combine the CSS :lang() selector: http://www.w3.org/TR/CSS2/selector.html#lang (nevermind that it is the CSS2 rec and not CSS3, the :lang() selector remains the same) with dynamic loading of CSS or DOM manipulation.

Upvotes: -1

Related Questions