Dynamically change text color with jquery and spectrum.js

Question

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

ariel · Accepted Answer · 2014-02-17 04:37:17Z

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/

Paul Back · Accepted Answer · 2017-08-04 20:14:12Z

5

The easiest way would be the following:

$("#picker1").spectrum("set", "red");

edited Aug 4, 2017 at 20:14

Paul Back

1,31916 silver badges25 bronze badges

answered Aug 4, 2017 at 18:52

Mario Medrano Medrano

3392 silver badges6 bronze badges

Collectives™ on Stack Overflow

Dynamically change text color with jquery and spectrum.js

2 Answers 2

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Linked

Related