‘Polyglot’ Language Switcher jQuery Plugin


You may also like...

71 Responses

  1. Brad says:

    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?


  2. Ed says:

    How can I call a function if a language is changed?

    • ixtendo says:

      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 = {

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

      liElement.bind('click', function () {

      with this:

      liElement.bind('click', function () {
      if (settings.callback) {


      The language switcher must be invoked as follows:

      <script type="text/javascript">
      $(document).ready(function() {
      callback: function(element){

  3. Meth says:

    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 says:

      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.

  4. Lewis Alouty says:

    Hi! I used your plugin together with Sign in dropdown box likes Twitter with jQuery from:

    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 says:

      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 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!

  5. alex says:

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


    • ixtendo says:

      The function that changes the default language is doAction() and can be found in the jquery.polyglot.language.switcher.js file.

      • Jorge says:

        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 says:

          If you want Polyglot Language Switcher to be loaded using other language than English, you must specify the selected attribute for that language. For example, if you want to set Spanish as the default language, you must 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>

  6. Thanks for this unvaluable jQuery resource: is clean, effective and really delicious !

  7. webdev1234 says:

    This is a great script. Can you add other languages to the list in the pull-down and get a translation?

    • ixtendo says:

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

      For example, if you want to add the Portuguese language, you must follow these steps:

      1. Add the Portuguese flag icon to the flags folder (for example pt.png).
      2. Add the following rule in the polyglot-language-switcher.css file:
         #pt {
            background-image: url(../images/flags/pt.png);

      3. Add the Portuguese option in your <select> tag in the HTML page, like this:
           <option id="pt" value="pt">Portuguese</option>

      I hope that helps.

  8. micmx5 says:

    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?

  9. Ali says:

    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 says:

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

  10. Ronaldo says:

    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.

  11. Chris says:

    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 says:

      To keep the language selected, I recommend using PHP. For this, you must configure Ployglot Language Switcher like this:

      $(document).ready(function() {
      effect: 'fade',
      testMode: false

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

  12. Anonymous says:

    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:


    $(document).ready(function() {
    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 says:

      I understand you issue. It can be solved as follows:

      You must save the selected language in session under the lang key:

      $session_id = session_id();
      if (empty($session_id)) {

      $_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 this:

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

      The select_lang function should look like this:

      function select_lang($lang){
      if($lang === $_SESSION['lang']){
      echo ' selected';

  13. ocrium says:

    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 :


    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

  14. Ronaldo says:

    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!

  15. Jorge Sereno says:

    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.

  16. tpy says:

    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.

  17. Jamie says:

    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???

  18. jtroump says:

    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.

  19. jtroump says:

    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()) ?>"/>

  20. jtroump says:

    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()) ?>"/>

  21. Joost says:

    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?

  22. teo says:

    Hi, what exactly does the testmode?

  23. Brad says:

    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 :-/

  24. Arsen says:

    Hi) What menu open top, no bottom. Sorry my Enlish

  25. Filiberto Trennell says:

    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

  26. sadi says:

    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.

  27. Arun says:

    Hi ,

    Flag images not displaying google chrome browser.please any one advice me.


  28. I loved as much as you will receive carried out right here.
    The sketch is tasteful, your authored material stylish.
    nonetheless, you command get got an shakiness over that you
    wish be delivering the following. unwell unquestionably come more formerly again since exactly the same
    nearly very often inside case you shield this increase.

  29. Suresh says:


  30. netbus says:

    Hi there. I’d like to change dropdown from click to mouse over. Can somebody help me how to do that? Thanks

  31. jv says:

    how can i make it jump to a URL when a languge is selected? i want it to redirect to http://mysite.com/fr when i select the french language. is this possible?

  32. Gerald Nelson says:

    How many languages it will support ?

  33. Kunal says:

    i am not able to call javascript onchange event with this plugin. I am using asp.net MVC 4. If i dont use this plugin everything works fine.Any help appreciated.

  34. Minh says:

    I want to apply the plugin for changing attribute .
    How can I get it.

  35. Minh says:

    the attribute lang=”” in the html tag.

  36. website says:

    Thanks for your marvelous posting! I genuinely enjoyed reading it,
    you’re a great author. I will be sure to bookmark your blog and
    will eventually come back at some point. I want to encourage you to ultimately continue your great
    work, have a nice afternoon!

  37. So, I’m trying to get Polyglot to work for a website I’m building. It roughly works, but there’s a bug I don’t know how to get around and would really appreciate some feedback.
    This is the desired setup:

    Person visits index.php. This page is in English by default.
    The visitor should then be able to change language using Polyglot, which should then change the page to ‘index.php?lang=’. My PHP script automatically grabs the two-character language code from the URL and styles everything correctly, so I just need Polyglot to reliably switch the URL depending on the selection.

    To do this, I have the following edited Polyglot JS:

    $(document).ready(function() {
    effect: ‘fade’,
    testMode: true,
    onChange: function(evt){
    if (evt.selectedItem == ‘en’) {
    window.location.href = window.location.pathname+’?lang=en';
    } else if (evt.selectedItem == ‘de’) {
    window.location.href = window.location.pathname+’?lang=de';
    } else if (evt.selectedItem == ‘fr’) {
    window.location.href = window.location.pathname+’?lang=fr';
    } else if (evt.selectedItem == ‘it’) {
    window.location.href = window.location.pathname+’?lang=it';
    } else {
    window.location.href = window.location.pathname+’?lang=en';

    This roughly works. My JS If statements correctly work out which language has been selected from the dropdown, but I’ve noticed the following bug:

    When the user first visits the page they can choose any language they like, let’s say German. The URL correctly changes to ‘index.php?lang=de’ and the page loads in German.
    If the user then changes to another language, the URL goes to ‘index.php#’ and resets to English regardless of what was chosen. From this page, the user can then select any language and it loads correctly.

    So, it seems the user cannot reliably switch back and forth between languages. Polyglot will always send them back to English first, which I want to avoid.

    Any advise?

    • David says:

      Can we get an answer on this one, please?

      • ixtendo says:

        Set the testMode parameter to false, like this: testMode: false.

        • Smokingmirror says:

          Hi there,
          Thanks for the update. I’ve tried it but it’s still not working correctly.
          Now when I change language the page doubles up the declaration after the ?; for example:

          index.php?lang=de is my page in German. If I set the testMode to false and try changing the page to, say, French it goes to index.php?lang=?lang=fr which doesn’t work.

          It looks like it’s just replacing the two letter language code with the whole query string. I know it’s getting that from my JS, but if I change the JS to:

          window.location.href = window.location.pathname+’en';

          the URL stays permanently at index.php?# and I can’t change the language.
          I know the problem is in my JS, but can’t see it. Any ideas?

          • Smokingmirror says:


            Changing the language with testMode set as false will always, but reliably, change the query string, thus:

            index.php (no language set. pages first loads)
            index.php# (clicked on language selector box but not selected anything)
            index.php?lang=?lang=de (selected German from the dropdown)
            index.php?lang=?lang=fr (changed to French from the dropdown)
            index.php?lang=?lang=es (changed to Spanish from the dropdown)

            So Polyglot seems to be correctly and reliably changing the very end of the URL to the right language, but is inserting another ‘?lang=’ into it, causing it to break.

            Again, I know the problem must be my JS, but don’t see what is causing it.

            Thanks for all your help.

  38. dimitrivh says:

    Why i cant download??

  39. Natasa says:

    When I push download button it says: “Invalid request.” :(

  40. Admir says:

    It looks great but not working on static html pages :(

  41. Sam says:

    Hi there,

    I have minimal experience with JS, but I can understand simple things. Is there any way I can put the value (e.g. “de” or “en” or “fr”) in a variable and in case of onChange have the script execute for example window.location(“www.mywebsite.com/” + LanguageVariable + “/about-us”; ?

  1. October 26, 2012

    […] jQuery language switcher (free download and documentation here: http://ixtendo.com/polyglot-language-switcher-jquery-plugin/) […]

  2. January 13, 2013

    […] jQuery language switcher (free download and documentation here: http://ixtendo.com/polyglot-language-switcher-jquery-plugin/) […]

  3. January 4, 2014

    […] Because I saw that a lot of people was interested in the ‘Polyglot’ Language Switcher jQuery Plugin plugin I decided to create a new version of this plugin more extensible. Stay […]

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>