graphicpush

Website Language Dropdown With jQuery

Going global means getting funky with languages, which means adding multi-lingual support to websites. Instead of a sticking on a boring string of flags to the top your site, try this jQuery-powered dropdown that degrades perfectly without JS support.

For the impatient: the demo is here.

One of the pleasures and pains of working for a growing company is the inevitable global expansion, and the circus of language challenges that crop up just by going into first-world European countries. Because our products and services are tailored for a country, not a language (big difference there), we procured the appropriate TLDs (.de, .fr, .co.uk, .it, .nl, etc) to serve up unique, country-specific sites instead of simply using our content management system’s built-in language switcher. This not only means the experience is localized, but provides the daily recommended amount of SEO vitamins as well.

So now we have a pile of crazy wacky domain names, and we need to provide a centralized way of quickly switching between countries, and by association, languages. The general UI pattern, of course, is a dropdown in the header of the site. When we embarked on the task, we had three criteria:

  1. It had to look as fabulous as the rest of the site, so
  2. We would use our framework of choice, jQuery, but
  3. It had to work without JavaScript enabled, so progressive enhancement was key

Not too hard right?

Thankfully, Janko Jovanovic did some of the legwork for us in his reinventing a dropdown article. This script builds off of his with a few enhancements.

The HTML

Since we’re angling for good accessibility, our base version is a standard select drop down and submit button wrapped in a form element. This ensures that if JavaScript or CSS is disabled, or if we want to use less eye candy for a mobile version, the user is still presented a mechanism that is functional.

 <div id="country-select">
   <form action="server-side-script.php">
     <select id="country-options" name="country-options">
       <option selected="selected" title="http://www.yoursite.com" value="us">United States</option>
       <option title="http://www.yoursite.co.uk" value="uk">United Kingdom</option>
       <option title="http://www.yoursite.fr" value="fr">France</option>
       <option title="http://www.yoursite.de" value="de">Germany</option>
       <option title="http://www.yoursite.nl" value="nl">Netherlands</option>
     </select>
     <input value="Select" type="submit" />
   </form>
 </div>
 

Since we’re using actual URLs instead of dynamic language redirects (common in many expensive web content management systems), we’re storing the value as a title attribute and saving the value attribute for processing server-side. The title provides vague semantic value, but more importantly does not interfere with the form submit and enables us to avoid getting mired in conditional redirects in JavaScript. (In other words, we don’t need if/else scripts to match up “german” with “yoursite.de”.)

The jQuery

Instead of publishing the script, which you can download here, I’ll just briefly explain the components.

At the bottom is the actual function to convert the form and select element into a definition list with links. It hides the form, finds the “selected” language option to use as the definition list title, then loops through all options to create the complete list of links. So at the end of the day, our above form is transformed into this:

 <div id="country-select">
   <dl id="target" class="dropdown">
     <dt class="us">
       <a href="#"><span class="flag"></span><em>United States</em></a>
     </dt>
     <dd>
       <ul>
         <li class="us"><a href="http://www.yoursite.com"><span class="flag"></span><em>United States</em></a></li>
         <li class="uk"><a href="http://www.yoursite.co.uk"><span class="flag"></span><em>United Kingdom</em></a></li>
         <li class="fr"><a href="http://www.yoursite.fr"><span class="flag"></span><em>France</em></a></li>
         <li class="de"><a href="http://www.yoursite.de"><span class="flag"></span><em>Germany</em></a></li>
         <li class="nl"><a href="http://www.yoursite.nl"><span class="flag"></span><em>Netherlands</em></a></li>
       </ul>
     </dd>
   </dl>
 </div>
 

The rest of the code inside languageswitcher.js joyfully fulfills the following tasks, all called from inside the $(document).ready() function:

  1. Calls the function to do the actual HTML transformation
  2. Sets up a few variables
  3. Establishes the main open/close functionality via click event
  4. Establishes additional functionality that makes the list close whenever anything else on the screen is clicked
  5. Sets one final bit of code that does some element re-arrangement when a link is clicked, essentially replacing the current active language with the one that was clicked. (Why do this when the link is going to take the person to whole different domain and reload the script? Mostly for user experience. The visitor gets instant feedback when their link is clicked; they see their selected language “activate” immediately. When the new domain loads, the transition is seamless.)

