|
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Govadhana Reddy - Google API V2</title>
<meta name="description" content="Google Tanslator API V2" />
<meta name="keywords" content="Google, Language Translator, API V2, Govardhana Reddy, apondu, HTML, CSS, JavaScript" />
<meta name="author" content="Govardhana Reddy" />
<script src="https://www.google.com/jsapi" type="text/javascript"></script>
<script language="javascript" type="text/javascript" src="Scripts/jquery-1.7.1.min.js"></script>
<script language="javascript" type="text/javascript" src="Scripts/jquery.blockUI.js"></script>
<link media="screen" type="text/css" rel="stylesheet" href="CSS/StyleSheet.css"/>
<script language="javascript" type="text/javascript">
google.load("language", "1");
var apiKey = "";
$(document).ready(function () {
if ($('#selSourceLanguage option').size() == 0) {
loadLanguages();
if ($("#divBranding").innerHTML == "") {
google.language.getBranding('divBranding');
}
}
$('#btnDetect').click(function (e) {
e.preventDefault();
$.blockUI({ css: {
border: 'none',
padding: '15px',
backgroundColor: '#000',
'-webkit-border-radius': '10px',
'-moz-border-radius': '10px',
opacity: .5,
color: '#fff'
}
});
detectLanguage();
$.unblockUI();
});
$('#btnTranslate').click(function (e) {
e.preventDefault();
var text = $.trim($('#txtOrgText').val());
$('#divTranslated').html("");
if (text.length > 0) {
var langSource = $('#selSourceLanguage').val();
var langTarget = $('#selTargetLanguage').val();
if (langSource === "" || langTarget === "") {
alert("Select Source Language and Target Language");
}
else if (langSource === langTarget) {
alert("Source Language and Target Language cannot be same");
}
else {
$.blockUI({ css: {
border: 'none',
padding: '15px',
backgroundColor: '#000',
'-webkit-border-radius': '10px',
'-moz-border-radius': '10px',
opacity: .5,
color: '#fff'
}
});
var apiurl = "https://www.googleapis.com/language/translate/v2?key=" + apiKey + "&source=" + langSource + "&target=" + langTarget + "&q=";
$.ajax({
url: apiurl + encodeURIComponent(text),
dataType: 'jsonp',
async: false,
success: function (data) {
if (langSource === langTarget) {
$('#divTranslated').html(text);
}
else if (langSource != "") {
try {
$('#divTranslated').html(data.data.translations[0].translatedText);
}
catch (e) {
$('#divTranslated').html(text);
}
}
$('#divTranslated').css({ "border": "1px solid #7F9DB9" });
$('#divTranslated').css({ "padding": "4 4 4 4" });
$('#lblTranslation').css({ "color": "black" });
$.unblockUI();
},
error: function (x, e) {
alert('Error occured while translating the text');
$.unblockUI();
}
});
}
}
else {
alert("Nothing was entered to translate");
$.unblockUI();
}
});
$.unblockUI();
});
function loadLanguages() {
var apiurl = "https://www.googleapis.com/language/translate/v2/languages?key=" + apiKey + "&target=en";
$.ajax({
url: apiurl,
dataType: 'jsonp',
success: function (data) {
var languages = data.data.languages;
$.each(languages, function (index, language) {
$('#selSourceLanguage').append('<option value="' + language.language + '">' + language.name + '</option>');
$('#selTargetLanguage').append('<option value="' + language.language + '">' + language.name + '</option>');
});
$("select#selSourceLanguage").val('en');
$("select#selTargetLanguage").val('en');
},
error: function (x, e) {
alert('Error occured while loading the Google Supported Languages');
}
});
}
function detectLanguage() {
var text = $.trim($('#txtOrgText').val());
if (text.length > 0) {
var apiurl = "https://www.googleapis.com/language/translate/v2/detect?key=" + apiKey + "&q=";
$.ajax({
url: apiurl + encodeURIComponent(text),
dataType: 'jsonp',
async: false,
success: function (data) {
var obj = data.data.detections[0];
$('#selSourceLanguage').val(obj[0].language);
langSource = obj[0].language;
$('#divDetectedLanguage').html("The automatically detected language is: " + $('#selSourceLanguage option:selected').text());
$.unblockUI();
},
error: function (x, e) {
$('#divDetectedLanguage').html("Error occured while detecting the current text language");
$.unblockUI();
}
});
}
else {
$('#divDetectedLanguage').html("No Text for Translation was provided");
$.unblockUI();
}
}
</script>
</head>
<body>
<div style="width: 800px; margin-left: auto; margin-right: auto;">
<div class="container">
<div class="header">
<h1 class="headertitle">
<span id="lblPodcastHeader">Google Translator API v2 Implementation</span>
</h1>
</div>
<div class="main">
<table style="width: 720px; padding-top: 20px;" align="center">
<tr>
<td colspan="3" align="left" style="font-size:12px; color: Red;">
*Note : A Valid Google API Key is required
</td>
<td>
<div id="divBranding">
</div>
</td>
</tr>
<tr>
<td colspan="4" class="filler">
</td>
</tr>
<tr>
<td class="style1">
Origional Text :
</td>
<td class="style2" colspan="3">
<textarea id="txtOrgText" style="width: 398px; height: 60px; font-family: Calibri, verdana, arial, sans-serif;
font-size: 12px;" name="txtOrgText" rows="8" cols="200"></textarea>
</td>
</tr>
<tr>
<td colspan="4" class="filler">
</td>
</tr>
<tr>
<td class="style1">
</td>
<td colspan="3">
<div id="divDetectedLanguage" style="font-size: 8pt; color: blue;">
</div>
</td>
</tr>
<tr>
<td colspan="4" class="filler">
</td>
</tr>
<tr>
<td class="style1">
Source Language :
</td>
<td class="style4">
<select id="selSourceLanguage" name="selSourceLanguage" >
</select>
</td>
<td class="style3">
Target Language :
</td>
<td>
<select id="selTargetLanguage" name="selTargetLanguage" >
</select>
</td>
</tr>
<tr>
<td colspan="4" class="filler">
</td>
</tr>
<tr>
<td class="style1">
</td>
<td align="center" class="style4">
<input id="btnDetect" type="button" value="Detect" name="btnDetect" style="width: 70px;" />
</td>
<td align="center">
<input id="btnTranslate" type="button" value="Translate" name="btnTranslate" style="width: 94px;" />
</td>
<td>
</td>
</tr>
<tr>
<td colspan="4" class="filler">
</td>
</tr>
<tr>
<td id="lblTranslation" style="color: white; padding-top: 4px;" valign="top" class="style1">
Translated Text:
</td>
<td colspan="3">
<div id="div1" style="font-size: 10pt">
</div>
</td>
</tr>
<tr>
<td colspan="4" class="filler">
</td>
</tr>
<tr>
<td class="style1" colspan="4">
<div id="divTranslated" style="font-size: 10pt">
</div>
</td>
</tr>
<tr>
<td colspan="4" class="filler">
</td>
</tr>
</table>
<h3 class="topseparator">
Feedback & Comments</h3>
</div>
<div class="footer">
<table>
<tr>
<td>
<img alt="" src="Images/footer.jpg" />
</td>
<td colspan="3">
<div style="font-size: 23px">
Govardhana Reddy</div>
<br />
<a href="mailto:apondu@gmail.com?Subject=Google Translator API V2">apondu@gmail.com</a>
<br />
<a href="mailto:apondu@neversaydie.co.in?Subject=Google Translator API V2">apondu@neversaydie.co.in</a>
</td>
</tr>
</table>
</div>
</div>
</div>
</body>
</html>
|
By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.
If a file you wish to view isn't highlighted, and is a text file (not binary), please
let us know and we'll add colourisation support for it.
This is Govardhana Reddy, i am here to explore this world of INTERNET. I feel this is one way through which i can explore this world of INTERNET.
I want to be one among the best in this profession (a Software Developer, not a Software Engineer its a bit Controversial.) if not the "BEST"
My definition of a Software Engineer : "A person who knows what to cut/copy and where to paste".
Apart from my technical stuff I love Long Drives, Computer Gaming, Sports, Bikes and much more to say.
Anyways long road ahead keep me accompanied...
Submit an article or tip