TranslateMethod - jquery-translate - $( ).translate([sourceLang,] destLang [,options]) - jQuery dynamic translation plugin

TranslateMethod

$( ).translate([sourceLang,] destLang [,options])
Featured

Updated Mar 11, 2011 by balazs.endresz

List of available languages: http://code.google.com/apis/ajaxlanguage/documentation/reference.html#LangNameArray

If you don't specify a source language it will be automatically detected. But in many cases it's better to set that too. You can use the long name of the language or just the language code ('en' or 'english') and it isn't case-sensitive either.

$(function(){ //on document ready
  //to german from any language:
  $('body').translate('de');
	
  //from english to german:
  $('body').translate('en', 'de');
	
  //with options:
  $('body').translate('de', { toggle: true } );
  $('body').translate('en', 'de', { toggle: true } );
  
  //you can set the languges in the options too (setting as a separate parameter like above overrides it):
  $('body').translate( { from: 'en', to: 'de', toggle: true} );

  //as of v1.4 you can also pass a complete callback as the third argument:
  $('body').translate('en','de', function(){ alert("complete"); });
})

Options

Override defaults with $.fn.translate.defaults:

  $.fn.translate.defaults = { returnAll:true };
  //or
  $.fn.translate.defaults.returnAll = true;

These are the default values after each option:

fromOriginal: false / default changed to true in v1.4 /

use only if you have specified a source language
if you have translated elements to a language and want to translate them again this will force the plugin to use the original text (from the language you specified to translate from) as the source text
toggle and data will be true automatically

toggle: false

true: all translation will be cached (stored with $.data) and used if it's found, or translated to otherwise
if the text on the page doesn't change you can set it to true: this will return the translation immediately if it was stored before

async: false