The CSS

Now that we’ve established the new HTML structure, we can freely style our new dropdown. I used famfamfam’s unbelievably awesome country flag icons as a sprite for the different languages. Another good library is Dave Shea’s Chalkwork Flags.

You can see all of the CSS on the demo page. We start with a few rough styles for the people who have JavaScript disabled. For the actual list element containing the language, the span houses the flag icon and is floated left, the em houses the text and is floated right. Because we’re pulling the language code for each item and applying it as a class to the <li>, we can create a quick sprite with all the flags, calling one image instead of six, and making future expansion a piece of cake.

You will see some CSS3 stuff in there (box-shadow, border-radius, RGBA), but it’s purely for visual enhancement and the solution degrades just dandy in crapolla browsers.

That’s it. Have fun. As always, released under a WTFPL.

commentary + criticism

Offshore Web Design

wrote the following on Sunday March 6, 2011

Great job! Nice coding. This article is creative. I get new idea! Thanks :)

Jireck

wrote the following on Wednesday April 6, 2011

Thanks again for this article ;-)

ganardinerointernet

wrote the following on Monday May 9, 2011

Just starting to tweak my navigation. Hope don’t mess a lot.

Thanks for the post

Cristian from Neweb

wrote the following on Saturday July 9, 2011

Awesome! exactly the code that I was looking for! many thanks going to try it right now!

Moonwalker

wrote the following on Wednesday September 28, 2011

Hi,

Thanks a lot for the script.

Just one question: What to change when I need two dropdown menus?

I managed to get them show up, the way I want them. But once I click on the first one, the second one opens too.

Thanks for any solution how to get this working.

phil

wrote the following on Thursday January 5, 2012

Great script. Exactly what I was looking for. Just one question. I have copied your script and it works. I use it to switch language on a php page. Language switches but the flag always reamains on the first selected and does not change according to my selection. Any idea? Regards

jamzorz

wrote the following on Thursday October 4, 2012

Thanks for this! When the page first loads, it flashes the un-styled Select button before hiding it. Any tips for how to prevent this?

David

wrote the following on Friday October 12, 2012

This is close to being exactly what I need. However, our app allows our customer to define what languages (and the associated flag images) they support, so that information is dynamic. The flag sprite this uses disqualifies this as a viable option for me. Is there any way to associate a image per option?

Fan Likes

wrote the following on Monday November 19, 2012

I was curious as to what “released under a WTFPL” meant so clicked of the link. That is hilarious, I literally laughed out loud. I’m a big fan of that license!

saurabh jain

wrote the following on Tuesday January 1, 2013

Hello Sir,

what should i do with “action=“server-side-script.php”>” tell me.. i need your help…….

george

wrote the following on Tuesday January 29, 2013

as of jquery 1.9 doesn’t work

Russell Thomas

wrote the following on Friday March 1, 2013

In jquery 1.9 the toggle() function has been removed so you need to do the following:

In the languageswitcher.js file, replace:

// open and close list when button is clicked $dropTrigger.toggle(function() { $languageList.slideDown(200); $dropTrigger.addClass(“active”); }, function() { $languageList.slideUp(200); $(this).removeAttr(“class”); });

With:

// open and close list when button is clicked $dropTrigger.on(‘click’, function () { $languageList.slideToggle(); if ($(this).data(‘clicked’)) { $dropTrigger.addClass(“active”); } else { $(this).removeAttr(“class”); } });

That should fix it.

Luuk

wrote the following on Saturday July 13, 2013

Hello Kevin,

I love this piece of code, it was exactly what I was looking for, easy to implement and adapt and works great. However I have an annoying issue I can’t seem to fix. The language selector drop down menu is not alligned properly. I believe it has something to do with the parent DIV, however I can’t seem to fix it. I was hoping you have a quick fix for this? The website is linked to this post.

Thanks!

add a comment?