It's been a while since I build this small plugin for jQuery, While browsing through my files I try to see if this plugin still works with the latest version of jQuery which is 1.3.2 and it did. I have updated the sample and change the file names so it is easy to recognize. I also move the downloads to my google site, Download here.
Focus on the input box below or click on the box next to the control to show color picker.
Basic Sample
jQuery(function($) {
$("#vtrColorPicker").attachColorPicker();
});
Change Background
jQuery(function($) {
$("#vtrColorPicker1").attachColorPicker();
$("#vtrColorPicker1").change(function() {
$("#content-wrapper").css("background-color",$("#vtrColorPicker1").getValue());
});
jQuery Plugin Page
ReplyDeleteVery useful plugin!
ReplyDeletethanks friend
ReplyDeleteThis Works for changing a:link
ReplyDelete$("#vtrColorPicker1").change(function() {$('a.myclass').css("background-color",$("#vtrColorPicker1").getValue())});
this fails on a:hover
$("#vtrColorPicker1").change(function() {$('a:hover.myclass').css("background-color",$("#vtrColorPicker1").getValue())});
what am it missing
I am not sure it this selector will work in jQuery.
ReplyDeletea:hover.myclass
Did you try it outside of color picker change event?
This thing throws errors left and right when I put it in. It gives me this error....
ReplyDeletea.ownerDocument is undefined
[Break on this error] "border"+this+"Width",true))||0})}a.of...ll;if(a=e.getComputedStyle(a,null))f=
Hi,
ReplyDeletethanks for the nice plugin.
It works fine but I get an error in firebug when I am using it with jQuery v1.4.2.
How can I change the default color?
Thanks again,
Francesc
This blog is using jQuery v1.4.2 and is working properly. Although I see an error in firebug I think it is not related to color picker.
ReplyDeleteBTW you can use setValue function.
example:
$("#vtrColorPicker1").setValue(value);
Hey! Thanks for the fast reply.
ReplyDeleteYes, setting default value is easy: Setting value in the input tag or through js in document.ready.
However, once the color picker is attached, I am not able to change it.
When I am trying to change the value through an event using the setValue function, the color doesn't change and I am getting 'undefined' in the input box.
Example:
$('#reset').click(function () {
value = '#CC0000';
$('#vtrColorPicker').setValue(value);
});
I can change value in the input with jquery
$('#vtrColorPicker').val(value);
but that won't change the color picker.
Any suggestions?
On the click event, can I remove the colorpicker an attach a new one with the new value?
Thanks for your nice work,
Francesc
Hi again,
ReplyDeleteI found a solution to my problem.
I have been trying different things with setValue and I couldn't make it work.
To change the color of the colorpicker we can use
var color = '#CC0000'; $('.ColorPickerDivSample').css({'background-color' : color});
The class .ColorPickerDivSample is the class for a span where the box with the colorpicker is created, right?
So, if we want to allow to input manually the color typing it in the input, we could do something like this:
$('input').change(
function () {
var newColor = $(this).val();
$('.ColorPickerDivSample').css({'background-color' : newColor});
}
);
I am doing all these cos I would like to change the colors through events and cos I have an unknown number colorpickers.
so the same example for an unknown number of colorpickers could be as follow (although, probably there is a simpler solution):
//Different ID for all color spans
$('.ColorPickerDivSample').each( function(i){
$(this).attr({ id: 'picker' + ++i });
});
//Different IDs for the inputs
$('.vtrColorPicker').each( function(i){
$(this).attr({ id: ++i });
});
$('input').change(
function () {
var newColor = $(this).val();
var inputID = $(this).attr("id");
var spanID = '#picker' + inputID;
$(spanID).css({'background-color' : newColor});
}
);
I hope it helps to others.
Francesc
This is just what I was looking for, but I have run into a problem. It works fine where I don't use other JQUery scripts, but I have script libraray that contains a document ready handler which seems to prevent the handle in your script from creating your object instance. Any suggestions?
ReplyDelete