Create Your Frontend Website In Multiple Languages | Javascript Langauge Selector

Javascript Langauge Selector is to create your own front-end website in multiple languages with this category. A very small and fast plugin that relies on jQuery for language identification allows users to switch between languages on your site and store user language preferences in local storage.

In addition, the plugin automatically changes the text direction to RTL (right to left) when selecting a right-to-left language (Arabic, Hebrew, Farsi, Urdu, etc.).

multi language jquery plugin, change website language using jquery, jquery multi language, language switcher jquery plugin, language switcher jquery codepen

Features:

Simple yet powerful.
Enable RTL automatically.
Very fast.
Much more…

How to make use of it:

1. Include the minified model of the jQuery Langauge Selector plugin on the web page.

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/js/LanguageSelector.min.js"></script>

2. Create your translations as proven below.

// language.js
lang = {
  'en': {
    ':heading': 'Javascript Language Selector',
    ':h2': 'This is the sub heading',
    ':first:p': "Hey! this is the javascript language selector",
    ':english': 'English',
    ':urdu': 'Urdu',
    ':portuguese': 'Portuguese',
    ':choose': 'Choose the language',
  },

  'ur': {
    ':heading': 'جاوا اسکرپٹ زبان سلیکٹر',
    ':h2': 'یہ سب عنوان ہے۔',
    ':first:p': "ارے! یہ جاوا اسکرپٹ کی زبان کا سلیکٹر ہے۔",
    ':english': 'انگریزی',
    ':urdu': 'اردو',
    ':portuguese': 'پرتگالی',
    ':choose': 'زبان کا انتخاب کریں۔'
  },
  'pt': {
    ':heading': 'Seletor de Idiomas Javascript',
    ':h2': 'Este é o subtítulo',
    ':first:p': "Ei! este é o seletor de idioma javascript",
    ':english': 'English',
    ':urdu': 'Urdu',
    ':portuguese': 'Portuguese',
    ':choose': 'Escolha o idioma'
  }
};

3. Create a choose box for the language selector.

<select id="langSelector">
  <option>:choose</option>
  <option value="en">:english</option>
  <option value="ur">:urdu</option>
  <option value="pt">:portuguese</option>
</select>

4. Insert the text to be translated into the doc.

<h1>:heading</h1>
<h3>:h2</h3>
<p>:first:p</p>

5. Enable the language selector.

var l = new LanguageSelector();
$(document).on("change", "#langSelector", function () {
  var s = $(this).children("option:selected").val();
  l.setLang(s);
  window.location = "index.html";
});
l.parse();

Easy Language Selector, Javascript Langauge Selector Plugin/Github, jquery local storage set and get, local storage examples