jQuery How do i apply CSS to selected text


Tags: javascript,jquery,css

Problem :

I'm trying to apply CSS to selected text. I tried the following and it doesn't work. I'm using Firefox.

$(document).keyup(function(){
savedRange = selection.getRangeAt(0);
$(savedRange).wrap('<span style="color:red"></span>');
});

I also tried

savedRange = selection.getRangeAt(0);
$(savedRange).css('color', 'red');

I can do this with contentEditable using execcommand, but execcommand applies html tags rather then inline styles. ex: <font/> instead of style="font..". I need to apply inline style and not deprecated html tags. I would like to use the jQuery css() property to apply styles.



Solution :

I'd recommend the CSS class applier module of my Rangy library for this. It works in all major browsers and for any selection. It will also toggle CSS classes on and off.

Here's an example from another question: How do I wrap a text selection from window.getSelection().getRangeAt(0) with an html tag?

Example:

<style type="text/css">
    span.red {
        color: red;
    }
</style>
<script type="text/javascript">
    var redApplier;

    window.onload = function() {
        rangy.init();
        redApplier = rangy.createCssClassApplier("red", true);
    };

    function makeSelectionRed() {
        redApplier.applyToSelection();
    }
</script>

UPDATE

If using classes isn't an option, you could still use a variation on this, although it's slightly roundabout: you could use Rangy to apply a class, and then use jQuery to find spans with this class and add your CSS to each. Here's an example:

function makeSelectionRed() {
    var randomCssClass = "rangyTemp_" + (+new Date());
    var classApplier = rangy.createCssClassApplier(randomCssClass, true);
    classApplier.applyToSelection();

    // Now use jQuery to add the CSS colour and remove the class
    $("." + randomCssClass).css({"color": "red"}).removeClass(randomCssClass);
}

jsFiddle: http://jsfiddle.net/z2mdw/2/


    CSS Howto..

    How to position child div to the center of every parents div using position absolute in css [duplicate]

    How to change CSS to the same class but another input name

    JQuery, fade out table row and contents (on scroll) in ratio to how much the row is hidden by containing div

    How to contents of div onclick tab

    How to implement a webpage with tabs in my case?

    how to center text and control user zoom in CSS

    How do I add a shadow to an entire table using just CSS?

    How to place a responsive background according to content height with HTML / CSS?

    How do I remove applied css on a div by JQuery?

    Navigation Bar - Each button is at a seperate line, how do I fix that?

    CSS: how to get scrollbars responsive for div inside container when user resizes it upwards

    how to disable drupal7 system css files?

    How to change color of the selected item from a Xul listbox?

    Getting unordered list in front of image slide-show in IE8, IE7 and probably IE6

    How to make a simple plus one voting system in code igniter

    How to align vertical elements as horizontal elements and shift to right side of the screen using CSS?

    How to make dynamic picture boxes with text on bottom with css?

    CSS: How to have to divs side by side with height 100%?

    How to top-align smaller inline-block elements next to larger elements?

    how to override left:0 using CSS or Jquery?

    How can I resize an image, added via ajax, to fit within specific dimensions while maintaining aspect ratio using JQuery/CSS?

    How to align slideshow element below header?

    How to extend jQuery.css from plugin

    How to change the opacity of elements in css?

    How to position images next to text using CSS

    How can i get rid of the open space between the topside of my website and my navigation bar (bootstrap)

    How to build a responsive padding for list menus using CSS?

    How to define the css :hover state in a jQuery selector?

    How to Detect css style by iPhone/iPad

    How to do this kind of Button in CSS?