Color Picker / Posts /

how can i call the colorpicker with javascript

23
Hi, i have the colorpicker and a selectbox.
Now i have javascript like this:
document.getElementById("selectbox").value = selectedColorTitle 
this sets the selectbox the same value as the colorpicker when a color is picked.
But how can i do this the otherway around?
What is the id of the colorpicker? 
denny  11 years ago   viewed: 15457    

6 Answers

8
The structure of the color picker is like this:
<div id="colorpicker">
    <div id="hexBox">#FF0000</div>
    <div id="bgBox" style="background-color:#FF0000;"></div>
    <div id="colorContainer">
        (contains many color DIV cells)
    </div>
</div>

If you want to update the background color of all color picker choosers, you can run the following script:
MC.ColorPicker.refresh();

If a color input field is to be generated later (e.g. in an Ajax callback), you can include a call:
MC.ColorPicker.reload();
in the Ajax callback
milo   11 years ago
-1
i just want to set the name.
if i pick eg. black from the colorpicker, then in the colorpicker it reads "black"  and because of the js the selectbox also goes to "black".

But the otherway around does not work. (yet)
eg when choosen black in the colorpicker and after that choose red in the select then in the colorpicker it still reads "black"

i need to have something like 
document.getElementById("COLORPICKER").value/selected = "red"
denny   11 years ago
1
I made some tests on page http://www.menucool.com/color-picker, and found:
Choosing black in the color picker and after that choose red in the select then in the color picker it reads "#FF0000", not  the "black" as you said.
Maybe I still don't understand your question.
milo   11 years ago
0
yes awesome :-)
with document.getElementById("hexbox4").innerHTML i can set the text
with document.getElementById("bgbox4").style.background i can set the color besides the text

only thing now is that when you open the selectbox and click on a color, then the selectbox closes and when youre mousepointer is hovering over the colors then it jumps to the hovered color. the hexbox and bgbox remain that hovered color even when you move the mouse away


denny   11 years ago
0
It is not supposed to be like that. Hovering on the Custom Color Picker on page Color Picker I can see the color goes back to the selected one when the mouse left the color picker.

Maybe it is because you did not specify a default color at the initial stage. Look at the source code of our Custom Color picker demo you will find:
<b class="selected" style="background:#A9BAD4" title="Light Blue"></b>

You can give it a default color either and see if it will resolve your issue.
milo   11 years ago
0

HTML:

<body>

A color picker: <input type="color" id="myColor">

<form>

<select name="colors" id="colors" onchange="changing()">

  <option value="#000">Black</option>

  <option value="#fff">White</option>

  <option value="#ff0000">Red</option>

  <option value="#00ff00">Green</option>

  <option value="#0000ff">Blue</option>

</select>

</form>

</body>


JAVASCRIPT:

function changing(){

var y=document.getElementById("colors").value;     /*colors is the drop-list id*/

    document.getElementById("myColor").value=y;     /*myColor is the color picker id */

}

Suzie Williams
  5 years ago

   

Your name*
Password
(Optional. Used to modify this post afterwords)
+ =  

Ask your Own Question

  • If your question is related to the topic of this post, you can post your question to this page by clicking the "Post a reply" button at left;

  • When you want to start a new page for your question:
▲