this prevents the browser from freezing on larger sites by executing each DOM filtering iteration with a delay (it doesn't affect the request sent to Google)
you can set the length of the delay in ms, setting it true means 2 ms
the returnAll option won't work, it will return the jQuery object immediately

data: true

store source and translated text with $.data
$(el).data("translation")[langCode][type] where type is either "html" or the name of an attribute:
$("p").data("translation")["en"]["html"] or $(":input").data("translation")["en"]["value"]
changed in 1.4.0: "$val" and "$html" is used instead of "value" and "html" ("attribute" can be used more safely)

walk: true

true: finds elements having textnodes and translates only their content; on very large and complex pages this might take some time (see the async option)
false: translates the given elements' .html(), generates more requests
this requires the jQuery.fn.nodesContainingText plugin (included along with other modules)

returnAll: false

true: returns all elements, which have textnodes (see the walk option)
using .end() after this returns the caller object
false: returns the caller jQuery object

not: ""

selector - elements to leave out (script, noscript, style, object and iframe elements will be omitted either this is set or not)
doesn't work for elements having textnode siblings, as the whole content of their parent node will be translated (see the walk option),
in this case, you have to add a notranslate class to those elements before the translation: $(selector).addClass("notranslate"); $("body").translate(...);
alternatively you can use the .translateTextNodes() method instead, see: TextnodeTranslatorIntegration

replace: true

replace original text on the page with the translation

rebind: true

rebind event handlers for elements translated as html (see the walk option)

subject: true

if some text is given, only that html attribute will be translated

altAndVal: true

translate alt and :button,:text,:reset's value attribute too when translating text/html
these don't have any textnodes, so they can be processed along with other nodes if the subject option is true

setLangAttr: false

store destination language code in the html lang attribute for each element
true: set the 'lang' attribute
false: don't set any attribute
string: set that html attribute

comments: false

removed in v1.4
true: translates comments too when an element's .html() is tranlated,
false: removes the comments, when an element's .html() is tranlated
comments might be only translated if they have textnode siblings (see the walk option)

options added in v1.4

stripWhitespace: true
stripScripts: true
stripComments: true
limit: 1750

here you can specify how long the url-encoded text should be that is sent to the Language API
the whole url must be less than 2000 characters long including the domain name and other parameters
you can increase this value slightly, but if it gets too large some requests will fail

separators: /\.\?\!;:/

a regex that specifies the end of a sentence

parallel (added in 1.4.3)

requests can be sent in parallel to speed up the translation
false or zero: requests are sent after each response is recieved
true: requests are sent all at once (can hang larger pages)
number: the delay in milliseconds after each request is initiated

trim: true (added in 1.4.7)

the translation always contains some extra whitespace which is removed by default with $.trim, setting this option to false keeps the spaces

alwaysReplace: false (added in 1.4.7)

by default if the translation is in the same language as the current text, then it's not replaced (see issue #38 )
most likely you also have to set toggle: false, fromOriginal:false

Callback functions

These are passed to the options too. You can use the internal methods after this inside these, and the object's properties are also available:

this.i //the index of the current element
this.elements (array) // filtered elements, this.elements.end() returns the caller object (unfiltered)
this.translation (array)
this.source (array)
this.options
this.from //langCode
this.to //langCode

$('body').translate('en', 'de', {
  each: function(i){
    console.log( this.translation[i] ) // i==this.i
  }
})

start: function(){}

arguments: elements (jQuery object), from, to, options
these are the filtered elements if the walk option was true (use .end() to return the original set)
v1.4.0: arguments: filtered elements, source, from, to, options

error: function(){}

google's results.error object will be passed (an error stops the script completely)
if you stop the translation with the internal stop() method it returns {message:'stopped'}

each: function(){}

executes after each element was translated
arguments: i, DOMelement, translation[i], source[i], from, to, options

complete: function(){}

arguments: original elements, filtered elements, translation (array), source (array), from, to, options
v1.4.0: the original elements object was removed, use elements.end() instead
the from argument is the sourceLangCode from the last part of the translation (if it was detected then that one)

onTimeout: function(){}

the requests won't be aborted automatically (use this.stop() inside it if you want to stop it)
arguments: filtered elements, from, to, options
v1.4.0: arguments: filtered elements, source, from, to, options
use elements.end() to get the original set of elements

timeout: 0

time after the onTimeout will fire (in ms)

In the comment below you may notice the copyEvents plugin: this is no longer needed, a bit different function is included in the plugin.

Comment by fred.chr...@gmail.com, Sep 10, 2008

Hi,

Many thanks for your response on the official Jquery Issue.

I'm sorry, but I've some trouble with the 'replace' option. I'm a beginner in JS (it's not a shame or an excuse ;) ) and I would like to learn the "how-to".

There is a sample code :

<html>
<head>
    <script type="text/javascript" src="js/jquery/jquery-1.2.6.min.js"></script>
    <script type="text/javascript" src="js/jquery/plugin.translate.js"></script>
    <script type="text/javascript">
    	$(document).ready(function(){	
			// translate to english all ID col*
			$('#translationEN').click(function(){
								$('[@id*=col]').translate('en', {
								start: 		function(){$('#translationProgress').show()},
								complete:	function(){$('#translationProgress').hide()}
								});
			});		
						
			// I would like to comeback to the original text, but... i don't understand how to proceed :/
			$('#translationFR').click(function(){
								$('[@id*=col]').translate('', {
								replace:	false // Uh :| I suppose it's not the good way...
								});
			});
		});
    </script>
</head>
<body>

<div id="translate">
	<a href="#" id="translationFR">FRANCAIS</a> | <a href="#" id="translationEN">ENGLISH</a>
    <span id="translationProgress" style="display:none">Translation in progress, please wait...</span>
</div>

<div id="col-1">Ce plugin est vraiment pratique et simple d'utilisation.</div>
<div id="col-2">Je félicite son auteur !</div>

</body>
</html>

Thanks in advance for your explanation. Best regards.

Comment by project member balazs.endresz, Sep 10, 2008

function toggleTransl(el, to){
  var $el=$(el),
    a=$el.data('translation.'+to+'.html'),
    b=$el.data('translation.'+to+'.value');
  if(a)
    $el.html(a);
  if(b)
    $el.val(b);
}

If you set data:true (stores the original text and translation) then you can use this function to toggle to a language that was translated before. So this goes inside your click event:

