jQuery browser language detection

Question

Scenario

I'm in need to create a page (client-side only) that detects what language the browser is using and displays the appropriate class element relating to that language, and hides the others.

English would be the default language, so if none of the cells in the array are matched, this would be displayed.

I'm using the navigator.language and navigator.userLanguage (IE) value to detect which language the browser is currently using.

I currently have some code that's in progress, but i'm not sure of the best way to incorporate all the potential possibilities and then select them using an array.

There's also the possibility of more than one language being tied with a country. Say for instance English as an example has en-us, en-uk etc.. How would I tie this in?

Code

HTML

<ul class="text">
    <li class="en active">English: Some text in english</li>
    <li class="fr">French: Some text in french</li>
    <li class="de">German: Some text in german</li>
    <li class="it">Italian: Some text in italian</li>
    <li class="ja">Japanese: Some text in japanese</li>
    <li class="es">Spanish: Some text in spanish</li>
</ul>

JS (WIP)

var userLang = navigator.language || navigator.userLanguage,
    countries = ['fr', 'de', 'it', 'ja', 'es'],
    languagues = ['fr', 'de', 'it', 'ja', 'es'];

if (userLang === "fr") {
    $('li').removeClass('active');
    $('.fr').addClass('active');
}

Example

Fiddle

Thank you for your time.

UPDATE

To provide the full solution that worked for me and to ultimately help future users, I used the same layout of HTML from above and combined it with putvande's jQuery solution.

Here is a working example.

NOTE: This effect triggers the changes depending on the language selected for the browser. As an example on how to do this in Google Chrome:

Go to the settings ->
Scroll down to and click "Show advanced settings..." ->
Click "Language and input settings..." ->
Then select you're desired language, click done and restart your browser.

I hope this helps.

Unusual to have internationalisation done on the client side. Presumably there's a need for that rather than server-side? — Orbling
– Orbling, Commented Aug 19, 2013 at 15:22
Can you not get a language set loaded on demand, via AJAX or some such? Having all translations in situ will need to be done much as you have it, which will be painful with some element types. You could probably just use .show() rather than worrying about an active class on any element other than the selector. — Orbling
– Orbling, Commented Aug 19, 2013 at 15:40

putvande · Accepted Answer · 2013-08-19 15:36:11Z

28

You can split the navigator.language into two and only use the first parameter (the language) and use that to select the li that has that class:

var userLang = navigator.language || navigator.userLanguage;

// Check if the li for the browsers language is available
// and set active if it is available
if($('.' + userLang.split('-')[0]).length) {
    $('li').removeClass('active');
    $('.' + userLang.split('-')[0]).addClass('active');
}

Or are you also going to be changing the li according to the country (for example US and UK english)?

edited Aug 19, 2013 at 15:36

answered Aug 19, 2013 at 15:26

putvande

15.3k3 gold badges37 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Gianpaolo Di Nino Over a year ago

nice start.. but i suggest to check if the language exists.

user1854856 Over a year ago

@GianpaoloDiNino Why? navigator.language should not be used according to the MDN. It does not reflect the true locale settings but instead the language of the used browsers in older browser versions. This has changed nowadays, but for compatibility reasons, it should be used as last option.

Gianpaolo Di Nino Over a year ago

@StanE 3 years old answer :D

user1854856 Over a year ago

@GianpaoloDiNino So what? I don't really understand why people have such enormous problems with old topics nowadays. Is there a reason why so many people have an aversion against this? If one can write something helpful or at least a hint, then I see no problem with that.

Daniel Over a year ago

@StanE Totally agree. The question has already 30k views and detecting localization isn't a problem that has gone away. You can improve the question by yourself using the "edit" button so that it's still relevant for todays standards :)

Collectives™ on Stack Overflow

jQuery browser language detection

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related