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")
- };
Sorry it's so long I just thought I should include all of it just in case