changing colors with jquery with a color picker?
Solution 1
Replace the input element with a div use something like: (untested!)
HTML
<div id='colourPicker'></div>
JS
$('#colourPicker').ColorPicker({
onChange: function(hsb, hex, rgb){
$("#full").css("background-color", '#' + hex);
}
});
There's an example at the bottom of the link you have which shows you how.
Update for changing text
HTML
<div id='colourPickerText'></div>
<div id='textToBeChanged'>Test text</div>
JS
$('#colourPickerText').ColorPicker({
onChange: function(hsb, hex, rgb){
$("#textToBeChanged").css("color", '#' + hex);
}
});
Solution 2
Just as further reference... HTML5 already include "color" as an Input type.
<label for="bg">Choose color:</label>
<input id="bg" type="color" />
Plus, you can apply some css style with:
input[type="color"]{/*css-here*/}
Now, for the main question... you can capture the color value to change the bg-color with a simple script. Live example: http://jsfiddle.net/7jg4e/152/
Solution 3
How about:
$('#colorSelector').ColorPicker({
onChange: function(hsb, hex, rgb)
{
$("#full").css("background-color", hex);
}
});
Solution 4
Thanks keithics..
I had the similar problem. I had to call colorpicker for dynamic buttons. I did with taking class instead of id.
It helped me a lot.
$('.colorSelector').ColorPicker({
onChange: function(hsb, hex, rgb,el)
{
$(el).val('#' + hex);
}
});
Comments
-
getaway almost 2 years
i have this jquery script that changes the color of the background instantly by entering a color code into the textbox, the working example is in jsfiddle link below.
but instead of the input field i wanted to use a color picker custom skin, becuase i dont want user to deal with hex code(just like twitter). the jquery plugin im trying to use is found at
http://www.eyecon.ro/colorpicker/
at the buttom of the page it has the neat color picker with DOM element.
so the problem is how am i going to change from the input type to the color picker div. thanks :))
-
getaway over 13 yearswhat about the html side of things
-
getaway over 13 yearsthanks for the great answer, but imagine i wanted to chnage the color of the text aswell, how is the div color picker in the html going to differentiate from the two color pickers +upvote from me :))
-
Nathan MacInnes over 13 yearsJust have a
<div id="colourSelector"></div>
as your colour selector box, and then your<xxx id="full">
will change whenever it's used. -
Fermin over 13 yearsUpdated answer to show how to change color of text, you could have 2 colour pickers on the form, one for background and one for text.
-
getaway over 13 yearscan i ask you one more question, sorry, how do i get the value(hex), when the color is sumbited, so i can save it in the database!! im so confused
-
Fermin over 13 yearsUse the onChange event, you will get the hex value there. See TheVillageIdiots jsFiddle to see how to use the OnChange method.
-
Avinash over 4 yearsfirst install use this command to instal angular color picker "npm install ngx-color-picker --save" in above code no need to use "let drawingBuffer" just use drawingBuffer this is for angular solution