“Polyglot” Language Switcher jQuery Plugin

Date: February 18, 2012

Since October 22, 2012, this project was moved to GitHub. There, you can find all its versions.
On ixtendo.com you can find its latest version.

The "Polyglot" Language Switcher jQuery plugin allows you easily switch between the languages supported by your website. It was conceived as a drop-down menu with flag icons.

The download zip file includes extensive documentation.

Enjoy!

View Demo Download (3545)

49 Responses to "“Polyglot” Language Switcher jQuery Plugin"

Add Comment

Brad
April 16, 2012 at 5:53 pm

It would be cool if there was a variation that opened and closed by hovering instead of clicking. Can you advise on what would need to be adjusted in the script to be able to do that?

Thanks!
admin
April 17, 2012 at 1:03 pm

Hi Brad,
I will try to extend the library to allow you to choose between ‘hover’ and ‘click’. I will release the new version as soon as I can and will notify everyone via Twitter.
admin
April 23, 2012 at 4:50 pm

You can now check out version 1.2.
Brad
April 26, 2012 at 7:48 pm

That is awesome! Thanks so much for making that happen.
admin
April 27, 2012 at 10:08 am

You are welcome, Brad! I’m glad that I could help you.
Ed
July 18, 2012 at 6:13 am

How can I call a function if a language is changed?
ixtendo
July 19, 2012 at 9:36 am

Hi,

To call a custom function after the language was changed, you must do the following:

In the default settings, add a new parameter named ‘callback’:
ls.defaults = { openMode:'click', hoverTimeout:1500, animSpeed:200, effect:'slide', paramName:'lang', pagePrefix:'', indexPage:'index.html', websiteType:'dynamic', testMode:false, callback:NaN };

To invoke the callback function, in the toLiElement function, you must replace this

liElement.bind('click', function () { doAction($(this)); });

with this

liElement.bind('click', function () { doAction($(this)); if (settings.callback) { settings.callback.call($(this)); } });

The language switcher must be invoked as follows:

<script type="text/javascript"> $(document).ready(function() { $('#polyglotLanguageSwitcher').polyglotLanguageSwitcher({ openMode:'hover', effect:'fade', testMode:true, callback: function(element){ alert(element); } }); }); </script>

Regards.
Meth
July 30, 2012 at 11:09 am

Hi….. Excellent stuff. Just one question (newbie here…) How it works???….. I´ve got index.html with “Polyglot”…. How do i “link” my index-fr.html, index-de.html….etc. with each “Polyglot” flag?

Sorry for my english
ixtendo
August 3, 2012 at 10:43 am

To change the language in your site using this switcher, you have to use a programming language like PHP. This language switcher wasn’t designed to work with static websites (that is, sites which contain only HTML and CSS).
Anyway, if you download the latest version (1.3), you can add a callback when the language is changed and you can redirect the request to the translated page.
m4r73n
August 7, 2012 at 6:47 pm

This is far from being a cleanly developed jQuery plugin.
For example, it is not possible to implement more than one language switcher per page, since this plugin relies on the DOM IDs (which have to be unique) instead of relying on element classes, for the surrounding div as well as for the languages.
ixtendo
August 8, 2012 at 12:14 pm

What you are referring to has nothing to do with development cleanliness, but with a development approach, which is a totally different thing. My approach was to use IDs instead of classes as I envisaged one language switcher per page that would change the language for the entire page. That was just my vision and there is nothing incorrect about it.

The plugin can be easily customized to use classes instead of IDs. Maybe, when I find the time, I will create a version which uses classes. Anyway, the modification can be done very easily even by the user who downloads the plugin. And, most importantly, it doesn’t cost you anything. It’s free. Of course, you can always look for a plugin that corresponds exactly to your specific needs.

Regards.
Lewis Alouty
August 27, 2012 at 6:43 pm

Hi! I used your plugin together with Sign in dropdown box likes Twitter with jQuery from:
http://aext.net/2009/08/perfect-sign-in-dropdown-box-likes-twitter-with-jquery/

