Implementing the jQuery code and Translate plugin
First, edit your layout and add this above </head> (code number 1):
<script src='http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js' type='text/javascript'/>and this (code number 2):
<script type='text/javascript'>
$(document).ready(function(){
$.getScript('http://jquery-translate.googlecode.com/files/jquery.translate-1.3.2.min.js', function(){ //when the script is loaded
$.translate(function(){ //when the Google Language API is loaded
$.translate().ui('select', 'option') //generate dropdown
.change(function(){
$('#translateit').translate( 'en', { //revert to english first
not: 'select, pre'
})
.translate( 'en', $(this).val(), {
not: 'select, pre',
async: true,
toggle: true,
walk: false
});
})
.val('English') //select English as default
.appendTo('#nav'); //insert the dropdown to the page
});
});
});
</script>The above code assumes your website is in english. If your website is in another language, change the bold text above into the primary language of your website (language code).
Adding the drop-down menu for inline ajax translate
Then, to add the menu (i used a drop-down menu for this example, for other methods of implementing this, see jQuery Translate wiki), simply add this in your menu / place where you want the drop down to show up:
<div id="nav"> </div>In that div's place, the translate drop-down menu will show up.
Tweaking the part of the website that we want to translate
Next, to be able to translate something, you need to enter your text in a div with the unique id "translateit" (or you can change it by modifying code number 2). This can be done by writing your posts in a "translateit" id, like so:
<div id="translateit">
<div class="postbody">
post content
</div></div>If you want to translate everything (but there's a 1000 or 2000 - don't remember exactly - character limit by Google Translate API) and not enter a unique div id, you can simply change the "#translateit" in the code number 2 from above, with "body". You can also exclude text from the translation. For instance, i excluded everything inside <code> and <pre>, like so:
not: 'select, pre',so alter that part of the code number 2 to exclude the sections you want.
Example of jQuery AJAX Translate
Click for a demo.
For more tweaks and details, visit jQuery Translate wiki.
