Toggle visibility of div tags based on browser language
First, I'm a PM and the development team is already mad at me. So I would like to take a shot by creating a solution to the question below.
We have a static maintenance html page that displays "Please come back soon" in 24 languages. Right now we are showing all 24 translations at once, and the page is pretty ugly.
I wrapped each translation in its 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 want to use javascript to detect the browser language and detect visibility: visible; for a div corresponding to the browser language. And set all other div tags to visibility: hidden;
Look for help detecting the browser language and removing the locale (if provided), so I have a 2 character value to use in a complex switch.
a source to share
My solution would be to use the Accept-Language header in the HTTP request to find the preferred custom language and then just return a single DIV in the correct language. This way you don't have to worry about hiding the div. Also, if you hide the divs they will all be shown first and then only set to hidden after Javascript executes so it won't be as good from the user experience.
a source to share
First, it looks like a server side solution, not a client side. However, a quick search did this snippet:
var userLang = (navigator.language) ? navigator.language : navigator.userLanguage;
alert ("The language is: " + userLang);
on this page .
So, if you really have to do this on the client, this might help.
a source to share
First, you shouldn't wrap the div, you should just put the attribute directly on the tag. Second, if you are in HTML you can use the languages attribute, and if you are in XHTML you can use XML: The lang attribute ... is much more descriptive than "identifier". Finally, it is probably best to do server side processing if you can, using Accept-Language
a source to share