Introduction
This article is all about my experiences with one of the toughest jobs (initially) I was involved in, but it turned out to be one of the easiest ones, thanks
to jQuery and jQuery-Translator which uses the Google Language Translator.
Background
The requirement was stated in very simple words: "Language translation capability for a successfully running ASP.NET application". But this application
was never designed with the intention for supporting language translation. It didn't have any concept of localization/resource files and other things. The ground work
was started by building a concept that needed me to change the basic structure and include the concept of localization, resource files, and all the related stuff, which in turn
meant a lot of effort and business hours, but jQuery-Translator changed all of this: it just took me 12 hours to understand and have it implemented within the
ASP.NET application.
Using the Code
This article will be helpful to all those who wish to have a language translator integrated into their existing applications/websites. This will now be minutes' work.
Please find all the libraries and scritps required in the source files attached along with the article. Now you need to just include a reference to one of the scripts in your
application's page and you can start using the language translator inside your page.
<script src="Scripts/TranslatorScript.js" type="text/javascript"></script>
The code is simple and easy to understand, much of it can be understood by just going through it. "TranslatorScript.js" holds the key to
the implementation. The initial section loads all the required script files.
LoadScript(scriptPath + "jQuery-BlockUI.js");
LoadScript(scriptPath + "jquery.translate-1.4.7.min.js");
LoadScript(scriptPath + "jquery.cookie.js");
Here, LoadScript
is the function which finds the location of the script files and loads them.
function getScriptsPath() {
var scripts = document.getElementsByTagName("script");
var regex = /(.*\/)TranslatorScript/i;
for (var i = 0; i < scripts.length; i++) {
var currentScriptSrc = scripts[i].src;
if (currentScriptSrc.match(regex))
return currentScriptSrc.match(regex)[1];
}
return null;
}
The loadTranslator()
function is the center of the article which does all the magic. This is the function which handles the language translation during DOM structuring.
This function holds the UI code which is added to the page which provides a UI interface for language selection.
function loadTranslator() {
$.translate(function() {
try {
$('#translate-bar').html("");
}
catch (e) {
}
var selectedLanguage = $.cookie('selectedLanguage');
if (selectedLanguage) {
if(selectedLanguage != 'en')
translateTo(selectedLanguage);
}
function translateTo(selectedLanguage) {
$('body').translate('english', selectedLanguage, {
not: '.jq-translate-ui',
fromOriginal: true,
start: function() {
$('#jq-translate-ui').val(selectedLanguage);
$.blockUI.defaults.applyPlatformOpacityRules = false;
$.blockUI(
{
message: 'Language Translation In Progress, Please Wait...',
css:
{
border: 'none',
padding: '10px',
backgroundColor: '#000',
'-webkit-border-radius': '9px',
'-moz-border-radius': '9px',
opacity: .9,
color: '#fff'
},
overlayCSS: { backgroundColor: '#000', opacity: 0.6,
'-moz-opacity': '0.6', width: '100%', height: '100%' }
});
},
complete: function() { $.unblockUI({ css: { cursor: 'default'} }); }
});
}
$.translate.ui({
tags: ["select", "option"],
filter: $.translate.isTranslatable,
label: $.translate.toNativeLanguage ||
function(langCode, lang) { return $.translate.capitalize(lang); },
includeUnknown: false
}).change(function() {
$.cookie('selectedLanguage', $(this).val(), { path: '/' });
translateTo($(this).val());
return true;
}).appendTo('#translate-bar');
});
}
The source files include scripts and other related files along with images which will help in building a layer above the existing page content, and provides the suitable
UI required for the language translation. This is a very simple and basic implementation. The script files work on the DOM structure of the page content.
When a page is loaded and once the DOM structure of the page is ready, the content is translated into the required language by the jQuery Translator.
For more information on jQuery-Translator, please visit http://code.google.com/p/jquery-translate/.
Points of Interest
This article will be helpful to all those who wish to integrate a language translator in their site/application with minimal effort and implementation time.