Setting a color from spectrum to another div

Question

I am having a difficult time trying to figure out how to set a color I choose from spectrum to another div. My HTML is like this:

<h2>Full Example</h2> <input type='text' id="full"/> <div class="outside-preview"> </div> <div id="inside-preview"> </div>

The input is the spectrum and it changes the small box color. This is all standard to the plugin. I am wanting to set that same color to one of the boxes (inside-preview or outside-preview) as well.

Does anyone see what I have to do?

Click to see it in a fiddle

Here is the github page

empiric · Accepted Answer · 2016-07-29 16:44:09Z

1

According to their documentation you can use the change-function for that:

change: function(color) { $('.outside-preview').css('background-color', color.toHexString()) }

Example

To set the backgroundcolor for the corresponding div with multiple colorpickers you can use something like this:

var eq = $(this).index('.colorpicker'); $('.container').eq(eq).css('background-color', color.toHexString());

Example

edited Jul 29, 2016 at 16:44

answered Jul 29, 2016 at 15:55

empiric

7,8767 gold badges40 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Becky Over a year ago

Thanks! Do you see how I could have two inputs with different colors? I tried adding another input with a name and it did nothing to help. This example doesn't have your answer as I kind of figured it out on my own, but your solution is better. jsfiddle.net/way4LmbL/2

empiric Over a year ago

see this example. Set up 2 colopickers and select the respective div to set the background.

Becky Over a year ago

Gotcha! I see $("#full").spectrum({` was holding me back too. Thanks for your help!!

Becky Over a year ago

Sorry for having to ask you something again, but why won't the inputs work when brought outside the div? I am wanting the inputs to be above and not inside the div, due to future positioning. See this: jsfiddle.net/way4LmbL/4

empiric Over a year ago

@Becky thats because how the dom-traversing works with nextAll(), for your layout you could using something like this example

|

Collectives™ on Stack Overflow

Setting a color from spectrum to another div

1 Answer 1

6 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Related