Search jQuery

jQuery Forum

Need help with my Color Picker Plugin Code.

in Developing jQuery Plugins • 11 years ago

Hello, I just recently decided to start making jQuery plugins and this one I've been working on I just can't seem to see what's wrong with it.

What it's supposed to do is this.

I have a link.

<a href="javascript:void(0);" id="BackgroundColor">Change Background Color</a>

And as it suggests it changes the background color of the body tag.

And here's what sets it to the plugin.

$("#BackgroundColor").colorPicker({
wall: "body", // Selector that the color should be changed
area: "background-color"
});

And that all works fine. If there's only one link on the page.

As soon as I put more then one link on the page, when I click one of the links (for the first time) it works fine, and then if I click the other link (for the first time) it's fine. But if I click the first link again and choose a color it sets the color to the second links parameters.

Please help, If I'm explaining this in a bad way let me know.

And here's the plugin code.

$.fn.colorPicker = function(options,Pickers) {
if(!Pickers || Pickers.constructor != Array) {
Pickers = new Array();
}
$(this).each(function(i) {
var id = (this.id) ? this.id : Pickers.length;
Pickers[id] = new jQColorPicker(this,options || {});
});
return Pickers
};
var Colors = Array(
"#000000","#000000","#000000","#CCFFFF","#CCFFCC","#CCFF99","#CCFF66","#CCFF33","#CCFF00","#66FF00","#66FF33","#66FF66","#66FF99","#66FFCC","#66FFFF","#00FFFF","#00FFCC","#00FF99","#00FF66","#00FF33","#00FF00",
"#000000","#333333","#000000","#CCCCFF","#CCCCCC","#CCCC99","#CCCC66","#CCCC33","#CCCC00","#66CC00","#66CC33","#66CC66","#66CC99","#66CCCC","#66CCFF","#00CCFF","#00CCCC","#00CC99","#00CC66","#00CC33","#00CC00",
"#000000","#666666","#000000","#CC99FF","#CC99CC","#CC9999","#CC9966","#CC9933","#CC9900","#669900","#669933","#669966","#669999","#6699CC","#6699FF","#0099FF","#0099CC","#009999","#009966","#009933","#009900",
"#000000","#999999","#000000","#CC66FF","#CC66CC","#CC6699","#CC6666","#CC6633","#CC6600","#666600","#666633","#666666","#666699","#6666CC","#6666FF","#0066FF","#0066CC","#006699","#006666","#006633","#006600",
"#000000","#CCCCCC","#000000","#CC33FF","#CC33CC","#CC3399","#CC3366","#CC3333","#CC3300","#663300","#663333","#663366","#663399","#6633CC","#6633FF","#0033FF","#0033CC","#003399","#003366","#003333","#003300",
"#000000","#FFFFFF","#000000","#CC00FF","#CC00CC","#CC0099","#CC0066","#CC0033","#CC0000","#660000","#660033","#660066","#660099","#6600CC","#6600FF","#0000FF","#0000CC","#000099","#000066","#000033","#000000",
"#000000","#FF0000","#000000","#FF00FF","#FF00CC","#FF0099","#FF0066","#FF0033","#FF0000","#990000","#990033","#990066","#990099","#9900CC","#9900FF","#3300FF","#3300CC","#330099","#330066","#330033","#330000",
"#000000","#00FF00","#000000","#FF33FF","#FF33CC","#FF3399","#FF3366","#FF3333","#FF3300","#993300","#993333","#993366","#993399","#9933CC","#9933FF","#3333FF","#3333CC","#333399","#333366","#333333","#333300",
"#000000","#0000FF","#000000","#FF66FF","#FF66CC","#FF6699","#FF6666","#FF6633","#FF6600","#996600","#996633","#996666","#996699","#9966CC","#9966FF","#3366FF","#3366CC","#336699","#336666","#336633","#336600",
"#000000","#FFFF00","#000000","#FF99FF","#FF99CC","#FF9999","#FF9966","#FF9933","#FF9900","#999900","#999933","#999966","#999999","#9999CC","#9999FF","#3399FF","#3399CC","#339999","#339966","#339933","#339900",
"#000000","#00FFFF","#000000","#FFCCFF","#FFCCCC","#FFCC99","#FFCC66","#FFCC33","#FFCC00","#99CC00","#99CC33","#99CC66","#99CC99","#99CCCC","#99CCFF","#33CCFF","#33CCCC","#33CC99","#33CC66","#33CC33","#33CC00",
"#000000","#FF00FF","#000000","#FFFFFF","#FFFFCC","#FFFF99","#FFFF66","#FFFF33","#FFFF00","#99FF00","#99FF33","#99FF66","#99FF99","#99FFCC","#99FFFF","#33FFFF","#33FFCC","#33FF99","#33FF66","#33FF33","#33FF00");
var jQColorPicker = function(link,options) {
var obj = this;
this.link = $(link);
this.options = {
wall: "body",
area: "background-color",
margin: 10,
done: function() {
return true;
}
}
this.options = $.extend(obj.options,options);
if(options.rollover != true) {
if(options.rollover) {
if(typeof options.rollover != "function") {
options.rollover = $.extend({wall:obj.options.wall,area:obj.options.area}, options.rollover);
}
}
}
this.rollover = options.rollover;
obj.link.click(function() {
if(!obj.Picker) {
obj.create();
}
else {
if(obj.Picker.css("display") == "none") {
obj.show();
}
else {
obj.close();
}
}
});
}
jQColorPicker.prototype.create = function() {
var obj = this;
$(".ColorPicker").css("display","none");
this.Picker = $("<div class='ColorPicker'></div>")
.css("width","212px")
.css("height","138px")
.css("position","absolute")
.css("left",this.link.offset().left+this.link.width()+this.options.margin)
.css("top",this.link.offset().top+this.link.height()+this.options.margin)
.css("background","#FFF")
.css("display","");
$("body").append(this.Picker);
if(this.Picker.offset().left+this.Picker.width()+this.link.width()+this.options.margin >= $(document).width()) {
this.Picker.css("left",this.link.offset().left-this.Picker.width()-this.options.margin);
}
if(this.Picker.offset().top+this.Picker.height()+this.link.height()+this.options.margin >= $(window).height()+$(window).scrollTop()) {
this.Picker.css("top",this.link.offset().top-this.Picker.height()-this.options.margin);
}
this.ColorOptions = $("<div class='ColorOptions' id='ColorOptions'></div>")
.css("width","208px")
.css("height","24px")
.css("border","#000 1px solid");
this.Picker.append(this.ColorOptions);
this.ColorPallette = $("<div id='PickerColorPallette'> </div>")
.css("width","50px")
.css("height","18px")
.css("border","#000 1px solid")
.css("margin-left","2px")
.css("margin-top","2px")
.css("float","left")
.css("margin-right","40px");
this.ColorOptions.append(this.ColorPallette);
for(i=0;i<Colors.length;i++) {
var ColorCube = $("<div class='ColorCubes' id='ColorCube_" + i + "'></div>").css("background-color",Colors[i]);
this.Picker.append(ColorCube);
}
$(".ColorCubes")
.css("width","9px")
.css("height","8px")
.css("float","left")
.css("border-right","#000 1px solid")
.css("border-bottom","#000 1px solid")
.css("cursor","pointer")
.mouseover(function() {
obj.ColorPallette.css("background-color",Colors[$(this).attr("id").replace("ColorCube_","")]);
$(this).css("border-color","#FFF");
$("#ColorCube_" + ($(this).attr("id").replace("ColorCube_","")-21)).css("border-bottom-color","#FFF");
$("#ColorCube_" + ($(this).attr("id").replace("ColorCube_","")-1)).css("border-right-color","#FFF");
if(typeof obj.rollover == "function") {
obj.rollover(Colors[$(this).attr("id").replace("ColorCube_","")]);
}
else {
if(obj.rollover == true) {
obj.options.wall.css(obj.options.area,Colors[$(this).attr("id").replace("ColorCube_","")]);
}
if(obj.rollover != true) {
if(obj.rollover) {
$(obj.rollover.wall).css(obj.rollover.area,Colors[$(this).attr("id").replace("ColorCube_","")]);
}
}
}
})
.mouseout(function() {
$(this).css("border-color","#000");
$("#ColorCube_" + ($(this).attr("id").replace("ColorCube_","")-21)).css("border-bottom-color","#000");
$("#ColorCube_" + ($(this).attr("id").replace("ColorCube_","")-1)).css("border-right-color","#000");
}).click(function() {
// done: function(color,link,wall) {}
if(obj.options.done(Colors[$(this).attr("id").replace("ColorCube_","")],obj.link,obj.options.wall)) {
$(obj.options.wall).css(obj.options.area,Colors[$(this).attr("id").replace("ColorCube_","")]);
obj.close();
console.log(obj.options.area);
}
});
}
jQColorPicker.prototype.show = function() {
$(".ColorPicker").css("display","none");
this.Picker.css("display","");
this.Picker
.css("left",this.link.offset().left+this.link.width()+this.options.margin)
.css("top",this.link.offset().top+this.link.height()+this.options.margin);
if(this.Picker.offset().left+this.Picker.width()+this.link.width()+this.options.margin >= $(document).width()) {
this.Picker.css("left",this.link.offset().left-this.Picker.width()-this.options.margin);
}
if(this.Picker.offset().top+this.Picker.height()+this.link.height()+this.options.margin >= $(window).height()+$(window).scrollTop()) {
this.Picker.css("top",this.link.offset().top-this.Picker.height()-this.options.margin);
}
};
jQColorPicker.prototype.close = function() {
this.Picker.css("display","none")
};