Search jQuery

jQuery Forum

Screen name:
awesomemman

awesomemman's Profile

1 Posts

5 Responses

0 Followers

Activity Trend

Last 30 days

Loading Chart...

Show:

Expanded view
List view

Need help with my Color Picker Plugin Code.
[2Replies]
- 11-May-2011 05:19 PM
- Forum: Developing jQuery Plugins
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.
1. <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.
1. $("#BackgroundColor").colorPicker({
2. wall: "body", // Selector that the color should be changed
3. area: "background-color"
4. });
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.
2. $.fn.colorPicker = function(options,Pickers) {
3. if(!Pickers || Pickers.constructor != Array) {
4. Pickers = new Array();
5. }
7. $(this).each(function(i) {
8. var id = (this.id) ? this.id : Pickers.length;
9. Pickers[id] = new jQColorPicker(this,options || {});
10. });
12. return Pickers
13. };
15. var Colors = Array(
16. "#000000","#000000","#000000","#CCFFFF","#CCFFCC","#CCFF99","#CCFF66","#CCFF33","#CCFF00","#66FF00","#66FF33","#66FF66","#66FF99","#66FFCC","#66FFFF","#00FFFF","#00FFCC","#00FF99","#00FF66","#00FF33","#00FF00",
17. "#000000","#333333","#000000","#CCCCFF","#CCCCCC","#CCCC99","#CCCC66","#CCCC33","#CCCC00","#66CC00","#66CC33","#66CC66","#66CC99","#66CCCC","#66CCFF","#00CCFF","#00CCCC","#00CC99","#00CC66","#00CC33","#00CC00",
18. "#000000","#666666","#000000","#CC99FF","#CC99CC","#CC9999","#CC9966","#CC9933","#CC9900","#669900","#669933","#669966","#669999","#6699CC","#6699FF","#0099FF","#0099CC","#009999","#009966","#009933","#009900",
19. "#000000","#999999","#000000","#CC66FF","#CC66CC","#CC6699","#CC6666","#CC6633","#CC6600","#666600","#666633","#666666","#666699","#6666CC","#6666FF","#0066FF","#0066CC","#006699","#006666","#006633","#006600",
20. "#000000","#CCCCCC","#000000","#CC33FF","#CC33CC","#CC3399","#CC3366","#CC3333","#CC3300","#663300","#663333","#663366","#663399","#6633CC","#6633FF","#0033FF","#0033CC","#003399","#003366","#003333","#003300",
21. "#000000","#FFFFFF","#000000","#CC00FF","#CC00CC","#CC0099","#CC0066","#CC0033","#CC0000","#660000","#660033","#660066","#660099","#6600CC","#6600FF","#0000FF","#0000CC","#000099","#000066","#000033","#000000",
22. "#000000","#FF0000","#000000","#FF00FF","#FF00CC","#FF0099","#FF0066","#FF0033","#FF0000","#990000","#990033","#990066","#990099","#9900CC","#9900FF","#3300FF","#3300CC","#330099","#330066","#330033","#330000",
23. "#000000","#00FF00","#000000","#FF33FF","#FF33CC","#FF3399","#FF3366","#FF3333","#FF3300","#993300","#993333","#993366","#993399","#9933CC","#9933FF","#3333FF","#3333CC","#333399","#333366","#333333","#333300",
24. "#000000","#0000FF","#000000","#FF66FF","#FF66CC","#FF6699","#FF6666","#FF6633","#FF6600","#996600","#996633","#996666","#996699","#9966CC","#9966FF","#3366FF","#3366CC","#336699","#336666","#336633","#336600",
25. "#000000","#FFFF00","#000000","#FF99FF","#FF99CC","#FF9999","#FF9966","#FF9933","#FF9900","#999900","#999933","#999966","#999999","#9999CC","#9999FF","#3399FF","#3399CC","#339999","#339966","#339933","#339900",
26. "#000000","#00FFFF","#000000","#FFCCFF","#FFCCCC","#FFCC99","#FFCC66","#FFCC33","#FFCC00","#99CC00","#99CC33","#99CC66","#99CC99","#99CCCC","#99CCFF","#33CCFF","#33CCCC","#33CC99","#33CC66","#33CC33","#33CC00",
27. "#000000","#FF00FF","#000000","#FFFFFF","#FFFFCC","#FFFF99","#FFFF66","#FFFF33","#FFFF00","#99FF00","#99FF33","#99FF66","#99FF99","#99FFCC","#99FFFF","#33FFFF","#33FFCC","#33FF99","#33FF66","#33FF33","#33FF00");
29. var jQColorPicker = function(link,options) {
30. var obj = this;
32. this.link = $(link);
34. this.options = {
35. wall: "body",
36. area: "background-color",
37. margin: 10,
38. done: function() {
39. return true;
40. }
41. }
43. this.options = $.extend(obj.options,options);
45. if(options.rollover != true) {
46. if(options.rollover) {
47. if(typeof options.rollover != "function") {
48. options.rollover = $.extend({wall:obj.options.wall,area:obj.options.area}, options.rollover);
49. }
50. }
51. }
53. this.rollover = options.rollover;
55. obj.link.click(function() {
56. if(!obj.Picker) {
57. obj.create();
58. }
59. else {
60. if(obj.Picker.css("display") == "none") {
61. obj.show();
62. }
63. else {
64. obj.close();
65. }
66. }
67. });
68. }
70. jQColorPicker.prototype.create = function() {
71. var obj = this;
72. $(".ColorPicker").css("display","none");
74. this.Picker = $("<div class='ColorPicker'></div>")
75. .css("width","212px")
76. .css("height","138px")
77. .css("position","absolute")
78. .css("left",this.link.offset().left+this.link.width()+this.options.margin)
79. .css("top",this.link.offset().top+this.link.height()+this.options.margin)
80. .css("background","#FFF")
81. .css("display","");
82. $("body").append(this.Picker);
84. if(this.Picker.offset().left+this.Picker.width()+this.link.width()+this.options.margin >= $(document).width()) {
85. this.Picker.css("left",this.link.offset().left-this.Picker.width()-this.options.margin);
86. }
88. if(this.Picker.offset().top+this.Picker.height()+this.link.height()+this.options.margin >= $(window).height()+$(window).scrollTop()) {
89. this.Picker.css("top",this.link.offset().top-this.Picker.height()-this.options.margin);
90. }
92. this.ColorOptions = $("<div class='ColorOptions' id='ColorOptions'></div>")
93. .css("width","208px")
94. .css("height","24px")
95. .css("border","#000 1px solid");
96. this.Picker.append(this.ColorOptions);
98. this.ColorPallette = $("<div id='PickerColorPallette'> </div>")
99. .css("width","50px")
100. .css("height","18px")
101. .css("border","#000 1px solid")
102. .css("margin-left","2px")
103. .css("margin-top","2px")
104. .css("float","left")
105. .css("margin-right","40px");
107. this.ColorOptions.append(this.ColorPallette);
109. for(i=0;i<Colors.length;i++) {
110. var ColorCube = $("<div class='ColorCubes' id='ColorCube_" + i + "'></div>").css("background-color",Colors[i]);
111. this.Picker.append(ColorCube);
112. }
114. $(".ColorCubes")
115. .css("width","9px")
116. .css("height","8px")
117. .css("float","left")
118. .css("border-right","#000 1px solid")
119. .css("border-bottom","#000 1px solid")
120. .css("cursor","pointer")
121. .mouseover(function() {
122. obj.ColorPallette.css("background-color",Colors[$(this).attr("id").replace("ColorCube_","")]);
123. $(this).css("border-color","#FFF");
124. $("#ColorCube_" + ($(this).attr("id").replace("ColorCube_","")-21)).css("border-bottom-color","#FFF");
125. $("#ColorCube_" + ($(this).attr("id").replace("ColorCube_","")-1)).css("border-right-color","#FFF");
127. if(typeof obj.rollover == "function") {
128. obj.rollover(Colors[$(this).attr("id").replace("ColorCube_","")]);
129. }
130. else {
131. if(obj.rollover == true) {
132. obj.options.wall.css(obj.options.area,Colors[$(this).attr("id").replace("ColorCube_","")]);
133. }
134. if(obj.rollover != true) {
135. if(obj.rollover) {
136. $(obj.rollover.wall).css(obj.rollover.area,Colors[$(this).attr("id").replace("ColorCube_","")]);
137. }
138. }
139. }
140. })
141. .mouseout(function() {
142. $(this).css("border-color","#000");
143. $("#ColorCube_" + ($(this).attr("id").replace("ColorCube_","")-21)).css("border-bottom-color","#000");
144. $("#ColorCube_" + ($(this).attr("id").replace("ColorCube_","")-1)).css("border-right-color","#000");
145. }).click(function() {
146. // done: function(color,link,wall) {}
147. if(obj.options.done(Colors[$(this).attr("id").replace("ColorCube_","")],obj.link,obj.options.wall)) {
148. $(obj.options.wall).css(obj.options.area,Colors[$(this).attr("id").replace("ColorCube_","")]);
149. obj.close();
150. console.log(obj.options.area);
151. }
152. });
153. }
155. jQColorPicker.prototype.show = function() {
156. $(".ColorPicker").css("display","none");
157. this.Picker.css("display","");
158. this.Picker
159. .css("left",this.link.offset().left+this.link.width()+this.options.margin)
160. .css("top",this.link.offset().top+this.link.height()+this.options.margin);
162. if(this.Picker.offset().left+this.Picker.width()+this.link.width()+this.options.margin >= $(document).width()) {
163. this.Picker.css("left",this.link.offset().left-this.Picker.width()-this.options.margin);
164. }
166. if(this.Picker.offset().top+this.Picker.height()+this.link.height()+this.options.margin >= $(window).height()+$(window).scrollTop()) {
167. this.Picker.css("top",this.link.offset().top-this.Picker.height()-this.options.margin);
168. }
169. };
171. jQColorPicker.prototype.close = function() {
172. this.Picker.css("display","none")
173. };
Sorry it's so long I just thought I should include all of it just in case

«Prev
Next »

Response title

Attachments

jQuery Forum

Activity Trend