From our sponsor: Ready to show your plugin skills? Enter the Penpot Plugins Contest (Nov 15-Dec 15) to win cash prizes!
The API of Google has a lot of useful usage examples. This showcase demonstrates how we can use the Google AJAX Language API to build a live translator that allows us to translate text from one language into the other – and that almost on the fly.
Check out the demo here: DEMO
Here is the jQuery part:
(function($) {
$.fn.translate = function(options) {
var opts = $.extend({}, $.fn.translate.defaults, options);
return this.each(function() {
$this = $(this);
$("select#_from option[selected]").removeAttr("selected");
$("select#_from option[value='en']").attr("selected", "selected");
$("select#_to option[selected]").removeAttr("selected");
$("select#_to option[value='es']").attr("selected", "selected");
$('#content',$this).val("");
$(document).keypress(function(e){
if(e.which == 13){
$.fn.translate.initialize();
$("#content").val("");
}
});
$('#_from',$this).change(function(e){
$.fn.translate.defaults._from_lang = $(this).val();
});
$('#_to',$this).change(function(e){
$.fn.translate.defaults._to_lang = $(this).val();
});
});
};
$.fn.translate.initialize = function() {
var content = $('#content');
var text = $("#content").val();
google.language.translate(text, $.fn.translate.defaults._from_lang, $.fn.translate.defaults._to_lang, function(result) {
var translated = $("#translation");
var translated_original = $("#translation_original");
if (result.translation) {
(translated.html() != "")?translated.append("
"+result.translation):translated.append(result.translation);
(translated_original.html() != "")?translated_original.append("
"+text):translated_original.append(text);
}
else{
(translated.html() != "")?translated.append("
"+text):translated.append(text);
(translated_original.html() != "")?translated_original.append("
"+text):translated_original.append(text);
}
});
}
$.fn.translate.defaults = {
_from_lang : 'en',
_to_lang : 'es'
};
})(jQuery);
Note that this is just a demo. Not all the languages that are supported by the Google AJAX Language API are included here.
Enjoy!
Tiny break: 📬 Want to stay up to date with frontend and trends in web design? Subscribe and get our Collective newsletter twice a tweek.
Hello from Russia!
Can I quote a post in your blog with the link to you?
Privjet!
Of course you can do that!
Greetings
When using the Google API’s, you have to make sure you show Google branding, otherwise you are breaching the TOS of using the API’s.
To do so, add google.language.getBranding(‘branding’); inside the $().ready();
Hi. Thanks very much for putting this together! I am currently helping my 9 year old son to build his first website. He would love to include your live translator but would like to be able to use all the languages the google api allows rather than the shorter selection you have used here. Unfortunately however although I have read through the api several times I cannot work out how to ammend your jquery to include all the languages (sorry, I am very new to javascript). So we would be very greatful for any help. Many thanks!
With the exception of the Translate v2 API, which is now available as a paid service, the APIs included in this family have all been deprecated. See the documentation for each API for details.