Language Switcher is below Signin drop down box. When I click Sign in button, I can see that the Language Switcher: Englich is on top of the Sign in drop down box. How to avoid it or make the Language Switcher hidden behind Sign in drop box when I click Sign in button?
ixtendo
September 2, 2012 at 1:11 pm

Hi,
I think your problem might be caused by the value of the CSS z-index property. Open the polyglot-language-switcher.css file and go to the #polyglotLanguageSwitcher selector. Change the current value of the z-index to a lower value. For example, instead of the value of 100, you can have 50 or 10 or anything lesser that works for you.
Good luck!
alex
September 9, 2012 at 11:50 pm

please can anyone tell me where i can find the function to change the default language ??

Thanks
ixtendo
September 11, 2012 at 3:57 pm

The function that changes the default language is doAction() and can be found in the jquery.polyglot.language.switcher.js file.
Jorge
October 18, 2012 at 12:14 am

Hi.
I found 3 lines with the doAction function in the query.polyglot.language.switcher.js file , but i did not found how to change the default language “english”, to spanish (Español), which is my web default language.

Help me please!
ixtendo
October 19, 2012 at 12:51 am

Hi,

If you want that the polyglot language switcher to be loaded using other language than English you should specify the attribute selected for that language. For example if you want to set Spanish as default language you should use the following code in your html file:

<select id=”polyglot-language-options”>

<option id=”en” value=”en”>English</option>
<option id=”fr” value=”fr”>Français</option>
<option id=”de” value=”de”>Deutsch</option>
<option id=”it” value=”it”>Italiano</option>
<option id=”es” value=”es” selected>Español</option>
</select>

Regards
Pingback: Finesse – Responsive Business HTML Template (Business)
Elcodigodebarras
October 26, 2012 at 6:52 pm

Thanks for this unvaluable jQuery resource: is clean, effective and really delicious !
ixtendo
October 26, 2012 at 9:57 pm

Thank you! I’m glad that you like it.
webdev1234
November 7, 2012 at 6:17 pm

This is a great script. Can you add other languages to the list in the pull-down and get a translation?
ixtendo
November 7, 2012 at 11:01 pm

Hi,

You can extend this library very easily by adding new languages.

For example, if you want to add the Portuguese language, you have to follow the following steps:

1. Add the Portuguese flag icon in the flags folder (for example pt.png)
2. Add the following class in the polyglot-language-switcher.css file:
#pt { background-image: url(../images/flags/pt.png); }
3. Add the Portuguese option in your select tag from the HTML page, like this:
<option id="pt" value="pt">Portuguese</option>

I hope this will help.

Regards.
webdev1234
November 8, 2012 at 12:13 am

Thanks for the information. What associates the language to the translator? Is it the abbreviation shown with the option and id or the actual name of the language? If it is the abbreviation, where do I find the correct abbreviation for each language that the translator will recognize?
ixtendo
November 8, 2012 at 12:42 am

As you can see in my example, I used the language abbreviation to make that association (pt)
The two letter abreviation of the languages can be found here: http://www.loc.gov/standards/iso639-2/php/code_list.php
webdev1234
November 8, 2012 at 5:26 pm

Thanks IXTENDO. You’ve been very helpful.
micmx5
November 14, 2012 at 1:48 am

please i am not good on this, i have a red web template and i want to make it multilanguage
i wand after the language was changed, what i have to do exacly to work corendly?
ixtendo
November 20, 2012 at 2:13 am

Hello,

I’ve just updated the documentation so that you can find a detailed explanation of the steps that must be followed. You can find it here: https://github.com/ixtendo/Polyglot-Language-Switcher/wiki.
This documentation is available only for the version 2.2 or above.

I hope you find it useful.
Ali
December 1, 2012 at 2:03 pm

Hello,
Thanks for great code but I have a big problem! I want to use twice in same page, can you help me how I can use this code twice?

thank you
ixtendo
December 1, 2012 at 2:49 pm

Hi,
The Polyglot Language Switcher was not designed to be used more than twice in a page.
To make it work you have to modify the source code.

Regards
Ronaldo
December 7, 2012 at 5:13 pm

