Reputation: 8990
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 :))
Upvotes: 9
Views: 41683
Reputation: 9000
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.
$(document).ready(function(){
$("#bg").change(function(){
$("#full").css("background-color",$("#bg").val());
});
});
#full {
background-color: #ffffff;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<body id="full">
<form method="post" action="">
<label for="bg">Background:</label>
<input type="color" class="theme" id="bg"/>
(with jQuery)
<hr />
<label for="bg2">Background:</label>
<input type="color" class="theme" id="bg2" onchange="javascript:document.getElementById('full').style.backgroundColor=document.getElementById('bg2').value;"/>
(with javascript)
</form>
</body>
Upvotes: 14
Reputation: 21
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);
}
});
Upvotes: 2
Reputation: 143
let drawingBuffer getColor(colorPicker) { let color = 'ColorPicker1'; this.drawingBuffer = document.getElementsByClassName("colorSets"); for (var i = 0; i < this.drawingBuffer.length; i++) { this.drawingBuffer[i].style.color = colorPicker; } this.drawingBuffer.style.color = colorPicker; return color; }
<div class="colorSets">test</div> <div class="colorSets">test1</div> <input name="MyColorPicker" id="ColorPicker1" [cpPresetLabel]="color" [(colorPicker)]="color" [style.background]="color" (colorPickerChange)="getColor($event)"/> //this is not working in snipest but use as it code and then use npm install it will work for you
Upvotes: 0
Reputation: 8758
I have the same problem and below is my solution.
edit colorpicker.js line 96
from
cal.data('colorpicker').onChange.apply(cal, [col, HSBToHex(col), HSBToRGB(col)]);
to
cal.data('colorpicker').onChange.apply(cal, [col, HSBToHex(col), HSBToRGB(col), cal.data('colorpicker').el]);
on change event instead of onChange: function (hsb, hex, rgb) ...
to
onChange: function (hsb, hex, rgb,el) {
$(el).val('#' + hex);
}
Upvotes: 0
Reputation: 36081
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);
}
});
Upvotes: 8
Reputation: 11149
How about:
$('#colorSelector').ColorPicker({
onChange: function(hsb, hex, rgb)
{
$("#full").css("background-color", hex);
}
});
Upvotes: 4