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.).

Features:

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

Must Read: [MS Word] A jQuery Plugin That Allows an HTML Page To Be Converted | googoose

How to make use of it:

1. Include 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 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 document.

<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();

See Demo And Download

Official Website(lablnet): Click Here

This superior jQuery/javascript plugin is developed by lablnet. For extra Advanced Usage, please go to the official website.

Related Posts

Confetti-Falling-Animation-Effect-party

Confetti Falling Animation Effect In JavaScript | party.js

Party.js is a JavaScript library to brighten user site experience with visual effects! Celebrate success with dom confetti! The library is written in TypeScript and compiled into…

jquery-cookie-consent

Simple jQuery Cookie Consent Plugin

jquery.cookie-consent is a simple jQuery plugin to request consent to use cookies. An easy-to-use and highly customizable cookie consent bar that informs your visitors of the use…

Timepicker-Plugin-for-jQuery

Timepicker JavaScript Plugin for jQuery Inspired by Google Calendar

jquery.timepicker is a lightweight jQuery timer plugin inspired by Google Calendar. It supports both mouse and keyboard navigation and weighs 5.5KB minified and compact. Features: Highly customizable…

angular-ngx-carousel-slider

A Lightweight, Touchable, and Responsive Angular Universal Carousel Library

ngxCarousel is a lightweight, tactile, and responsive library for creating an angular carousel. No dependencies, no more hammer. Must Read: Angular Responsive Image Slider With Lightbox Popup…

random-number-picker

Generate a Random Number Picker In Vanilla JavaScript

Random Number Picker is a Vanilla JS-based number picker that allows you to generate a random number within a specified range. Must Read: Generating Lottery Numbers Using…

Nepali-Date-Picker-jQuery-Plugin

Nepali Date Picker jQuery Plugin | nepaliDatePicker

Nepali Date Picker is a customizable, easy-to-use, and input-based date picker plugin mostly based on the Nepali calendar. Users can choose a Nepali date in the navigable…

Leave a Reply

Your email address will not be published. Required fields are marked *