How to create a Jquery color picker plugin

Hi, I’ll demonstrate how to implement new plugins using Jquery and css in simple and easiest way of technology world.

I am a beginner in Jquery and It has been exciting for me learn new web technologies and the way Jquery plugins are created. After doing some google and going through various Jquery plugins a few ideas came to my mind and finally I successfully implemented a simple Jquery color picker. The color picker plugin can be very helpful in creating attractive web interface and change the colors of website elements at runtime on the fly.

Being a fresher I am very curious and excited to learn new web technologies and I found Jquery as a very interesting and smart technology.

Jquery is a cross-browser JavaScript library designed to simplify the client-side scripting of HTML. It was released in January 2006 at BarCamp NYC by John Resig. It is not a language it is a client side open source script. Jquery helps to improve websites UI.

Using HTML, CSS and Jquery I have created a color picker which looks like below.

Here goes the explanation of the complete code:

To understand the complete Jquery Color Picker download the Source files for Jquery color picker.

Explanation of  colorpicker.js

1. I have created a blank Javascript file named colorpicker.js
2. Created a function names colorPicker
3. Function colorPicker is created to store all colors with their respective hexadecimal color codes and then append the color codes to the list item
4. All hexadecimal color codes are stored in an Array named colorList
5. I then append these color codes into the list item

Here is the complete code for colorpicker.js-

(function ($) {
colorPicker = function () {	// Declare function name
var colorList = new Array("000000","000000","000000","000000","003300","006600","009900","00CC00","00FF00","330000","333300","336600","339900","33CC00","33FF00","660000","663300","666600","669900","66CC00","66FF00","000000","333333","000000","000033","003333","006633","009933","00CC33","00FF33","330033","333333","336633","339933","33CC33","33FF33","660033","663333","666633","669933","66CC33","66FF33","000000","666666","000000","000066","003366","006666","009966","00CC66","00FF66","330066","333366","336666","339966","33CC66","33FF66","660066","663366","666666","669966","66CC66","66FF66","000000","999999","000000","000066","003366","006666","009966","00CC66","00FF66","330099","333399","336699","339999","33CC99","33FF99","660099","663399","666699","669999","66CC99","66FF99","000000","CCCCCC","000000","0000CC","0033CC","0066CC","0099CC","00CCCC","00FFCC","3300CC","3333CC","3366CC","3399CC","33CCCC","33FFCC","6600CC","6633CC","6666CC","6699CC","66CCCC","66FFCC","000000","ffffff","000000","0000FF","0033FF","0066FF","0099FF","00CCFF","00FFFF","3300FF","3333FF","3366FF","3399FF","33CCFF","33FFFF","6600FF","6633FF","6666FF","6699FF","66CCFF","66FFFF","000000","FF0000","000000","990000","993300","996600","999900","99CC00","99FF00","CC0000","CC3300","CC6600","CC9900","CCCC00","CCFF00","FF0000","FF3300","FF6600","FF9900","FFCC00","FFFF00","000000","00FF00","000000","990033","993333","996633","999933","99CC33","99FF33","CC0033","CC3333","CC6633","CC9933","CCCC33","CCFF33","FF0033","FF3333","FF6633","FF9933","FFCC33","FFFF33","000000","0000FF","000000","990066","993366","996666","999966","99CC66","99FF66","CC0066","CC3366","CC6666","CC9966","CCCC66","CCFF66","FF0066","FF3366","FF6666","FF9966","FFCC66","FFFF66","000000","FFFF00","000000","990099","993399","996699","999999","99CC99","99FF99","CC0099","CC3399","CC6699","CC9999","CCCC99","CCFF99","FF0099","FF3399","FF6699","FF9999","FFCC99","FFFF99","000000","00FFFF","000000","9900CC","9933CC","9966CC","9999CC","99CCCC","99FFCC","CC00CC","CC33CC","CC66CC","CC99CC","CCCCCC","CCFFCC","FF00CC","FF33CC","FF66CC","FF99CC","FFCCCC","FFFFCC","000000","FF00FF","000000","9900FF","9933FF","9966FF","9999FF","99CCFF","99FFFF","CC00FF","CC33FF","CC66FF","CC99FF","CCCCFF","CCFFFF","FF00FF","FF33FF","FF66FF","FF99FF","FFCCFF","FFFFFF");
$(".Container").text("");
$(".Container").append("<div id='colorshade'></div><div class='colorbox'><ul id='setList'></ul></div>");

for(var i = 0; i{
$("#setList").append("<li style='background-color:"+"#"+colorList[i]+";' id="+"#"+colorList[i]+" ></li>"); //Bind list item here
}
}
}) (jQuery)

Explanation of pickcolor.html

1. I call the function colorPicker() on the HTML page on the click event
2. colorPicker() is same function I created earlier on colorpicker.js above

colorPicker();

And call the below function to select a particular color onmousehover:

<script type="text/javascript">
$(document).ready(function() {
$('html').click(function(){
    $(".Container").fadeOut();
});
$("#pickcolor").click(function(e){
e.stopPropagation();
$(".Container").fadeIn();
colorPicker();					 //call colorpicker here
$(".colorbox ul").children('li').hover(function(){   // select color on mousehover
var selected_code = $(this).attr('id');
$("#pickcolor").css("background-color",selected_code);
$("#colorshade").html(selected_code);          	// see color code name
$(".Textcolor").css("color",selected_code);
$(".Boxcolor").css("background-color",selected_code);
});
});
});
</script>

And then add the below HTML code inside the body tag on pickcolor.html. This will actually add the user interface on the web page to choose colors and change page elements on the fly.

<div class="wrapper">
<table border="0" cellpadding="2" cellspacing="0">
<tr><td>Choose color :<div id="pickcolor"></div>
<div class="Container"></div></td>
<td> </td></tr>
<tr><td><div class="Textcolor">Implement your Jquery Plugins</div></td><td><div class="Boxcolor"></div></td></tr>
</table>
</div>

Oh I missed the most important CSS Document to create, the css will format the look and feel of your user interface for color picker.

Here goes the css code on the file named colorpicker.css :

ul { padding:0px; margin:0px;}
.wrapper{top:50px; left:50px; position:absolute; width:500px; height:auto;}
#pickcolor { width:40px; height:20px;border:1px solid #000; background-color:#3399CC;}
.Container {width:210px; height:141px; border:1px solid #000; position:relative; top:0px; left:0px; display:none; z-index:9999;}
#colorshade{width:210px; height:20px; border-bottom:1px solid #000; position:relative; top:0px; left:0px; text-align:center; font-size:13px;}
.colorbox{ width:210px; height:120px; border:0px solid #000; position:relative; top:0px; left:0px;}
.colorbox li{ display:block; float:left; width:8px; height:8px; border:1px solid #fff;}
.colorbox li:hover{ display:block; float:left; width:8px; height:8px; border:1px solid #000; cursor:crosshair;}
.Textcolor { font-size:22px; padding:10px 10px; font-weight:bold;}
.Boxcolor { width:100px; height:70px; border:1px solid #ccc; background-color:#33CCCC;}

Hope you’ve enjoyed reading the tutorial. Do send your comments. You can change the code if you want and use it.

Download color picker source code here.