If you try the first example on http://docs.jquery.com you may notice that the last part of the page won't be translated, because there's an h2 element that contains this html:

<a href="/UI" title="UI">jQuery UI</a> Reference

and after the translation it becomes

<a href="/UI" title="UI">jquery UI-Referenz</a>.

I have no idea why this happens, but it will break the plugin as it stores the translation on the h2 element via $.data and after one translation it will search the inner element (the anchor tag) not the h2 and finds nothing as the translation was stored on it's parent.

Here's the bug report on the above issue, please give it a star: http://code.google.com/p/google-ajax-apis/issues/detail?id=149

I've just realized that Google has fixed this a while ago but oddly enough it has been replaced with a jQuery bug that caused almost the same error at exactly the same place on the page.

Now it's been fixed in the plugin: http://code.google.com/p/jquery-translate/issues/detail?id=10

Hi there,

Can i have a working sample on using progressbar extension?

Try it here by running the code below in Firebug:

$.getScript('http://jquery-translate.googlecode.com/files/jquery.translate-   *LATEST VERSION*   .min.js', function(){ 
  $.translate(function(){ 
    $.translate.ui('select', 'option') 
      .change(function(){ 
        $('body').translate( 'english', $(this).val(), {
          not: '.option, #demo, #source, pre, .jq-translate-ui', 
          fromOriginal:true,
          each: function(){
            this.progress("#progressbar");
          }
        })
      })
      .val('English')
      .appendTo('#dock');
    
    $.translate.getBranding().appendTo('#jq-primaryNavigation');

  });
});

If you switch back to English there's an error message, because the html structure changes during the translation (as described a few comments before). It's not so common at all but maybe I should make it fail silently, as there's nothing I can do with that. Anyway, it's unrelated to the progressbar.

Actually the problem here is slightly different: in the translation two spans with some text between them get merged into one span element. And there's another issue when the progressbar doesn't move if the translation is restored from $.data. I'm fixing these now.

Fixed in v1.3.7.

I need to set a cookie to mantain the language through different pages and need to have different languages in a .ui('select','option') Live link: http://angelsinaction.tv/aia_tv.php Can you please figure this out? Thanx in advance.

@tataijal: Regarding the cookies check the example on the main page under the "links" section!

Using the UI extension with different languages is possible, but you have to override the $.translate.getLanguages function to do that, but it's not really a clean solution, and it will be addressed in the next major version. Now, I'd say you're better off with creating a new function by modifying the $.translate.ui function a little:

$.translate.myUI = function(a, b, c){
  var languages = $.translate.getLanguages(true, ["en", "de", "fr"]) //here you can filter the languages
  var str='', cs='', cl='';
  if(c){ cs='<'+c+'>'; cl='</'+c+'>'; }
  $.each( languages , function(l, lc){
    str+=('<'+b+'>'+cs+l.charAt(0)+l.substring(1).toLowerCase()+cl+'</'+b+'>');
  });
  return $('<'+a+' class="jq-translate-ui">'+str+'</'+a+'>');
}

Sir, I checked the link with 'ul','li','a'. I just want this to be done with 'select','option'. Please help me.

Sir, I'm also sending the code I tried with 'select','option': <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script> <script src="http://jquery-translate.googlecode.com/files/jquery.translate-1.2.6.min.js"></script> <script src="http://stilbuero.de/jquery/cookie/jquery.cookie.pack.js"></script> <script> jQuery(function($){ //when DOM is ready

$('body').css('height','900px');

$.translate(function(){ //when the Google Language API is loaded

function translateTo( destLang ){ //this can be declared in the global scope too if you need it somewhere else

$('body').translate( 'english', destLang, { //translate from english to the selected language

not: '.jq-translate-ui', //by default the generated element has this className fromOriginal:true //always translate from english (even after the page has been translated)

});

}

//you can generate other controls as well, not just a dropdown: $.translate().ui('select','option')

.appendTo('body') //insert the element to the page .css('background-color','white') .find('a') .attr('href', '#') //to change the mouse pointer .change(function(){ //when selecting another language

translateTo( $(this).text() );

$.cookie('destLang', $(this).text() ); // set a cookie to remember the selected language

return false; //prevent default browser action

})

var destLang = $.cookie('destLang'); //get previously translated language

if( destLang ) //if it was set then

translateTo( destLang );

}); //end of Google Language API loaded

}) //end of DOM ready </script>

@tataijal: If you are using a dropdown then you have to use .val() instead of .text() and the .find('a').attr('href', '#') part is unnecessary too, here's a corrected version: http://jsbin.com/exewe/edit

wow... nice project... but you know? I have some problems,

can I translate the <title> script with this translator?

tell me about this...

thanks

Of course: $("title").translate(...)