I got an email this morning from CodeProject with a link to the Google api for language translation. I taught it was interesting so i decided to start exploring it and created 3 demos/examples here:
- Translate language on page load
- Translate language as you type
- Translate to a specific language
What i plan to do when i get some free time is to enable users to translate this site into their own language by clicking on their country flag.
Note: You can download the source code at the end.
Demo 1
English Text:
This text will be translated on the page load to Spanish.
Translation:
Code:
JavaScript
// This changes the text on the page load
google.load("language", "1");
function
initialize()
{
google.language.translate(document.getElementById("text1").innerHTML , "en", "es",
function(result) {
if
(!result.error)
{
var
container = document.getElementById("translation1");
container.innerHTML =
result.translation;
}
});
}
google.setOnLoadCallback(initialize);
HTML
<script src="http://www.google.com/jsapi"
type="text/javascript">
</script>
<b>English
Text:</b><br />
<div id="text1">
This text
will be translated on the page load to Spanish.
</div>
<br /><b>Translation:</b><br />
<div id= "translation1"> </div>
Demo 2
As you type in the text in the text box, the language will auto translate below into Spanish.
NOTE: you should alwas put a space after the last word for it to work correctly
Type english Text:
Translation:
Code:
JavaScript
//This will translate the textarea as you type
function
TranslateAsYouType()
{
google.language.translate(document.getElementById("txtBox1").value, "en", "es",
function(result) {
if
(!result.error)
{
var
container = document.getElementById("translation2");
container.innerHTML =
result.translation;
}
});
}
HTML
<script src="http://www.google.com/jsapi"
type="text/javascript">
</script>
<b>Type english Text:</b><br />
<textarea cols='40'
rows='3' id='txtBox1' onkeypress='TranslateAsYouType()'></textarea>
<br />
<b>Translation:</b>
<div id="translation2">
</div>
Demo 3
The following text will get translated to the language of your choice
French |
German |
Italian |
Portuguese |
Russian |
Spanish |
Dutch |
Arabic
English Text:
This text will be translated to the language of your choice.
Translation:
Code:
JavaScript
//This function will translate to the selected language that is passed
function
TranslateTo(lang)
{
google.language.translate(document.getElementById("text3").innerHTML, "en", lang, function(result)
{
if
(!result.error)
{
var
container = document.getElementById("translation3");
container.innerHTML =
result.translation;
}
});
}
HTML
<script src="http://www.google.com/jsapi"
type="text/javascript">
</script>
The
following text will get translated to the language of your choice<br />
<a href="javascript:TranslateTo('fr')">French</a> |
<a href="javascript:TranslateTo('de')">German</a> |
<a href="javascript:TranslateTo('it')">Italian</a> |
<a href="javascript:TranslateTo('pt-PT')">Portuguese</a> |
<a href="javascript:TranslateTo('ru')">Russian</a> |
<a href="javascript:TranslateTo('es')">Spanish</a> |
<a href="javascript:TranslateTo('nl')">Dutch</a> |
<a href="javascript:TranslateTo('ar')">Arabic</a> |
<a href="javascript:TranslateTo('zh')">Chinese</a> |
<a href="javascript:TranslateTo('zh-CN')">Chinese
Simplified</a> |
<a href="javascript:TranslateTo('zh-TW')">Chinese
Traditional</a> |
<a href="javascript:TranslateTo('ko')">Korean</a>
<br /> NOTE:Some will only
work if the language pack is installed on the users browser
<br /><br />
<b>English Text:</b><br />
<div id="text3">
This text
will be translated to the language of your choice.
</div>
<br /><b>Translation:</b><br />
<div id= "translation3"> </div
Download: Translation.zip (2KB)
Links:
064c7e6e-3a65-40d4-80ee-ba0c12d9c6f7|5|4.6