Hi, How do I change the value of the option when change the language? because when the language is changed the value of the option is still the same.
Chris
December 8, 2012 at 8:40 pm

Im also interested in how to make the selected language stay selected, like Ronaldo says. Basically everything works, the language changes and all but since the page refreshes it goes back to the default option instead of changing to the selected one.
ixtendo
December 9, 2012 at 12:17 am

Hello,

To keep the language selected, I recommend to use PHP. For this, you must configure the Ployglot-Language-Switcher like this:
$(document).ready(function() { $('#polyglotLanguageSwitcher').polyglotLanguageSwitcher({ effect: 'fade', testMode: false }); });

Also, if you want to use the Ployglot-Language-Switcher in a simple HTML site, without PHP, then you should read this documentation: https://github.com/ixtendo/Polyglot-Language-Switcher/wiki

Regards.
Anonymous
December 9, 2012 at 2:25 pm

I think not explain the problem well!
I’m using dinânico system with PHP, the language is changing often, but what is not working and the following:

English
Français
Deutsch
Italiano
Español

$(document).ready(function() {
$(‘#polyglotLanguageSwitcher’).polyglotLanguageSwitcher({
effect: ‘fade’,
testMode: false
});
});

In the above code I have the default option selected “English”, when I select another language on the site, it is changed correctly, but the selected value in the option for the user remains the same “English”.
ixtendo
December 9, 2012 at 2:44 pm

Hello,

I understand you problem and this can be solved as follow:

You have to save the selected language in session under the lang key
$session_id = session_id(); if (empty($session_id)) { session_start(); }
$_SESSION['default_lang'] = 'en'; $lang = $_REQUEST['lang']; if (isset($lang) && strlen($lang) > 0) { $_SESSION['lang'] = $lang; } else { $lang = $_SESSION['lang']; if (!isset($lang) || strlen($lang) == 0) { $lang = $_SESSION['default_lang']; $_SESSION['lang'] = $lang; } }
The polyglot language switcher should look like:
<div id="polyglotLanguageSwitcher"> <form action="#"> <select id="polyglot-language-options"> <option id="en" value="en" <?php select_lang('en'); ?>>English</option> <option id="fr" value="fr" <?php select_lang('fr'); ?>>Français</option> <option id="de" value="de" <?php select_lang('de'); ?>>Deutsch</option> <option id="it" value="it" <?php select_lang('it'); ?>>Italiano</option> <option id="es" value="es" <?php select_lang('es'); ?>>Español</option> </select> </form> </div>
The select_lang function should look like:
function select_lang($lang){ if($lang === $_SESSION['lang']){ echo ' selected'; } }

Regards
ocrium
December 11, 2012 at 12:17 pm

Hi,
sorry for my bad english (i’m a frogs as say english people
Maybay you have my response on my problem
I m looking for a tools for my webapp, a little toys. I need use only Javascript to maze later an iphone app.
I take your script and see nothing. I need write in CSS display:block (not hide) to see the dropdown menu.
I m writing my htlm :

Aide
Help
Hilfe

and when I choose Deutsch in the menu, my text stand by in french !
I’ve a another question now : it’s possible to have in memory this choose (the lang) to load an another page with this lang and how make that ?
Thank you
best regards
Ronaldo
December 11, 2012 at 6:05 pm

ixtendo, follow their guidelines is now working well!

” I understand you problem and this can be solved as follow:
You have to save the selected language in session under the lang key ”

The problem really was the language session.
Thank you!
Jorge Sereno
December 11, 2012 at 8:40 pm

Anyone playing around with Struts2 and this plugin?
I´m trying to automatic select the setted language with the i18n interceptor with no success.

My Ployglot-Language-Switcher properties are:
effect : ‘fade’,
paramName : ‘request_locale’,
openMode : ‘hover’,
hoverTimeout : 500,
testMode : false,

where the ‘request_locale’ is my parameter used int struts to change the language.
tpy
January 4, 2013 at 10:19 am

Hi, there:
It’s really a nice work, thank you for sharing. I have a problem: how can I do to send a URL request when user click a language? I need this: when user click a language from the drop menu of switcher in browser, send a request like ‘http://website.com/zh-CN/’ so that my rails server can handle the rest.

Sorry I dont know about javascript, would you please give me an easiest way to do that? If you post some javascript code, please tell me where should I put the code.

Thank you. I really need your help, please.
Pingback: Finesse – Responsive Business HTML Template | Creative Wordpress Themes
Jamie
February 13, 2013 at 5:14 pm

Is there anyways to get the VALUE of the option field??? This is great but it doesn’t necessarily support globalization and localization.. b/c Portuguese is spoke in Brazil and Portugal but I want to sell different products in both.. “pt” isn’t enough for me. I want to get “pt-BR”..

alert(“The selected language is: “+evt.selectedItem);

Selected Value???
jtroump
February 13, 2013 at 9:22 pm

Hi there,
I have to say, I was looking for a plugin like yours for a long, long time.
Great job, well done!
I am trying to replace the traditional language switcher in Magento with yours.
I have done all the work with .js and no.Conflict issues so I am done with that.
But I can’t find how exactly I will add the “form”, “select” and “option” elements in Magento’s code.
For example, this is the initial code for my language switcher:

getStores())>1): ?>

