How i would show dialog when i select any text on page using jQuery?

Question

I have web page full of text "lets say like that page". I don't mean "input element", i mean any text is been writing with

or , ...etc tags.

When I select some word(s), pop-up OR mini window OR dialog shows up with some options, lets say, link to email selected text or copy or print.

Its like when you are in any browser and select some text and then click Right Click on that selected text, and menu (integrated within your OS-window-) shows up.

i want the same story but dialog shows up right after i select. no need to do right click.

I'm reading "UI/API/1.8/Dialog" http://docs.jquery.com/UI/Dialog and ".mouseup()" http://api.jquery.com/mouseup/ and also i found this nice article here http://motyar.info/blog/2010/02/get-user-selected-text-with-jquery-and.html

But still cant make the function I want. Maybe its easy and i don't see it :)

Appreciate your input! Thanks!

esteuart · Accepted Answer · 2011-05-17 23:32:32Z

You can get the selected text on the mouseup event with some code like this:

$(document).mouseup(function (event) { var text = document.selection.createRange().text; if (text != "") { //Use text in popup, etc... SAMPLE: alert(text); } });

dtbarne · Accepted Answer · 2011-05-17 21:21:17Z

0

Rather than .mouseup() I think you want to use .select():

http://api.jquery.com/select/

answered May 17, 2011 at 21:21

dtbarne

8,2505 gold badges47 silver badges49 bronze badges

3 Comments

egyamado Over a year ago

I think it wouldn't work with any text but input elements. "This event is limited to <input type="text"> fields and <textarea> boxes." from that jQuery.

dtbarne Over a year ago

You could style a textarea to look/act like a <div>. May not be the best solution, but could certainly work.

egyamado Over a year ago

I could make textarea LOOK like div or any semantic tag from HTML5 but doesn't function like so. Users should be able to select ONLY not type any thing. There would be many of that "text" viewer tag <p> or <span>, ...etc. So to have textarea wouldn't be the ideal solution.

Collectives™ on Stack Overflow

How i would show dialog when i select any text on page using jQuery?

2 Answers 2

Comments

3 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Linked

Related