Translate Paragraph using jTextTranslate

Ability to translate our website's text to desired language provides more accessibility and control. It makes your website go global because users can read your website's paragraphs from the choice of language.

Today we are going to use jTextTranslate jQuery plug-in which you can download from here: http://tympanus.net/codrops/2009/11/30/jtexttranslate-a-jquery-translation-plugin/

Once downloaded, it's very easy to use this plug-in. Sample project includes a CSS, JavaScript file which you can include on page and we are good to go.

First create a page (.html or .aspx) and then add following scripts in head section:

<script type="text/javascript" src="http://www.google.com/jsapi"></script>

<script type="text/javascript">google.load("language", "1");</script>

<script src="jquery-1.3.2.js" type="text/javascript"></script>

<link rel="stylesheet" type="text/css" href="css/style.css" media="screen"/>

<script src="jquery.TextTranslate.js" type="text/javascript"></script>

 

After that we can write our jQuery code to call translate function of the plug-in:

<script type="text/javascript">

$(document).ready(function () {

$('#texttoConvert').translate();

});

</script>

 

We can define any paragraph or a div tag with id of "textToConvert" (shown above). So let's put our sample code inside div tag, along with other HTML:

 

<html>

<head>

<title>Language Test</title>

<script type="text/javascript" src="http://www.google.com/jsapi"></script>

<script type="text/javascript">google.load("language", "1");</script>

<script src="jquery-1.3.2.js" type="text/javascript"></script>

<link rel="stylesheet" type="text/css" href="css/style.css" media="screen"/>

<script src="jquery.TextTranslate.js" type="text/javascript"></script>

<script type="text/javascript">

$(document).ready(function () {

$('#texttoConvert').translate();

});

</script>

</head>

<body>

<div id="texttoConvert">

For XML Explicit is a very complex mode but it allows to present the data in any desirable format we want.

It can cause maintenance problem because queries can be very big and any change can be overwhelming.

One of the advantages of Explicit mode over others is we can output column values as CDATA. In Explicit mode a

parent child relationship is created between the rows of the same table. The format query incorporates is that

it has a tag and parent column. Let's go ahead and understand by example, similar to our prior article on XML we

will use AdventureWorks.

 

</div>

</body>

</html>

 

That's it, your page is ready to test, if you view your page in browser and click on refresh like button in front of your paragraph it will open a translate window and let you choose your language of choice:

Tags: , ,

jQuery