Google transliteration on keyup - google-translate

I am using Google transliterate in my application.
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("elements", "1", { packages: "transliteration" });
</script>
<script>
function OnLoad() {
var options = {
sourceLanguage:
google.elements.transliteration.LanguageCode.ENGLISH,
destinationLanguage:
[google.elements.transliteration.LanguageCode.TAMIL],
shortcutKey: 'ctrl+g',
transliterationEnabled: true
};
//farmer name
var control = new google.elements.transliteration.TransliterationControl(options);
control.makeTransliteratable(["txtFarmer_nameTn"]);
var keyVal = 32; // Space key
$("#txtFarmer_nameEng").on('keydown', function (event) {
if (event.keyCode === 32) {
var engText = $("#txtFarmer_nameEng").val() + " ";
var engTextArray = engText.split(" ");
$("#txtFarmer_nameTn").val($("#txtFarmer_nameTn").val() + engTextArray[engTextArray.length - 2]);
document.getElementById("txtFarmer_nameTn").focus();
$("#txtFarmer_nameTn").trigger(
{
type: 'keypress', keyCode: keyVal, which: keyVal, charCode: keyVal
});
}
var txt1 = document.getElementById("txtFarmer_nameEng").value;
if (txt1.length == 1) {
document.getElementById("txtFarmer_nameTn").value = "";
}
});
$("#txtFarmer_nameTn").bind("keyup", function (event) {
setTimeout(function () {
$("#txtFarmer_nameEng").val($("#txtFarmer_nameEng").val() + " ");
document.getElementById("txtFarmer_nameEng").focus()
}, 0);
});
}
google.setOnLoadCallback(OnLoad);
</script>
It is also working fine. But the problem is the text was translated only after hit the Space Bar. I need to translate the text on every key press.
Here is the reference
Please suggest any solution. I was roaming over google, but i can't get the exact solution. Suggest What to use instead of Google Transliterate API.
Thanks in advance.

The way which you are going is wrong with Google translate. Google is not allow with dynamically adding tab or space bar key for translate language.
We must be press Tab or Space bar key after written text by physically.

Related

How to call a iframe in a panel in firefox extension

I am trying to create a extension in Firefox using sdk addon. What i want to do is to call an iframe inside a panel.
I have already created the extension for chrome and now i am trying to do it for firefox.
I have a facebook login in the iframe. Once i click on the sign in button the iframe just goes blank. If I log in before hand then also the extension doesnt work. It is as if it can't access the session.
Here is the code of my main.js file.
var { ToggleButton } = require('sdk/ui/button/toggle');
var panels = require("sdk/panel");
var data = require("sdk/self").data;
var {Cc, Ci} = require("chrome");
var tabs = require("sdk/tabs");
var title=tabs.activeTab.title;
var button = ToggleButton({
id: "my-button",
label: "my button",
icon: {
"16": "./logo1.png",
"32": "./logo1.png",
"64": "./logo1.png"
},
onChange: handleChange
});
var panel = panels.Panel({
width:450,
height:400,
contentURL: data.url("popup.html"),
onHide: handleHide
});
function handleChange(state) {
if (state.checked) {
panel.show({
position: button
});
}
}
function handleHide() {
button.state('window', {checked: false});
}
here is the code of my main javascript file that calls the iframe
$(document).ready(function() {
document.body.style.display = 'block';
var ur='xyz';
var frame = document.createElement('iframe');
var frame_url = 'https://developer.mozilla.org/en-US/Add-ons/SDK/High-Level_APIs/page-mod';
frame.setAttribute('width', '100%');
frame.setAttribute('height', '100%');
// frame.setAttribute('margin', '-10%');
frame.setAttribute('frameborder', 'none');
frame.setAttribute('id', 'rtmframe');
$('body').height(450).width(400);
frame.setAttribute('src', frame_url);
document.body.appendChild(frame);
$('iframe#rtmframe').load(function() {
$('#loadImg').hide();
});
});
This is not the actual link i am trying to open. Can anyone suggest what i can do differently. or point me to github code that might be doing the same thing.

Getting country from jVectormap onregionclick

