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 with the text inside of it.

To initiative the popup, can I just do this? …

$('#textdiv').click(function() {  

But then how do I get only the selected/highlighted text?

Answer 1

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/.