This is very interesting question. I have read several articles for this question, and most articles tell about ways where we need refresh page to apply another localization. Yes, this is possible of course, but not too user friendly. Just imagine that your website will able to switch language like desctop applications, great, isn`t it? So, that this still possible using ordinary javascript. I will using jQuery to better comfort.
Here are samples and downloadable package:
[sociallocker]
[/sociallocker]
Ok, download the source files and lets start coding !
Step 1. XHTML
Here are our main HTML file:
index.html
04 |
< title >How to Translate your Site in Runtime using Jquery - demo</ title > |
05 |
< link rel = "stylesheet" href = "css/main.css" type = "text/css" /> |
06 |
< script src = "js/jquery.min.js" ></ script > |
07 |
< script src = "js/main.js" ></ script > |
11 |
< h3 >< a href = "#" >How to Translate your Site in Runtime using Jquery - demo</ a ></ h3 > |
13 |
< div class = "lang_switcher" > |
14 |
< button id = "en" class = "lang" >EN</ button > |
15 |
< button id = "ru" class = "lang" >RU</ button > |
17 |
< div style = "clear:both;" ></ div > |
20 |
< li >< a href = "#nogo" key = "home" class = "tr" >Home</ a ></ li > |
21 |
< li >< a href = "#nogo" key = "peoples" class = "tr" >Peoples >></ a > |
23 |
< li >< a href = "#nogo" key = "all_list" class = "tr" >All list</ a ></ li > |
24 |
< li >< a href = "#nogo" key = "online" class = "tr" >Online</ a ></ li > |
27 |
< li >< a href = "#nogo" key = "articles" class = "tr" >Articles >></ a > |
29 |
< li >< a href = "#nogo" key = "js" class = "tr" >JavaScript</ a ></ li > |
30 |
< li >< a href = "#nogo" key = "php" class = "tr" >PHP</ a ></ li > |
31 |
< li >< a href = "#nogo" key = "html" class = "tr" >HTML</ a ></ li > |
32 |
< li >< a href = "#nogo" key = "css" class = "tr" >CSS</ a ></ li > |
35 |
< li >< a href = "#nogo" key = "contact_us" class = "tr" >Contact us</ a ></ li > |
38 |
< div style = "clear:both;" ></ div > |
39 |
< h2 key = "welcome" class = "tr" >Welcome guests</ h2 > |
41 |
< div >A man bribes a rabbit with wicked dentures to run away with him in a sailboat via an ambulance. Bribing Koalas to remain illegally in one place. Trees anchor me in place. / Your mom drives the ambulance, but the city is farther than it appears.</ div > |
As you know, for localization we should use keys and values (translated strings to different languages). As you noticed, I just store key name inside required element, plus mark, that this element translatable. Here are sample: <h2 key=”welcome” class=”tr”> – mean that I using key ‘welcome’ for following translation.
Step 2. CSS
Here are used CSS file.
css/main.css
01 |
body{ background : #eee ; font-family : Verdana , Helvetica , Arial , sans-serif ; margin : 0 ; padding : 0 } |
02 |
.example{ background : #FFF ; width : 500px ; height : 500px ; font-size : 80% ; border : 1px #000 solid ; margin : 0.5em 10% 0.5em ; padding : 1em 2em 2em ;-moz-border-radius: 3px ;-webkit-border-radius: 3px } |
03 |
.lang_switcher{ float : right ; overflow : hidden ;} |
05 |
#nav,#nav ul{ list-style : none ; font : 10px verdana , sans-serif ; border : 1px solid #000 ; background : #fff ; position : relative ; z-index : 200 ; border-color : #eca #b97 #a86 #edb ; border-width : 1px 2px 2px 1px ; margin : 0 ; padding : 0 0 5px } |
06 |
#nav{ height : 25px ; padding : 0 } |
07 |
#nav table{ border-collapse : collapse } |
08 |
#nav li{ float : left ; padding : 0 20px 0 10px } |
09 |
#nav li li{ float : none } |
10 |
#nav li a li{ float : left } |
11 |
#nav li a{ display : block ; float : left ; color : #888 ; height : 25px ; padding-right : 5px ; line-height : 25px ; text-decoration : none ; white-space : nowrap } |
12 |
#nav li li a{ height : 20px ; line-height : 20px ; float : none } |
13 |
#nav li:hover{ position : relative ; z-index : 300 ; background : #fff } |
14 |
#nav a:hover{ position : relative ; z-index : 300 ; text-decoration : underline ; color : #b75 } |
15 |
#nav :hover ul{ left : 0 ; top : 22px } |
16 |
#nav a:hover ul{ left : -10px } |
17 |
#nav li:hover li:hover > ul{ left : -15px ; margin-left : 100% ; top : -1px } |
18 |
#nav li:hover > ul ul{ position : absolute ; left : -9999px ; top : -9999px ; width : auto } |
19 |
#nav li:hover > a{ text-decoration : underline ; color : #b75 } |
20 |
#nav a:hover a:hover ul,#nav a:hover a:hover a:hover ul,#nav a:hover a:hover a:hover a:hover ul,#nav a:hover a:hover a:hover a:hover a:hover ul{ left : 100% ; top : -1px } |
21 |
#nav ul,#nav a:hover ul ul,#nav a:hover a:hover ul ul,#nav a:hover a:hover a:hover ul ul,#nav a:hover a:hover a:hover a:hover ul ul{ position : absolute ; left : -9999px ; top : -9999px } |
Step 3. JS
Here are used JS files.
js/jquery.min.js and js/main.js
First file – just jQuery library (available in package), source of second file here:
02 |
var aLangKeys= new Array(); |
03 |
aLangKeys[ 'en' ]= new Array(); |
04 |
aLangKeys[ 'ru' ]= new Array(); |
05 |
aLangKeys[ 'en' ][ 'home' ]= 'Home' ; |
06 |
aLangKeys[ 'en' ][ 'peoples' ]= 'Peoples >>' ; |
07 |
aLangKeys[ 'en' ][ 'all_list' ]= 'All list' ; |
08 |
aLangKeys[ 'en' ][ 'online' ]= 'Online' ; |
09 |
aLangKeys[ 'en' ][ 'articles' ]= 'Articles >>' ; |
10 |
aLangKeys[ 'en' ][ 'js' ]= 'JavaScript' ; |
11 |
aLangKeys[ 'en' ][ 'php' ]= 'PHP' ; |
12 |
aLangKeys[ 'en' ][ 'html' ]= 'HTML' ; |
13 |
aLangKeys[ 'en' ][ 'css' ]= 'CSS' ; |
14 |
aLangKeys[ 'en' ][ 'contact_us' ]= 'Contact us' ; |
15 |
aLangKeys[ 'en' ][ 'welcome' ]= 'Welcome guests' ; |
16 |
aLangKeys[ 'ru' ][ 'home' ]= '???????' ; |
17 |
aLangKeys[ 'ru' ][ 'peoples' ]= '???????????? >>' ; |
18 |
aLangKeys[ 'ru' ][ 'all_list' ]= '???? ??????' ; |
19 |
aLangKeys[ 'ru' ][ 'online' ]= '? ????' ; |
20 |
aLangKeys[ 'ru' ][ 'articles' ]= '?????? >>' ; |
21 |
aLangKeys[ 'ru' ][ 'js' ]= '?????????' ; |
22 |
aLangKeys[ 'ru' ][ 'php' ]= '???' ; |
23 |
aLangKeys[ 'ru' ][ 'html' ]= '????' ; |
24 |
aLangKeys[ 'ru' ][ 'css' ]= '???' ; |
25 |
aLangKeys[ 'ru' ][ 'contact_us' ]= '???????? ???' ; |
26 |
aLangKeys[ 'ru' ][ 'welcome' ]= '????? ??????????' ; |
27 |
$(document).ready( function () { |
29 |
$( '.lang' ).click( function () { |
30 |
var lang = $( this ).attr( 'id' ); |
32 |
$( '.tr' ).each( function (i){ |
33 |
$( this ).text(aLangKeys[lang][ $( this ).attr( 'key' ) ]); |
Here are most interesting part. Firstly I allocate my language array with keys and values. Currently it contain only 2 languages. But if you know more languages – you will easy to make more translations. So what I doing when I click button to switch language – running through all elements which marked as translatable (‘tr’ class), and apply custom value from our lang keys array depends on selected switcher value.
Conclusion
I hope that today’s article was very interesting and not so difficult. Sure it will useful for your projects. Do not forget to say thank you 🙂 Good luck!