Change language with javascript

Saved searches

Use saved searches to filter your results more quickly

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.

Simple JavaScript localization for small websites

License

vgdevie/js-localization

This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Sign In Required

Please sign in to use Codespaces.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching Xcode

If nothing happens, download Xcode and try again.

Launching Visual Studio Code

Your codespace will open once ready.

There was a problem preparing your codespace, please try again.

Latest commit

Git stats

Files

Failed to load latest commit information.

README.md

Simple lighweight JavaScript localization for small websites.

Hi to everyone, here is my small js script writen once upon a evening. Maybe it will help someone, who don’t want to download big frameworks to localize a small website.

• Simple installation and usage
• Saving selected language
• No JQuery needed
• Lightweight (Just 500 bytes!)
• Language changes on-the-fly
• High Perfomance
• Supports 99% of browsers

Just add this code to your pages header.

script> var Localization=function(n)var t=n.split(",");this.CL="ru";this.CL=(navigator.language||navigator.userLanguage).slice(0,2);this.Changed=new Event("changed");this.SelectLanguage=function(n)var r,i,u;tryr=document.getElementById("loc");r!=null&&r.remove();i=document.createElement("style");i.id="loc";u=n+"";t.forEach(function(t)t!=n&&(u+=t+",")>);i.innerHTML=u.slice(0,-1)+"";document.head.appendChild(i);this.CL=n;localStorage.lang=n;document.dispatchEvent(this.Changed)>catch(f)this.SelectLanguage(t[0])>>;localStorage.lang==null?this.SelectLanguage(this.CL):this.SelectLanguage(localStorage.lang)>; var loc = new Localization("%LANGUAGES%"); /script>

Change %LANGUAGES% to languages you want to localize your website separated with coma. Use 2 chars lowercase language code (ISO 639-1), for example «en» for English language.

NOTE: Script will dedect user language and switch to it automaticaly if language localized.

Example for English and Russian languages:

script> var loc = new Localization("en,ru"); /script>

NOTE: In this example english is on first plase, so it will be primary language and will display when user request language that is not included.

Apply language tags to your texts.

Example for English and Russian languages:

button> en>Contact Meen> ru>Свяжитесь со мнойru> button>

NOTE: You can add as many languages as you want, just remember to initialize them at startup (step 1) for working properly.

Changling language manualy

If you want to change language manualy call method «SelectLanguage(«%LANGUAGE%»)».

Add select element to your page:

select id pl-s">ls" onchange pl-s">loc.SelectLanguage(this.options[this.selectedIndex].value)"> option value pl-s">en">Englishoption> option value pl-s">ru">Русскийoption> select>

NOTE: Remember to replace select options for your languages!

Then add this code after initialization(Usage.Step 1), for select element proper option to be selected when page loads.

document.getElementById("ls").value = loc.CL;

NOTE: You can bind «changed» event on localization object for your js.

Now you can switch language and all text will change at a moment!

> html> head> meta http-equiv pl-s">Content-Type" content pl-s">text/html; charset=utf-8"/> title>Sample pagetitle> meta charset pl-s">utf-8" /> head> body> header> select id pl-s">ls" onchange pl-s">loc.SelectLanguage(this.options[this.selectedIndex].value)"> option value pl-s">en">Englishoption> option value pl-s">ru">Русскийoption> select> script> var Localization=function(n)var t=n.split(",");this.CL="ru";this.CL=(navigator.language||navigator.userLanguage).slice(0,2);this.Changed=new Event("changed");this.SelectLanguage=function(n)var r,i,u;tryr=document.getElementById("loc");r!=null&&r.remove();i=document.createElement("style");i.id="loc";u=n+"";t.forEach(function(t)t!=n&&(u+=t+",")>);i.innerHTML=u.slice(0,-1)+"";document.head.appendChild(i);this.CL=n;localStorage.lang=n;document.dispatchEvent(this.Changed)>catch(f)this.SelectLanguage(t[0])>>;localStorage.lang==null?this.SelectLanguage(this.CL):this.SelectLanguage(localStorage.lang)>; var loc = new Localization("en,ru"); document.getElementById("ls").value = loc.CL; script> header> content> h1> en>Halloweenen> ru>Хеллоуинru> h1> p> en>Halloween or Hallowe'en (a contraction of All Hallows' Evening), also known as Allhalloween, All Hallows' Eve, or All Saints' Eve, is a celebration observed in a number of countries on 31 October, the eve of the Western Christian feast of All Hallows' Day. en> ru>Хе́ллоуи́н (также Хэ́ллоуи́н) (англ. Halloween, All Hallows' Eve или All Saints' Eve) — современный праздник, восходящий к традициям древних кельтов Ирландии и Шотландии, история которого началась на территории современных Великобритании и Северной Ирландии. ru> p> button onclick pl-s">alert('boo');"> en>Scare someoneen> ru>Напугать кого-тоru> button> content> body> html>

Copyright (c) Vyacheslav Chukhno (http://vgdev.pro)

Please use it, and contribute changes.

Источник

How to switch the language of the page using JavaScript?

Whenever you develop a website or application for a worldwide business, you must also focus on which language your audience can understand. For example, English is an international language, but in some parts of the world, people don’t understand English as they speak German, Spanish etc.

However, if you have observed, then some websites provide the option to change the website’s language. You just need to click on the button, which changes the whole website’s language. Have you ever thought about how it is possible?

Here, we will learn to switch the language of the web page using JavaScript.

Syntax

Users should follow the syntax below to change the language of the web page using JavaScript.

if (lang == «en») < element.innerHTML = "content"; >else if (lang == «fr») < element.innerHTML = "content"; >else if (lang == «de»)

In the above syntax, we have written the if-else statement to change the content of the web page according to the language selected. Users need to replace the content with the content of a particular language.

Example 1

In the example below, we added some div element content. Whenever users press any button to change the web page’s language, we invoke the changeLanguage() function by passing the language as a parameter. In the changeLanguage() function, we access the div element and change its content according to the language selected.

  
Switching the language of web page using JavaScript
 
Hi How are you! This is written in English.
 
 
 English French German 
    

Example 2

We have created a web page with multiple elements in the example below. Also, we have given the unique id to every element. In JavaScript, we have created the object named ‘languageContent’. In the object, we have stored the language as a key and the content as a value. In the content object, we have used the element id as a key and its content in a particular language as a value.

In the switchLang() function, we access the content of a particular language from the languageContent object and replace the content of all elements on the web page.

  
Switching the language of web page using JavaScript
 
This is a sample content
 
English
 
TutorialsPoint
 
JavaScript
 
 English French German 
    

Users learned to switch the language of a web page using JavaScript. In the first example, we have given a demo of how we can switch between multiple languages.

We can use the second example for the real-time website. Developers need to create a JSON file to store the content rather than in the same files, as real-time apps can have lots of content. After that, they can use for loop to iterate through all elements of the JSON file and update the content of the webpage.

Источник