Detect selected text

[asp]

Hi

Is there a way to get jquery to detect a selected text and add a class to this selection? With select I mean selected by the mouse cursor.

I’m not that good in jquery to make it myself, but I hope someone can help my.
:D

[jamygolden]

Copy and paste the code below into a .html file open it. You will see that the block will go orange when you hover over it. This is because the .selected class has a background colour of orange.

Code:

This is a box

[asp]

Oki, I understand.

But it wasn’t exactly what I was hoping for.

I’m trying to find a script that can detect if an area of a <p> tag is selected. Like if I want to add a class to the text that is bold in this paragraph:

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tincidunt varius augue ac laoreet. Pellentesque quis justo vel dolor ultricies venenatis. Praesent lacinia diam feugiat velit facilisis nec feugiat mi interdum. Nulla non mauris eu ligula eleifend aliquet. Aenean varius euismod orci nec eleifend. Proin luctus nisi nec turpis adipiscing aliquet. Integer molestie, nulla ac euismod mattis, neque velit aliquam quam, vitae consequat nisi est ac nunc. Aliquam vestibulum malesuada sollicitudin. Fusce auctor ipsum vel diam mattis egestas. Phasellus ac facilisis quam. Nulla vitae porttitor nisi. Vivamus volutpat porta nisi non fringilla. Nunc interdum auctor eros, nec euismod turpis commodo et. Suspendisse non nulla urna, vitae hendrerit erat. Praesent sed augue sapien. Mauris at odio aliquam tortor ultrices imperdiet ac eu quam. Nulla eleifend, eros ac sodales placerat, eros quam iaculis enim, eget pretium augue mi quis sem.</p>

Is there a way to do that?

[jamygolden]

Yes you can do that. If you mean add a class of .selected to the bold tag when you hover on <p>. – And I’m asuming you have wrapped the bold text within a "b" or "strong" tag.
html:

Code:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tincidunt varius augue ac laoreet.

jquery/javascript

Code:

$(document).ready(function(){

$(“p”).hover(function() {
$(this).children(“b”).toggleClass(“selected”);
});

});

[asp]

I’m sorry, it wasn’t what I was looking for. I’ll try to explain again.

If you got a <p> tag with text and you want to copy the part in the middle of it to word. You first select it and then pres ctrl+c. I want to add a class to the selected area of the text. The one that gets a blue background (orange in css-tricks).

Is there a way to do that, add a class to a area that doesn’t have it’s own tag originally.

My idea is to add a <span class="selected"> tag to the start of the selected area and a </span> tag at the end.

[jamygolden]

I have no idea how to do that without adding tags to every single letter lol.

I’ve got the feeling this will break the html though. what if you have something like this:

Code:

This is a div

This is a span

This is a

paragraph

[asp]

This is what I’m trying to do.

[img]http://mathiasb.no/stuff/note/show.png[/img]

First I just have a plain text

Then i select a portune of the txst and press the "Add class" button.

And this adds a class with yeallow background to the selected text.

[Capt Otis]

Here is what you are looking for…

Code:

Highlight any part of this text then click the button to make it selected.

Now the only problem is you can’t overlap your highlight with my script, because the getSelectedText only returns text, not also html. I’m working on a fix for that. Enjoy

[asp]

Nice just what I was looking for =D

I noticed that it adds a lot of spans at the start of the <p id="highlight"> tag when you just click the button without any text selected. Is there a way to stop that? And is there a possibility to remove the highlighting if you want that?

I know it’s a lot to ask but I’m not capable to do it myself. :?

[Capt Otis]

Replace the javascript from the last post…

Code:

And add this button…

Code:

That stops the button spamming, and will remove any tags at all in the area you set (not just the .selected class…) It is a quick fix, I can’t think of a quick way to erase specific highlights.

[asp]

Thank you so much, It works perfectly.

[Author]

Posts