I'm trying to learn jVectormap and I'm stuck trying to return the country when clicked on. Is there any way to convert the code into a country, or just get the country when clicking on the map?
<script>
$(function () {
$('#world-map').vectorMap ({
onRegionClick: function (e, code) {
console.log (code);
}
});
});
</script>
Here ya go
onRegionClick: function (event, code) {
var map = $('#world-map').vectorMap('get', 'mapObject');
var name = map.getRegionName(code);
},
Use this
onRegionClick:function(event, code){
var name = (code);
window.location.href("http://your url address"+ code);
}
change the "your url adress" to your link address.
All script
<script>
$(function(){
$('#world-map').vectorMap({
onRegionClick:function(event, code){
var name = (code);
window.location.href("http://your url address"+ code);
}
});
});
</script>

Observables initialized/attached to Observable in extender not initialized at page load

I
I have created a text counter to tell the user how many characters of they have typed and how many they have remaining available. This should show when the text area has focus and disappear then the text area loses focus.
I have created a binding handler that uses an extender to extend the observable object that is being passed into it. The problem is that it works only after entering text, navigating off of the text area, and then navigating back to the text area.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<div class="question" >
<label for="successes" data-textkey="successes">This is a question</label>
<textarea data-bind="textCounter: successes, hasFocus: successes.hasFocus, maxLength:200, event: { keyup:successes.updateRemaining }"></textarea>
<div class="lengthmessage edit" data-bind="visible:successes.hasFocus()">
<div >
<em>Length:</em> <span data-bind="text:successes.currentLength"></span>
<em>Remaining:</em> <span data-bind="text:successes.remainingLength"></span>
</div>
</div>
</div>
<script src="../Scripts/knockout-2.3.0.debug.js" type="text/javascript"></script>
<script type="text/javascript">
(function (ko) {
ko.extenders.textCounter = function (target, options) {
options = options || {};
options.maxLength = options.maxLength ? parseInt(options.maxLength) : 2000;
target.maxLength = ko.observable(options.maxLength);
target.currentLength = ko.observable(target().length);
target.remainingLength = ko.observable(target.maxLength() - target.currentLength());
target.hasFocus = ko.observable(false);
target.hasFocus.subscribe(function () {
target.currentLength(target().length);
target.remainingLength(target.maxLength() - target.currentLength());
});
target.updateRemaining = function (data, event) {
if (event.target == undefined && event.srcElement.value == "") {
target.currentLength(0);
}
else {
var e = $(event.target || event.srcElement);
target.currentLength(e.val().length);
if (target.currentLength() > target.maxLength()) {
e.val(e.val().substr(0, target.maxLength()));
target.currentLength(target.maxLength());
}
}
target.remainingLength(target.maxLength() - target.currentLength());
};
return target;
};
ko.bindingHandlers.textCounter = {
init: function (element, valueAccessor, allBindingsAccessor, viewModel) {
var val = ko.utils.unwrapObservable(valueAccessor());
var observable = valueAccessor();
observable.extend({ textCounter: allBindingsAccessor() });
ko.applyBindingsToNode(element, {
value: valueAccessor()
});
},
update: function (element, valueAccessor, allBindingsAccessor, viewModel) {
var val = ko.utils.unwrapObservable(valueAccessor());
var observable = valueAccessor();
ko.bindingHandlers.css.update(element, function () { return { hasFocus: observable.hasFocus }; });
}
};
var viewModel = function () {
this.successes = ko.observable("");
//this.successes.hasFocus = ko.observable();
}
ko.applyBindings(new viewModel());
} (ko));
</script>
</body>
</html>
If I uncomment:
//this.successes.hasFocus = ko.observable();
The page will behave the way that I want it to, from the very beginning, but it defeats the whole purpose of using the extender since my view model now has one of the objects from the extender in it.
I have got to believe that there is something relatively simple that I am missing here.
Thanks for your help..
The issue is that hasFocus has not been defined when the binding string here is parsed:
<textarea data-bind="textCounter: successes, hasFocus: successes.hasFocus, maxLength:200, event: { keyup:successes.updateRemaining }"></textarea>
So, when the binding string is parsed successes.hasFocus is undefined.
One option would be to apply the hasFocus binding inside of your textCounter binding after your hasFocus property is available.
Also, in Knockout 3.0 (released today), the parsing of the binding string happens when the value is accessed in the binding itself. So, your code actually works property in KO 3.0 already.

Google Places API autocomplete not working

