How Can I Make Jscolor Colorpicker To Work On A Div?
I am using jscolor colorpicker which can only be attached to button element or input element.I want to use it for div.I tried this way- https://jsfiddle.net/anuranpal/Lead7c7q/43/
Solution 1:
Seems like the plugin doesn't support div
, but using its api you can toggle colorpicker
using code, if I got you correctly, here is my solution:
HTML
<div class="edit-color-container">
<div id="styleSpan" style="background-image: none; background-color: rgb(186, 243, 255); color: rgb(0, 0, 0);"
onclick="document.getElementById('color-picker').jscolor.show()"></div>
<div id="btn" onclick="document.getElementById('color-picker').jscolor.show()">Edit</div>
<input id="color-picker" class="jscolor {styleElement:'styleSpan',value:'DF068C'}"type="hidden">
</div>
CSS
.edit-color-container {
border: 1px solid gainsboro;
height: 70px;
width: 70px;
text-align: center;
}
#styleSpan {
width: 35px;
height: 35px;
border-radius: 50%;
margin: 5px auto;
cursor: pointer;
}
#btn {
cursor: pointer;
}
body > div:last-child {
margin: 50px0020px;
}
Notice that you can use onclick
on edit-color-container
instead.
Post a Comment for "How Can I Make Jscolor Colorpicker To Work On A Div?"