$('[@id*=col]').find('*').andSelf().each(function(){
  toggleTransl(this, 'fr')
});

I hope this will work! (Such functionality will be definitely included in a future release.)

Comment by fred.chr...@gmail.com, Sep 11, 2008

Hi,

Your function work very well with data:true. It's very powerful :] This Jquery plugin is a great job, I'm impressed, really.

A $().untranslate([sourceLang,] destLang[,option]) function in the future ? ;) I hope too ;)

Many thanks !

Comment by project member balazs.endresz, Sep 12, 2008

Thanks! I'm glad you like it! I've just implemented a toggle option that will automatically do this, but it will be only available in the next release. It has been pretty much refactored and needs a bit more testing, but hopefully I can post it in about a week.

Comment by fred.chr...@gmail.com, Sep 14, 2008

Great. I've put the toggleTrans() in your lib until your futur release. I keep an eye on it ;)

Comment by project member balazs.endresz, Sep 22, 2008

In v1.2.x you just have to set the toggle option, and you can restore any translation that was stored before (i.e. only if the data or toggle option was true when it was translated).

$(selector).translate( destLang, {toggle:true} );

Another important change is that $.translate.ready=function(){ ... } won't work, use $.translate().ready( function(){ ... } ) instead! But in most cases it's not necessary, so it's enough to put the code in $(document).ready().

If you are using a method of $.translate() put it in $.translate().ready() too. Some examples:

$(document).ready(function(){
  $('body').translate('english');
    //this will work 
    //returns a jQuery object and translates the text when the Language API is loaded

  $.translate( 'some text', { complete:function(){} } );
    //this will work too
    //returns an internal object and translates the text when the Language API is loaded

  $.translate().getLanguages();
    //this won't (always) work!
    //the Language API may not be loaded, the return value cannot be determined

  $.translate().ready(function(){
    $.translate().getLanguages() //this will work
  })

})

Comment by ag...@21productions.com, Sep 24, 2008

Been using this for click and translate and it's amazing! I have been having a problem getting it to work on load though without clicking (Would be perfect if I could get it to just do a simple translate of a large paragraph after the page loads). Here's what I've been trying with (the click works, but the on page load doesn't):

<script type="text/javascript" src="jquery-1.2.6.min.js"></script> <script type="text/javascript" src="jquery.translate-1.2.1.min.js"></script> <script type="text/javascript">

function google_translation(from,to){
$('#test').translate(from,to, { not: 'select' })
}

</script> <script type="text/javascript">

$(document).ready(function(){
$.translate.ready=function(){
google_translation("en,"es");
}
})

</script>

</head> <body>

<div id="test"> LOTS OF CONTENT HERE </div>

</body> </html>

Comment by project member balazs.endresz, Sep 24, 2008

In v1.2 you don't need the ready function for such thing (which was changed too). Just read the comment above :)

Comment by ag...@21productions.com, Sep 24, 2008

Played around with the different examples on your post above, and finally got it to work like a charm. Amazing work, kudos!

Comment by www.gree...@gmail.com, Nov 4, 2008

I use a drop down menu to choose the language:

	<select id="langsel" name="selector">
			<option  value="">Select a language</option>
			<option  value="fr">French</option>
			<option  value="de" >German</option>
			<option  value="el">Greek</option>
		</select>

and in the head I put

		$('#langsel').change(function(){
			$('div#container').translate( 'en', $(this).val(), {
				not:		'select', 
				async: 	true,
				toggle:	true
			})
		})

to translate the contents of the div with id="container".

When I choose a language for the first time e.g. french the result is correct but if I want to translate the text again to a different language e.g. greek the result is a combination of words in both languages greek and french. What am I doing wrong?

Comment by project member balazs.endresz, Nov 4, 2008

I presume you are using the latest version (1.2.x), the toggle option isn't available in 1.1.x. But it's a good question, as it translates from the current language unless the desired translation is in cache. I used to reload the page with history.reload() to get back to the original text, but now you can do that with "translating" back to the original language before the actual translation:

$('#langsel').change(function(){
  $('div#container').translate( 'en', { //revert to english first
    not: 'select', 
    async:  false,
    toggle: true,
    returnAll: true
  })
  .translate( 'en',  $(this).val(), {
    not: 'select', 
    async:  true,
    toggle: true,
    walk: false
  });
})

Note, that the async option is set to false when reverting the translation, it might work with async:100 but browsers can't delay execution precisely (Firefox 3 might be doing it well, but in other browser it's not guaranteed to work). So if async isn't set to false the languges in each element can be mixed up.