Right now, the autocomplete box works just fine when I click on the location, but when I press down, highlight the location that I want to go to, and press enter, it simply goes back to the home location of the map. Any insights on this? I call this function in initialize(). I'm lost as to what I possibly did wrong. Is this just a google api bug? If so, any insights as to how to work around it?
function setupAutoComplete() {
var defaultBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(-90, -180),
new google.maps.LatLng(90, 180));
var input = document.getElementById('placeSearch');
var options = {
bounds: defaultBounds,
types: ['(regions)']
};
autocomplete = new google.maps.places.Autocomplete(input, options);
google.maps.event.addListener(autocomplete, 'place_changed', function() {
alert('hi');
removeAllOverlays();
var place = autocomplete.getPlace();
var mapCenter = place.geometry.location;
var colLat = mapCenter.lat() - (halfPoints)*latSeparation;
var colLng = mapCenter.lng() - (halfPoints)*lngSeparation;
var tempStart = new google.maps.LatLng(colLat, colLng);
map.setCenter(mapCenter);
pointArray[0][0] = tempStart;
reService();
mapSearch();
drawBounds();
});
}
Thanks so much!
I guess the input#placeSearch is placed inside a <form>.
You submit the form when you press [ENTER].
You may either remove the surrounding form or cancel the submission by adding:
onsubmit="return false"
...to the form-element.
I just hit this issue and went with the following, as I do want to submit the form at a later stage. This code is from google groups.
var input = document.getElementById('create-location');
var options = {
//types: ['(cities)'],
};
autocomplete = new google.maps.places.Autocomplete(input, options);
google.maps.event.addDomListener(input, 'keydown', function(e) {
if (e.keyCode == 13)
{
if (e.preventDefault)
{
e.preventDefault();
}
else
{
// Since the google event handler framework does not handle early IE versions, we have to do it by our self. :-(
e.cancelBubble = true;
e.returnValue = false;
}
}
});

Changing the value of a Telerik RadEditor with Javascript/jQuery

I'm trying to manually clean the HTML of a Telerik RadEditor with Javascript but I can't seem to find the correct place to store the value so that it gets saved on post back.
Here's the JS I have:
$(function () {
jQuery.fixHash = function ($html) {
// modify $html
return $html;
};
$("#adminEditingArea input[id$='SaveButton']").unbind("click").click(function () {
$("iframe[id$='_contentIframe']").trigger("save");
// call .net postback
return false;
});
});
var editorSaveEventInit = false;
function InitSaveEvent() {
if (!editorSaveEventInit) {
var $EditFrames = $("iframe[id$='_contentIframe']");
if ($EditFrames && $EditFrames.length > 0) {
$EditFrames.bind("save", function (e) {
var $thisFrame = $(this);
var thisFrameContents = $thisFrame.contents();
if (thisFrameContents) {
var telerikContentIFrame = thisFrameContents.get(0);
var $body = $("body", telerikContentIFrame);
var html = $.fixHash($body).html();
$body.html(html);
// also tried storing the modified HTML in the textarea, but it doesn't seem to save:
//$thisFrame.prev("textarea").html(encodeURIComponent("<body>" + html + "</body>"));
}
});
editorSaveEventInit = true;
}
}
};
$(window).load(function () {
InitSaveEvent();
});
Is there any way to access the Telerik RadEditor object with JavaScript (using OnClientCommandExecuted()?) so that I can access the .get_html() and .set_html(value) functions? If not, what values do I need to set before posting back?
Why don't you use custom content filters.
Ah, just discovered Telerik's built-in $find() function: http://www.telerik.com/help/aspnet-ajax/editor_getingreferencetoradeditor.html
Edit: here's the solution I came up with for my InitSaveEvent() function:
var editorSaveEventInit = false;
function InitSaveEvent() {
if (!editorSaveEventInit) {
var $EditFrames = $("iframe[id$='_contentIframe']");
if ($EditFrames && $EditFrames.length > 0) {
$EditFrames.bind("save", function (e) {
var $thisFrame = $(this);
var thisFrameContents = $thisFrame.contents();
if (thisFrameContents) {
var telerikContentIFrame = thisFrameContents.get(0);
var $body = $("body", telerikContentIFrame);
var html = $.fixHash($body).html();
// SOLUTION!
var $radeditor = $thisFrame.parents("div.RadEditor.Telerik:eq(0)");
var editor = $find($radeditor.attr("id"));
editor.set_html(html);
// ☺
}
});
editorSaveEventInit = true;
}
}
};

Resources