0

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

1 Answer 1

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

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

6 Comments

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
see this example. Set up 2 colopickers and select the respective div to set the background.
Gotcha! I see $("#full").spectrum({` was holding me back too. Thanks for your help!!
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
@Becky thats because how the dom-traversing works with nextAll(), for your layout you could using something like this example
|

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.