getStores() as $_lang): ?>
getId() == $this->getCurrentStoreId()) ? ‘ selected=”selected”‘ : ” ?>

<a href="getCurrentUrl() ?>”><img src="getSkinUrl(‘images/flags/’ . $this->htmlEscape($_lang->getCode()) . ‘.jpg’) ?>” alt=”htmlEscape($_lang->getName()) ?>”/>

How can I add here these elements so it will change to your switcher?
Any help would be valuable!
Thank you in advance.
jtroump
February 13, 2013 at 9:24 pm

Sorry, here is the code:
getStores())>1): ?>
getStores() as $_lang): ?> getId() == $this->getCurrentStoreId()) ? ' selected="selected"' : '' ?> <a href="getCurrentUrl() ?>"><img src="getSkinUrl('images/flags/' . $this->htmlEscape($_lang->getCode()) . '.jpg') ?>" alt="htmlEscape($_lang->getName()) ?>"/>
jtroump
February 13, 2013 at 9:32 pm

getStores())>1): ?>
getStores() as $_lang): ?> getId() == $this->getCurrentStoreId()) ? ' selected="selected"' : '' ?> <a href="getCurrentUrl() ?>"> <img src="getSkinUrl('images/flags/' . $this->htmlEscape($_lang->getCode()) . '.jpg') ?>" alt="<?php echo $this->htmlEscape($_lang->getName()) ?>"/>
Joost
February 21, 2013 at 12:42 pm

Is it possible to make de flags always open. So you have al line of flags instead of clicking on hovering one flag to see the others?
teo
March 17, 2013 at 7:01 pm

Hi, what exactly does the testmode?
Brad
March 23, 2013 at 4:26 am

Great plugin, the only thing I’m missing is to set the language per function, for example if I’d like to set the default language per website start so that if the users browser is in english, the selected default language will be english and so on.

P.S I know that its possible through doAction() still you have to generate a complete item for being able to switch the language :-/
Arsen
March 24, 2013 at 9:51 am

Hi) What menu open top, no bottom. Sorry my Enlish
Filiberto Trennell
April 30, 2013 at 8:12 pm

CSS is designed primarily to enable the separation of document content (written in HTML or a similar markup language) from document presentation, including elements such as the layout, colors, and fonts.This separation can improve content accessibility, provide more flexibility and control in the specification of presentation characteristics, enable multiple pages to share formatting, and reduce complexity and repetition in the structural content (such as by allowing for tableless web design). ;:

Our new web blog
<http://www.caramoanpackage.com
sadi
May 5, 2013 at 4:25 pm

hi Admin..
i want to change my whole website with the particular language i select .
for eg:currently my website is in english and i want it to translate whole pages whole website in say “arabic”. suggest the steps i have to follow so dat i can minimise the work and complete the project as soon.
thanks.
regrads.