And another trick: these above are chained: you can do that due to the options added to each one (the first one returns all textnodes: returnAll:true so the second one doesn't have to parse the DOM again, and it's forced not to do that by walk:false ). But it's not necessary, just a bit speedup.

Also, there could be another option to use a language in the cache to translate from, so that you don't have to restore the translation manually -- I think that goes to the next release.

Comment by ag...@21productions.com, Nov 5, 2008

Translation has been working GREAT for most of the languages/pages I've been doing for big text in the thousands of characters. I did run into a problem that the translation works for chinese (zh) but not for chinese simplified (zh-CN) or traditional (zh-TW). Is it possible to use traditional? Really need it for a certain website.

Comment by project member balazs.endresz, Nov 6, 2008

In the function that converts to language code I expected all language codes to be lowercase, which they're apparently not. It only affets 1.2.x because it accepts whole language names as well, not just language codes like: $(...).translate('chinese'). Now fixed in v1.2.3.

Comment by aboost...@gmail.com, Nov 6, 2008

This looks very promising for my needs, but I'm finding that it conflicts with the Prototype library. It works fine if I don't include Prototype, but when I do, I get an 'object is undefined' error on line 725 of the 1.2.3 build. Any ideas?

Comment by project member balazs.endresz, Nov 7, 2008

Interesting, the full 1.2.3 is "only" 703 lines long. I also tried it with Prototype and it seems to be working fine. Maybe a link to the site?

Comment by aboost...@gmail.com, Nov 7, 2008

Thanks for the quick reply. It turns out that it was a conflict with scriptaculous, not prototype. I can probably work around that easier, so that's okay. I do have a different problem now. The translation seems to stop midway through the page that I'm trying to translate. You can see it here: http://boostani.dev.wiserearth.org/user/Honore login: soldemo password: demo

If you select Spanish from the Other Languages menu in the top right, then it should translate everything under the gray header, but it stops toward the end of the left navigation bar. Is this a Google limitation, or is the javascript running into problems?

Comment by project member balazs.endresz, Nov 8, 2008

I looked into it and it seems that Adblock Plus (a Firefox plugin) causes the API to fail silently if you have some specific words in the text: in this case it is "responsible" in $('div#view_relation') on your site (this is where the translation actually stops for me). Sounds weird doesn't it? Here's a small script I tested in other browsers and Firefox 3 with Adblock disabled and this way it's working, but not with Adblock:

google.language.translate("responsible",'en','es',function(r){console.log(r.translation)})

I experienced this with Firefox 2 too, but it disappeared when Firefox 3 came out, now it's here.

But it's not everything: if you want to translate $('div#view_relation').html() you get a bad request error:

var t=$('#view_relation').html().substr(0,2000); //without the word "responsible"
//.substr(0,2500) with Adblock -> nothing happens, no error, no request
google.language.translate(t,'en','es',function(r){console.log(r.translation)})

But on your site it's working if you diasble Adblock: at least it sends all the requests, but there seems to be a problem when the plugins tries to replace the text. But by manually replacing the content we can get the whole page translated:

var t, j=jQuery('#page').translate('en','es',{returnAll:true, limit:1000, 
  each:function(){  t=this; },
  complete:function(){
    var tr=jQuery(t.rawTranslation)
    j.each(function(i){
      jQuery.translate().replace(jQuery(this), tr[i], {replace:true, rebind:false})
    })
    jQuery('#indicator').hide()
  },
  start:  function(){   jQuery('#indicator').show() },
  error:  function(){   alert('error')   }
})

