Switch Languages With Ease – languageSelector

Category: Javascript , Text | May 15, 2017
Views Total:8,022 views
Official Page:Go to website
Last Update:May 15, 2017


Switch Languages With Ease – languageSelector


A simple, fast JavaScript plugin for creating a language selector to switch between languages on your international webpages.

Basic usage:

Insert the languageSelector’s stylesheet and JavaScript into your html page.

<link rel="stylesheet" href="language.css">
<script id="language_script" data-languages="en,fi" src="language.js"></script>

Create the language selector as this:

<language class="languageFrameClick" data-type="flag">

<language class="languageFrameSelect" data-type="select">

Create your content in multiple languages as this:

<p lang="fi" class="placeHeadline">Suomeksi.</p>
<p lang="en" class="placeHeadline">English Translation.</p>

If you’d like to switch between pages in different languages:

<link rel="alternate" href="hreflang-en.html" hreflang="en">
<link rel="alternate" href="hreflang-fi.html" hreflang="fi">

All default settings.

defaultLanguage: 'en', // Default language if no language available
nameOfSelectorFrame: 'LANGUAGE', // Name of the language selector frame element
idOfScript: 'language_script', // ID of the script element
flagPath: 'region-flags/png/', // Where are the flag images as EN.png

cookieKeyName: 'languageSelectorValue', // Cookie name for selected language
cookieExpirationDays: 3650,

styleId: 'languageSelectorStyle',

// null = no language selector | frame element of selectors
frameElementsOfSelectorFlags: null,

// null = no selectors | array of language selectors or empty array if no selectors
elementsOfLanguageSelectors: null,

elementOfScript: null,

actualLanguage: null,
languageList: {},
languageArray: new Array(),
languageHreflangs: {}, // Elements of all hreflang elements at head

debugMode: false

You Might Be Interested In:

Leave a Reply