Toggle visibility of div tags based on Browser Language

Question

First off, I'm a PM and the dev team is already mad at me. So I'd like to take a shot creating the solution to the question below.

We have a static maintenance mode html page that displays "Please check back soon" in 24 languages. Right now we are displaying all 24 translations at once and the page is pretty ugly.

I've wrapped each translation into it's own div tag like this:

<div id="en">
  <p>Please check back soon</p>
</div>
<div id="es">
  <p>Compruebe por favor más adelante</p>
</div>
...

I'm looking to use javascript to detect the browser language and set visibility:visible; for the div that corresponds to the browser language. And set all the other div tags to visibility:hidden;

Looking for help with detecting browser language and stripping out locale (if provided) so I have a 2 character value to use in a complex switch.

Answer 1

My solution would be to use the Accept-Language header in the HTTP request to find the user's preferred language and then just return one div in the correct language. This way you don't have to worry about hiding divs. Also, if you hide divs they will all be displayed initially and then only set to hidden after the Javascript executes so it won't be as good of a user experience.

Please see: http://www.w3.org/Protocols/rfc2616/rfc2616-sec14.html

Answer 2

First, this seems to be a server side solution rather than a client side solution. However, a quick search did turn up this snippet:

var userLang = (navigator.language) ? navigator.language : navigator.userLanguage;
alert ("The language is: " + userLang);

on this page.

So if you really must do it on the client then this might help.

Answer 3

First off, you shouldn't wrap in a div, you should just put the attribute directly on the tag. Secondly, if you're in HTML you can use the lang attribute, and if you're in XHTML you can use the xml:lang attribute... this is much more descriptive than "id". Finally, it's probably best to do the processing server-side if you can, using Accept-Language