So this is a bug in the plugin, but now I don't really now what on earth causes it to fail on this text. The jQuery.translate().replace() in the script above is an internal function that replaces the content but somehow it doesn't seem to work automatically, and without the rebind:false option it fails too. But if you call it manually on complete it works.

Comment by project member balazs.endresz, Nov 8, 2008

Oh, and one more weirdness: google silently raised the character limit to 5000: http://code.google.com/apis/ajaxlanguage/terms.html but I never managed to get it working above about 1000: it returns two new types of errors: sometimes a response with 200 OK header containing an error message, and sometimes "XML tag name mismatch (expected meta) </head>\n". So be careful when raising the limit above 1000!

Comment by insitudi...@gmail.com, Jan 28, 2009

Hello! The plugin is great! Thanks! I have a problem, I need to set a cookie to mantain the language through different pages, can you help me with this..?

Here's my code:

$('#language').change(function(){
$('body').translate( 'es', {
not: 'select', async: false, toggle: true, returnAll: true
}) .translate( 'es', $(this).val(), {
not: 'select', async: true, toggle: true, walk: false
});
})

}) </script>

and the html:

<form>

<select id="language" name="selector">
<option value="es">Español</option> <option value="en">English</option>
</select>

</form>

Thanks in advance!

Comment by project member balazs.endresz, Jan 28, 2009

Hello, here's an example showing how to do that: http://jsbin.com/ofema/edit I've just put this to the Links section on the main page.

The way you do it in your example isn't necessary any more, it's handled by the fromOriginal option, as you can see that in the example.

Comment by insitudi...@gmail.com, Jan 29, 2009

Thank you!

Comment by kenji%lo...@gtempaccount.com, Feb 9, 2009

Hello, I need a help on how to use "$.data".

I'm trying to get this script to work. But, I get nothing in "#translated". Do you have any idea about what' wrong with this ? If I use this.translation0?, then it works, but I want to get html tags as well.

$(document).ready(function(){

	$("#translate").click(function(){
		$('#original').translate('en', 'ja', {
			data: true,
			replace: false,
			complete: function() { $('#translated').html($(this).data('translation.ja.html'));}
		});
	});
});
</script>
</head>
<body>
	
<div><a href="#" id="translate">Translate</a></div>
<div id="original"><ul><li>Hello</li></ul></div>
<div id="translated"></div>

Comment by project member balazs.endresz, Feb 10, 2009

The this inside the callback functions refers to the current object, not to an element. You can get the original element by the first argument, but that doesn't contain any data only if you set walk:false because by default the data is attached to each element containing text not the root element. So you could do this:

walk:false,
complete: function($elems) { 
  $elems.html( $elems.data('translation.ja.html') );
}

Comment by kenji%lo...@gtempaccount.com, Feb 10, 2009

Thanks, balazs. It worked!

Now, there is another problem. not: doesn't work anymore. I guess it's because of walk:false. There are parts in the text I don't want to translate. What would be the best way to handle this?

Comment by project member balazs.endresz, Feb 10, 2009

Sure!

$("#translate").click(function(){

$('#original').translate('en', 'ja', {
data: true, replace: false, not: '', complete: function($elems, $elemsAll) {
$elemsAll.each(function(i){
$(this).html( $(this).data('translation.ja.html') );
});
}
});

});

Comment by kenji%lo...@gtempaccount.com, Feb 11, 2009

Thanks for the quick answer, balazs.

I tried the code above but it seems to behave like replace:true, that is, the translation goes to the same location as the original text. I want to place the translation to a different location.

So, I tried the code below with and without walk:false, but it didn't filter tags specified with not:.

$elemsAll.each(function(i){
    $("#translated").html( $(this).data('translation.ja.html') ); 
});

Comment by project member balazs.endresz, Feb 11, 2009

Ah, ok, that makes more sense :)

The not option won't work in cases like when you want to exclude all anchor tags from some text in a paragraph because then the whole paragraph will be translated. The code below translates the innerHTML of #original and puts the translation to #translated but nothing could be removed:

