While conducting research, I came across several options for creating multilingual websites. After implementing one method (jQuery), I noticed some slowness in translation and processing the information. Additionally, it only partially worked in the normal Chrome browser but worked fine in CodePen.
Here is the code I used:
var arrLang = {
"hebrew": {
"about": "עלינו",
"poject": "פרוייקטים",
"service": "שירותים",
"contact": "צור קשר",
},
"english": {
"about": "About",
"poject": "Projects",
"service": "Services",
"contact": "Get In Touch",
}
};
// The default language is English
var lang = "hebrew";
// Check for localStorage support
if('localStorage' in window){
var usrLang = localStorage.getItem('uiLang');
if(usrLang) {
lang = usrLang
}
}
console.log(lang);
$(document).ready(function() {
$(".lang").each(function(index, element) {
$(this).text(arrLang[lang][$(this).attr("key")]);
});
});
// get/set the selected language
$(".translate").click(function() {
var lang = $(this).attr("id");
// update localStorage key
if('localStorage' in window){
localStorage.setItem('uiLang', lang);
console.log( localStorage.getItem('uiLang') );
}
$(".lang").each(function(index, element) {
$(this).text(arrLang[lang][$(this).attr("key")]);
});
});
This is the current result:
https://i.sstatic.net/fFLX4.png
When I click the English button to translate the content, it remains unchanged.
Here is the HTML:
<ul>
<li><a href="#title" class="lang" key="about">About</a></li>
<li><a href="#section1">Projects</a></li>
<li><a href="#section2">Services</a></li>
<li><a href="#section3">Get in Touch</a></li>
<li><a href="#" class="translate" id="english">English</a>|<a href="#" class="translate" id="hebrew">עברית</a></li>
</ul>
The same code has also been uploaded to CodePen where it seems to be working fine.
How can I troubleshoot the translation issue that is occurring on local Chrome?