How to have a popup after selecting text?

Question

I can\'t seem to figure this out. I have a div with some text in it. When the user selects pieces of it (totally at random, whatever they want), I want a small popup to occur

Answer 1

Just updated first answer. Try this

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;
}
/* create sniffer */
$(document).ready(function() {
	$('#my-textarea').mouseup(function(event) {
		var selection = getSelected();
        selection = $.trim(selection);
        if(selection != ''){
        $("span.popup-tag").css("display","block");
        $("span.popup-tag").css("top",event.clientY);
        $("span.popup-tag").css("left",event.clientX);
        $("span.popup-tag").text(selection);
        }else{
        $("span.popup-tag").css("display","none");
        }
	});
});

.popup-tag{
position:absolute;
display:none;
background-color:#785448d4;
color:white;
padding:10px;
font-size:20px;
font-weight:bold;
text-decoration:underline;
cursor:pointer;
-webkit-filter: drop-shadow(0 1px 10px rgba(113,158,206,0.8));
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Select any text :<br>
<textarea type="text" id="my-textarea" style="width:100%; height:200px;" >
While delivering a lecture at the Indian Institute of Management Shillong, Kalam collapsed and died from an apparent cardiac arrest on 27 July 2015, aged 83. Thousands including national-level dignitaries attended the funeral ceremony held in his hometown of Rameshwaram, where he was buried with full state honours.
</textarea>

<span class="popup-tag"></span>

see: https://jsfiddle.net/arunmaharana123/kxj9pm40/

Answer 2

You need a event listener that listen to mouseup event.

var bubbleDOM = document.createElement('div');
bubbleDOM.setAttribute('class', 'selection_bubble');
document.body.appendChild(bubbleDOM);

// Lets listen to mouseup DOM events.
document.addEventListener('mouseup', function (e) {
  var selection = window.getSelection().toString();
  if (selection.length > 0) {
    renderBubble(selection);
  }
}, false);

// Close the bubble when we click on the screen.
document.addEventListener('mousedown', function (e) {
  bubbleDOM.style.visibility = 'hidden';
}, false);

// Move that bubble to the appropriate location.
function renderBubble(selection) {
  bubbleDOM.innerHTML = selection;
  bubbleDOM.style.visibility = 'visible';
}

Answer 3

jQuery isn't going to be of much use here, so you'll need pure JS to do the selection grabbing part (credit goes to this page):

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;
}

You were on the right track with the mouseup handler, so here's what I got working:

$('#test').mouseup(function() {
    var selection = getSelected();

    if (selection) {
        alert(selection);
    }
});

And a live demo: http://jsfiddle.net/PQbb7/7/.

Answer 4

You can get it from the base DOM element likeso:

var start = $('#textdiv')[0].selectionStart;
var end = $('#textdiv')[0].selectionEnd;
var highlight = $('#textdiv').val().substring(start, end);
// Note the [0] part because we want the actual DOM element, not the jQuery object

At this point, you just need to bind it to a click event. I think in this case mouseup is the event you'd want to bind to, since a user clicks and holds the mouse and then releases it after they're done highlighting text.

The problem is this would not trigger users that use only the keyboard to highlight text. For that you'd want to use keyup on the element and filter for the right keystrokes.

Answer 5

We've just released an jQuery plugin called highlighter.js that should allow you to do this flexibly. The code is https://github.com/huffpostlabs/highlighter.js, feel free to ask any questions on the github page.