$("#translate").click(function(){
  $('#original').translate('en', 'ja', {
    walk: false,
    replace: false,
    complete: function() {
      $('#translated').html( this.translation[0]  );
    }
  });
});

What you can do is to clone $('#original'), remove the elements you don't need and translate it afterwards:

$('#original')
  .clone()
  .find('*')
  .each(function(){
    if(this.tagName==='A') //could be $(this).is("a") but that can be much slower on many elements
      this.parentNode.removeChild(this);
  })
  .end()
  .translate('en', 'ja', {
    walk: false,
    replace: false,
    complete: function() {
      $('#translated').html( this.translation[0]  );
    }
  });

Hope that works!

Comment by support%...@gtempaccount.com, Feb 17, 2009

Thanks, balazs! I will try what you suggested.

Comment by project member balazs.endresz, Mar 12, 2009

Hi, it's 'translation.ru.html'!

Comment by ronck...@gmail.com, Apr 26, 2009

I'd like to take a page in spanish, and produce a new page with each spanish paragraph being followed by the same paragraph in english. If I use the replace:true option, I just get the english only. Has anyone done this? I can translate the spanish one <p> </p> at a time, but how do I put the translated english paragraph below the spanish paragraph?

Comment by project member balazs.endresz, Apr 26, 2009

Try it with these options:

replace: false,
each: function(i, el, tr){
  $(el).clone().html(tr).insertAfter(el);
}

Comment by ronck...@gmail.com, Apr 26, 2009

wow thanks, that worked just fine!

Comment by javier....@gmail.com, Apr 29, 2009

Hi:

How i can hide original text and show when is translated?

Comment by project member balazs.endresz, Apr 29, 2009

@javier.tia: I'm not sure if you meant something else but the examples at the top of this page do just that!

Comment by javier....@gmail.com, Apr 29, 2009

that is right, i look after comment and i found it the answer. Thank you.

Comment by nimesh1...@gmail.com, May 6, 2009

Hi,

I have a text that I would like to translate in russian. The text has custom tags and has multiple <BR> tags. The API behaves weird with <BR> tags. Are there known issues with <BR> tags.

Text to be translated:

<INPUTANSWER PARTID='1'> <IMG SRC='its://Workshop/ADSK Cert Exams (External)/2010/Sample Translations/INV10.P.07.01c.gif' SIZE='0' SRC_CETEMP="../item_shared/getresource.aspx?cmd=media&urid=r5796927/ENU"><BR><BR><P>Open the file <I>DP-LCD-17.iam</I>. Follow these steps.</P> <P STYLE="MARGIN-LEFT: 0.5in; TEXT-INDENT: -0.25in">1.<SPAN STYLE="FONT: 7pt 'Times New Roman'">      </SPAN>Place a <STRONG>90 degree</STRONG> explicit angle constraint to the inside faces of <STRONG>DP-1007:1 </STRONG>and<STRONG>DP-1006:1</STRONG> as shown.</P> <P STYLE="MARGIN-LEFT: 0.5in; TEXT-INDENT: -0.25in">2.<SPAN STYLE="FONT: 7pt 'Times New Roman'">      </SPAN>Drive this angle constraint between <STRONG>90 and 100 degrees</STRONG> with an <STRONG>increment</STRONG> <STRONG>of 0.125 degrees.</STRONG></P> <P> </P> <P>At what angle is there first interference? <ANSWER ID='1' SIZE='6' TYPE='2'></P><P> </P></INPUTANSWER>

Thank you for your help in advance, -Nimesh

Comment by project member balazs.endresz, May 6, 2009

@nimesh1983: What happens exactly?

Sometimes inline tags can be messed up during the translation because it's not always possible to determine where they should be in the text in an other language. That's what happens if you try the ui extension example: http://code.google.com/p/jquery-translate/wiki/Extensions further explained in the comments there.

But in your case the problem might be only that you don't close the br tags properly, they should look like this: <br/>!

Comment by nimesh1...@gmail.com, May 6, 2009

Ihave

