‘Polyglot’ Language Switcher jQuery Plugin

polyglot-language-switcher-jquery-plugin

You may also like...

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

    Thanks!

  2. Ed says:

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

    • ixtendo says:

      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.

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

      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!

  5. alex says:

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

    Thanks

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

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

          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

  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:

      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.

  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:

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

      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

  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:

      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.

  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:

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

      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

  13. ocrium says:

    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

  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
    <http://www.caramoanpackage.com

  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.
    thanks.
    regrads.

  27. Arun says:

    Hi ,

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

    Thanks
    Arun

  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:

    Awsome!!!

  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:

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

  35. Minh says:

    Hi,
    the attribute lang=”” in the html tag.
    Thanks.

  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() {
    $(‘#polyglotLanguageSwitcher’).polyglotLanguageSwitcher({
    effect: ‘fade’,
    testMode: true,
    onChange: function(evt){
    if (evt.selectedItem == ‘en’) {
    //alert(“en”);
    window.location.href = window.location.pathname+’?lang=en';
    } else if (evt.selectedItem == ‘de’) {
    //alert(“de”);
    window.location.href = window.location.pathname+’?lang=de';
    } else if (evt.selectedItem == ‘fr’) {
    //alert(“fr”);
    window.location.href = window.location.pathname+’?lang=fr';
    } else if (evt.selectedItem == ‘it’) {
    //alert(“it”);
    window.location.href = window.location.pathname+’?lang=it';
    } else {
    //alert(“other”);
    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?

  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>