Language change JavaScript

azcn2503 · Tue Jan 04, 2011 10:03 am

Hey guys

I was experimenting with a language selection script similar to my 100% JavaScript navigation scheme script. This one is a little different though.

It scans through the entire document looking for different language layers. It then hides/displays the language layers depending on what language you selected. It also remembers the setting so that the next time you load up the page it shows in that language.

It currently requires that all languages that are selectable have language layers present in the document, otherwise you'll have nothing showing on screen for certain things... This makes sense though. A workaround is to make the English language separate from the language layers so that it never hides itself.

Here is the code:

Code:

function setCookie(n,v,e){
    var exDate=new Date();
    exDate.setDate(exDate.getDate()+e);
    document.cookie=n+"="+escape(v)+((e==null)?"":";expires="+exDate.toUTCString());
}

function getCookie(n){
    if(document.cookie.length>0){
        cs=document.cookie.indexOf(n+"=");
        if(cs!=-1){
            cs=cs+n.length+1;
            ce=document.cookie.indexOf(";",cs);
            ce=ce==-1?document.cookie.length:ce;
            return unescape(document.cookie.substring(cs,ce));
        }
    }
    return "";
}

var defaultLang=getCookie("lang");
if(defaultLang==null||defaultLang==""){
    defaultLang="en";
}

function changeLanguage(lang){
    var langDivs=document.getElementsByTagName("div");
    for(i in langDivs){
        if(langDivs[i].className){
            if(langDivs[i].className.indexOf("lang_")>=0){
                var divClass=langDivs[i].className.split("_");
                langDivs[i].className=divClass[1]==lang?divClass[0]+"_"+divClass[1]+"_active":divClass[0]+"_"+divClass[1]+"_default";
            }
        }
    }
    setCookie("lang",lang,365);
}

You basically just pop a link in the document to change the language, like this:

Code:

<a href="javascript:changeLanguage('pl');" title="Polish"><img src="img/world/pl.png" alt="Polish" /></a>

This link, for example, will scan through the document looking for every div tag with a class name containing "lang_pl_whatever" and make it "lang_pl_active", and every other "lang" class a "default" so "lang_en_default" and "lang_lt_default" for example.

Pretty cool. I thought it would take a long time to scan the document analysing the class names but this method is lightning fast in all browsers including IE.

Si · Tue Jan 04, 2011 10:31 am

I'd have thought an AJAX "give me this items contents in <LANG> would have been quicker and easier, especially under a lot of languages. Doesn't the method you use add a lot of unnecessary overhead in terms of bandwidth?

azcn2503 · Tue Jan 04, 2011 11:28 am

The AJAX would be more complicated but it would reduce the overhead since the above method requires that you put all languages in one document.

Update: The reason it would be a little more complicated is because the AJAX'd source files would require an ID of some sort, or an indicator to say that it is linked to that particular section/document in some way. The above method is ID-less.

Update 2: You'll need these in your CSS for it to work lol... silly me...

Code:

/* language hiders */
.lang_en_active,.lang_pl_active,.lang_lt_active{ display:block; }
.lang_en_default,.lang_pl_default,.lang_lt_default{ display:none; }

And for any other language you add.

Possibly worth noting that you'll need to call changeLanguage(defaultLang) in order for the site to use the default language as intended using the setting from the cookie. I have this called in my onload script on that site.

azcn2503 · Tue Jan 04, 2011 2:28 pm

Also...

This script doesn't magically change the language of your content... you have to do that yourself. LOL.

azcn2503 · Wed Jan 05, 2011 8:00 am

Looks like the only way to reduce overhead and keep coolness factor is to create some kind of a language template system. It's pretty easy but it means redesigning a little. It also becomes server side so... I'll make a new topic if I ever get around to doing it. Which I will, because I'll use this on my own site eventually.

Update: Not server side.

Language change JavaScript

Who is online