Menu
Currently I am working on web app that will support several languages. Therefore I prepared table in my database with translations. However, I am not sure how to populate web app with translations. The easiest way, in my opinion, is to put reference to appropriate translation in each element of the page. This would work great in PHP I don't know how to make it work in js or JQuery.
What I would like to have is the reference to array in divs like this:
<div> {translation_array['login']} </div>
So that the div would "take" value from translation_array, but I lack the knowledge to do it. Is it possible to make it work this way?
If not, I would appreciate advices on how to make multilanguage web in js.
thanks
494
To change the language, just simply set the lang attribute. We can define it anywhere in the document, such as in the body, in the paragraph, in the heading, or in the span tag. But the best practice is to set the lang in the span tag.
Reaching a larger audience First and foremost, a multi-language website will help you expand your reach and make contact with a much wider audience. With only 25% of internet users being native English speakers, it's high time to start catering to the other 75% and being sensitive to their needs.
Use on every piece of text you want to change according to the language a span HTML tag because you can embed inline on every piece of HTML (contrary to div or p which have a display:block by default). Then for each span use a class with a name starting with a certain pattern, for example:
<span class="lang-text1"></span>
Then using jQuery's function .each change every span tag that matches the pattern lang in its class name, according to the selected language.
I put also here a simple example for you to check.
var LanguageList = {
"EN" : "English",
"ES" : "Español",
"PT" : "Português"
};
//languages Objects
var WORDS_EN = {
"text1" : "text One",
"text2" : "text Two"
};
var WORDS_ES = {
"text1" : "texto Un",
"text2" : "texto Dos"
};
var WORDS_PT = {
"text1" : "texto Um",
"text2" : "texto Dois"
};
window.onload = initialize;
function initialize() {
var $dropdown = $("#country_select");
$.each(LanguageList, function(key, value) {
$dropdown.
append($("<option/>").
val(key).
text(value));
});
loadsLanguage("EN");
}
function loadsLanguage(lang){
/*fills all the span tags with class=lang pattern*/
$('span[class^="lang"]').each(function(){
var LangVar = (this.className).replace('lang-','');
var Text = window["WORDS_"+lang][LangVar];
$(this).text(Text);
});
}div{
margin: 15px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="country_select" onchange="loadsLanguage(this.value);">
</select>
<div>
<span class="lang-text1"></span>
</div>
<div>
<span class="lang-text2"></span>
</div>
<div>
<span class="lang-text2"></span>/<span class="lang-text2"></span>
</div>Below is a very simple example using jquery and json:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
let arrLang = {
en: {
'home' : 'Home',
'about' : 'About Us',
'contact' : 'Contact US'
},
es: {
'home' : 'casa',
'about' : 'sobre nosotros',
'contact' : 'Contáctenos'
}
}
$(function() {
let lang =localStorage.getItem('language');
changeLanguage(lang);
$('.translate').click(function(){
lang = $(this).attr('id');
localStorage.setItem('language', lang);
changeLanguage(lang);
});
function changeLanguage(lang){
$('.lang').each(function(index,element){
$(this).text(arrLang[lang][$(this).attr('key')]);
});
}
})
</script>
</head>
<body>
<button class="translate" id="en">English</button>
<button class="translate" id="es">Spanish</button>
<ul>
<li class="lang" key="home"> Home </li>
<li class="lang" key="about"> About Us </li>
<li class="lang" key="contact"> Contact Us </li>
</ul>
</body>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With