We Keep Coding

How to create a popup/overlay upon highlighting words like Google Dictionary extension?

I want to create a in-window popup when some text is highlighted, similar to how the Google Dictionary extension works. I've already figured out how to do the highlighting portion, just can't figure out how to create the popup.
Here's the code for the highlighting:
function getSelectionText() {
var text = "";
if (window.getSelection) {
text = window.getSelection().toString();
} else if (document.selection && document.selection.type != "Control") {
text = document.selection.createRange().text;
}
console.log(text);
}
document.onmouseup = function() {getSelectionText()};

Get selection string in IPAD

I have a text area in which we have some text and a "touchend" event bind on this textarea. But while selecting text on Ipad it works only for it for first time touched select but if I am extending the selection part It will not return the selection string.
I want to return a string as I do selection of string. Below is the Link which I have prepared.
https://jsfiddle.net/22gc6gu4/63/
Any suggestion or help.
function getSelectionText() {
var text = "";
if (window.getSelection) {
text = window.getSelection().toString();
} else if (document.selection && document.selection.type != "Control") {
text = document.selection.createRange().text;
}
return text;
}
$(document).ready(function (){
$('textarea').on(" touchend", function (e){
$("#textUpdate").text(getSelectionText());
})
});

Display popup above highlighted text in contenteditable div?

I'm building a simple blogging-esque feature into one of my apps, and use the HTML5 contenteditable attribute because it's clean. However, what I need to do now is when the user highlights some text in the contenteditable div, a popup needs to appear above it. Right now I have a function that gets the selected text, which is binded to the DIV's mouseup(). However, when I click into the contenteditable div, the function is fired.
Here's my code:
function getSelected() {
if (window.getSelection) {
return window.getSelection();
}
else if (document.getSelection) {
return document.getSelection();
}
else {
var selection = document.selection && document.selection.createRange();
if (selection.text) {
return selection.text;
}
return false;
}
return false;
};
$("#content-create-partial").bind("mouseup", function(){
var text = getSelected();
if(text) {
console.log(text);
}
else{
console.log("Nothing selected?");
};
});
How do I prevent the call from being fired when the user clicks into the contenteditable div, and only when they highlight some text?

$("#content-create-partial").bind("mouseup", function(){
if (document.getSelection) {
var text = getSelected();
if(text) {
console.log(text);
}
else{
console.log("Nothing selected?");
}
}
});

Convert it to a string (.toString()), use trim() in case the selected string is empty and in the mouseup event check the length of the selected string.
$("#content-create-partial").bind("mouseup", function(){
var text = getSelected().toString().trim();
if(text.length>0) {
console.log(text);
}
else{
console.log("Nothing selected?");
};
});

Is there a function to deselect all text using JavaScript?

Is there a function in javascript to just deselect all selected text? I figure it's got to be a simple global function like document.body.deselectAll(); or something.

Try this:
function clearSelection()
{
if (window.getSelection) {window.getSelection().removeAllRanges();}
else if (document.selection) {document.selection.empty();}
}
This will clear a selection in regular HTML content in any major browser. It won't clear a selection in a text input or <textarea> in Firefox.

Here's a version that will clear any selection, including within text inputs and textareas:
Demo: http://jsfiddle.net/SLQpM/23/
function clearSelection() {
var sel;
if ( (sel = document.selection) && sel.empty ) {
sel.empty();
} else {
if (window.getSelection) {
window.getSelection().removeAllRanges();
}
var activeEl = document.activeElement;
if (activeEl) {
var tagName = activeEl.nodeName.toLowerCase();
if ( tagName == "textarea" ||
(tagName == "input" && activeEl.type == "text") ) {
// Collapse the selection to the end
activeEl.selectionStart = activeEl.selectionEnd;
}
}
}
}

For Internet Explorer, you can use the empty method of the document.selection object:
document.selection.empty();
For a cross-browser solution, see this answer:
Clear a selection in Firefox

This worked incredibly easier for me ...
document.getSelection().collapseToEnd()
or
document.getSelection().removeAllRanges()
Credits: https://riptutorial.com/javascript/example/9410/deselect-everything-that-is-selected

For a textarea element with at least 10 characters the following will make a small selection and then after a second and a half deselect it:
var t = document.getElementById('textarea_element');
t.focus();
t.selectionStart = 4;
t.selectionEnd = 8;
setTimeout(function()
{
t.selectionStart = 4;
t.selectionEnd = 4;
},1500);

Storing Highlighted text in a variable

Is there a javascript function that will allow me to capture the text that is currently highlighted with the cursor and store it in a variable? I've been trying document.selection.createRange().text but this hasn't been working. Are there any possible alternatives? Here's the code:
function moremagic(){
var output = document.selection.createRange();
alert("I Work!");}
When I run the function, it doesn't make it to the write statement so I know something is wrong.

Ungraciously stolen from another question:
function getSelectedText() {
if (window.getSelection) {
return window.getSelection();
}
else if (document.selection) {
return document.selection.createRange().text;
}
return '';
}
Use this in a "onClick" function or whatever and it will return the selected text in almost any browser.

Yep, you want window.getSelection.

function getSelectedText() {
if (window.getSelection) {
return "" + window.getSelection();
} else if (document.selection && document.selection.type == "Text") {
return document.selection.createRange().text;
}
return "";
}