//Make sure that the language api is loaded $.translate().ready(function(){
//Make sure that the language is translatable
if($.translate().isTranslatable(targetLanguageCode))

{
$('#TexttobeTranslated?').translate('en',targetLanguageCode, {data: true, replace:false,walk:false,not:'BR', complete: function(){

$('#TexttobeTranslated?').data('translation.'+targetLanguageCode+'.html'); }

When I try 2 translate text above, i don't get anything back. Thanks!

Comment by nimesh1...@gmail.com, May 6, 2009

Also I get no translation back if I have something like

Text to be translated:

<div><span>what are you doing?</span></div>

Comment by project member balazs.endresz, May 6, 2009

@nimesh1983: The replace option is set to false, which means it doesn't modify the page at all, and in the callback you do nothing with it either.

I'll look into the other thing today, there seems to be some problem with parsing the translation.

Comment by project member balazs.endresz, May 7, 2009

@nimesh1983: Try the new (1.3.3) release, the issue with translating that small div should be fixed now.

Comment by nimesh1...@gmail.com, May 7, 2009

Thank you balazs for your quick response. I got 1.3.3 and it looks like it fixed it. Actually I am setting $('#TexttobeTranslated??').html($('#TexttobeTranslated??').data('translation.'+targetLanguageCode+'.html')); in the callback. I forgot to copy that. Thank you for your help, -Nimesh

Comment by ronck...@gmail.com, May 7, 2009

You helped me figure out how to put each paragraph of the translated text after the original text. Can you tell me how to make either the original or the translated paragraphs appear bold? In other words, how can I wrap it in <b></b> tags?

this is the example you gave me:

replace: false, each: function(i, el, tr){

$(el).clone().html(tr).insertAfter(el);

}

Comment by project member balazs.endresz, May 8, 2009

@roncking: .css("font-weight","bold")

Comment by ronck...@gmail.com, May 8, 2009

I'm sorry, but I don't understand how to use this. I want either the original text OR the translated text to be bold so that it's easy to see the transitions between the two. So where do I insert the .css("font-weight","bold")?

Comment by umair.ch...@gmail.com, May 17, 2009

Impressive work. I can now translate it into almost all languages mentioned on http://code.google.com/apis/ajaxlanguage/documentation/reference.html#LangNameArray. But when i try it for Urdu 'ur'. It does not work. Do you have any idea what is the reason? Arabic 'ar' is working fine which is almost same as Urdu language.

Comment by project member balazs.endresz, May 18, 2009

It's just not yet translatable:

google.language.isTranslatable("ur") -> false

$.translate.isTranslatable("ur") -> false

Comment by nimesh1...@gmail.com, Jun 4, 2009

Hey Balaz,

When I get the translated text back from API, It puts Jquery ID in HTML Tags. How do I remove it?

Example: <P jQuery1244131196711="10">

Was ist die häufigste Antwort auf die Multiple-Choice-Fragen? Ich denke, das ist ziemlich offensichtlich. Aktualisieren </P>

Thank you, -Nimesh

Comment by project member balazs.endresz, Jun 4, 2009

@nimesh1983: Those attributes are always present if you have any data or events associated with that element. You would have to go through all the attributes of the element and remove the one that starts with "jQuery". But before the translation they can't be removed this way because it would destroy possible data or events on the element. What I can think of is removing them with a regex from the string, which will be translated:

$("").translate("en", {
  start: function(){
    this.rawSource = this.rawSource.replace(/ jQuery\d+\="\d+"/, '');
  }
});

Actually it seems to be rather harmless, maybe I'll put in the next version.

Comment by nimesh1...@gmail.com, Jun 4, 2009

So Do I call this piece of code after the translation is returned from API? Thank you, -Nimesh

Comment by project member balazs.endresz, Jun 4, 2009

No, if you look at it closely, it's called in the start callback, it's just an extra option. It will remove the attributes before the translation but not from the DOM elements but from the text that will be translated.

Comment by nimesh1...@gmail.com, Jun 4, 2009

Thank you very much for your prompt response Balazs... -Nimesh