jQuery Language Selector

A journal we publish needs to provide readers with the option to translate navigation elements into Spanish or Portuguese. With a simple and prominent select box, readers select their language. A change in the select box triggers a jQuery action that shows the language selected, hides the others (via CSS), and sets a cookie in the reader's browser to maintain the selected language when navigating to other pages on the site.

by hoss

HTML

<div class="language">
Language: 
<select id="select">
     <option id="english" value="english">English</option>
    <option id="spanish" value="spanish">Spanish</option>
    <option id="portuguese" value="portuguese">Portuguese</option>
</select>
</div>

<div class="navigation">
<ul>
    <li class="english"><a href="#">Home</a></li>    
    <li class="spanish"><a href="#">Inicio</a></li>
    <li class="english"><a href="#">Browse</a></li>    
    <li class="spanish"><a href="#">Navidad</a></li>
    <li class="english"><a href="#">Search</a></li>    
    <li class="spanish"><a href="#">Buscar</a></li>
    <li class="english"><a href="#">About</a></li>    
    <li class="spanish"><a href="#">Sobre</a></li>
</ul>
</div>

<div class="footer">
    <p class="english">Hosted by <a href="#">Michigan Publishing</a>, a division of the <a href="#">University of Michigan Library</a>.</p>
    <p class="english">For more information please contact <a href="#">[email protected]</a>.</p>
    <p class="spanish">Conducido por <a href="#">Michigan Publishing</a>, una división de <a href="#">la Universidad de Michigan Library</a>.</p>
<p class="spanish">Para obtener más información, póngase en contacto con <a href="#">[email protected]</a>.</p>
</div>

CSS

.language { position: absolute; top: 5px; right: 5px; padding: 20px; }
.english { display: inline; }
.spanish { display: none; }

.navigation { margin: 50px; }
.navigation ul li { margin: 0px 10px; }

.footer { padding-top: 100px;  margin: 50px; }

JavaScript

var languageSelect = document.getElementById('LanguageSelect');
   var selectedLanguage = readCookie('language');
	
	if ((selectedLanguage == 'english') || (selectedLanguage == 'spanish') || (selectedLanguage == 'portuguese')) {
	$(".language select").val(selectedLanguage);
	var sel = $(".language select").val(selectedLanguage);
	if (selectedLanguage == 'english') {
           $(".english").css("display", "inline");
           $(".spanish").css("display", "none"); 
           $(".portuguese").css("display", "none"); 
        }else if (selectedLanguage =='spanish') {
           $(".english").css("display", "none");
           $(".spanish").css("display", "inline");
           $(".portuguese").css("display", "none");
        }else if (selectedLanguage =='portuguese') {
           $(".english").css("display", "none");
           $(".spanish").css("display", "none");
           $(".portuguese").css("display", "inline");
        }
    }

	$(".language select").bind('change', function() {
		//on change set cookie and...
		setCookie('language', this.value, 365);
		
		//change css depending on what is selected
        var sel = $(".language select").val();
        if (sel=='english') {
           $(".english").css("display", "inline");
           $(".spanish").css("display", "none");
           $(".portuguese").css("display", "none");
        }else if (sel=='spanish') {
           $(".english").css("display", "none");
           $(".spanish").css("display", "inline");
           $(".portuguese").css("display", "none"); 
        }else if (sel=='portuguese') {
           $(".english").css("display", "none");
           $(".spanish").css("display", "none");
           $(".portuguese").css("display", "inline"); 
        
        }
        

});

function saveLanguage(cookieValue)
{
    var sel = document.getElementById('LanguageSelect');
    setCookie('language', cookieValue, 365);
}

function setCookie(cookieName, cookieValue, nDays) {
    var today = new Date();
    var...