jQuery Translation

by Debiprasad

HTML

<div id="header">
	<div id="logo">
		<h1><a href="#">www.top-agences-com</a></h1>
		<h2><a href="http://www.freecsstemplates.org/">Les fables de la fontaine</a></h2>
	</div>
	<div id="menu">
		<ul>
		<!--
			<li class="active"><a href="#">home</a></li>
			<li><a href="#">photos</a></li>
			<li><a href="#">about</a></li>
			<li><a href="#">links</a></li>
			<li><a href="#">contact</a></li>
		-->	
		</ul>
	</div>
</div>
<!-- end header -->
<!-- start page -->
<div id="page">
	<!-- start content -->
	<div id="content">
		<!-- start latest-post -->
		<div id="latest-post" class="post">
			<h1 class="title">Le Corbeau et le Renard</h1>
<br>
			<div class="entry">
<p>Maître Corbeau, sur un arbre perché,<br>Tenait en son bec un fromage.<br>Maître Renard, par l'odeur alléché,<br>Lui tint à peu près ce langage :<br>Que vous êtes joli ! que vous me semblez beau !<br>Sans mentir, si votre ramage<br>Se rapporte à votre plumage,<br>Vous êtes le Phénix des hôtes de ces bois."<br>A ces mots le Corbeau ne se sent pas de joie ;<br>Et pour montrer sa belle voix,<br>Il ouvre un large bec, laisse tomber sa proie.<br>Le Renard s'en saisit, et dit : "Mon bon Monsieur,<br>Apprenez que tout flatteur<br>Vit aux dépens de celui qui l'écoute :<br>Cette leçon vaut bien un fromage, sans doute. "<br>Le Corbeau, honteux et confus,<br>Jura, mais un peu tard, qu'on ne l'y prendrait plus.</p>
    
				<h2>traduire en :</h2>
			
			
				<p> <iframe src="iframe.html"></iframe>  </p>

				<p>&nbsp;</p>
			</div>
		</div>
		<!-- end latest-post -->
		<!-- start recent-posts -->
		
		<div id="recent-posts">
			<div class="post">
				<h2 class="title">CSS Sprite - Country dropdown with flags</h2>

				<div class="entry">
					<p></p>
					<p><a href="menu-dropdown" target="_blank" >click here for see</a></p>
					<p><a href="menu-dropdown.zip" target="_blank" >click here for download</a></p>
				</div>
			</div>
		<div class="post">

				<div class="entry">
					<p></p>
					<p><a...

JavaScript

function set_translation_text(node) {
    for (var child = node.firstChild; child; child = child.nextSibling) {
        // don't translate style or script
        if (child.parentElement.nodeName == 'STYLE' || child.parentElement.nodeName == 'SCRIPT') {
            break;
        }
        if (child.nodeType === 3) { // text node
            if ($.trim(child.textContent) != '') {
                child.parentElement.setAttribute('transtext', child.parentElement.innerHTML);
                break;
            }
        }
        else if (child.nodeType === 1) { // element node
            set_translation_text(child);
        }
    }
}

$(document).ready(function () {
    // set text/html of all elements in an attribute, so that those can be translated into any language
    set_translation_text(document.body);
    
    // translation starts by looping through all elements having transtext attribute
    $('*[transtext]').each(function () {
        var translation_node = $(this);
        var api_url = 'https://www.googleapis.com/language/translate/v2?key=AIzaSyCuIzfCWlY-xXUxDGXGXFW_cVE06rXZ-60&source=fr&target=en&callback=?&q=' + translation_node.attr('transtext');
        $.getJSON(api_url, null, function(response) {
            translation_node.html(response.data.translations[0].translatedText);
        });
    });
});