Dynamically change text color with jquery and spectrum.js

html, javascript, jquery

Solution

According to documentation, you need to explicitly change the color using events.

For example:

function updateColor(element, color) {
    var hexColor = "transparent";
    if (color) hexColor = color.toHexString();
    $(element).css("color", hexColor);
}

$("#picker1").spectrum({
    color: "#f00",
    hide: function (color) {
        updateColor(".output.render", color);
    }
});

Also note that to select an element with both `output` and `render` classes, you need to use the selector `.output.render`.

Here's an working fiddle http://jsfiddle.net/bortao/mjHUD/

Problem

I have a `<span>` tag, `<span class="output render" id="text1"></span>`, that I would like to be dynamically controlled by spectrum.js to change the color. The span is rendered from this jquery: ``` $("#text_submit").submit( function(event) { $("#text1").html($("#1").val()); } ); ``` To get the color picker to affect the span I tried: ``` $(".output render").spectrum({ color: "#f00" }); ``` The above creates only an HTML text input box where the color picker used to be (how I got the color picker to appear is below). But it has no effect on the `<span>`. What can I do with jQuery to make this happen? I used the code below to make the color picker appear: ``` $("#picker1").spectrum({ color: "#f00" }); ``` which made the color picker appear where this HTML tag is `<input type='input' id="picker1" />`

Original source