How to add color picker in jQuery/Html and Php

Now we are discussing how to add color picker in php/html project, for example if you want give a functionality to user select color from color picker for his background color profile,for this we will use third party color picker and call it on particular div area where we want display color picker.

Step 1: first we will include farbtastic css and js file.

 
<script type="text/javascript" src="js/colorpicker/farbtastic.js"></script>
 <link type="text/css" rel="stylesheet" href="css/farbtastic.css" />

Step 2: we will call color picker method on document ready event.

 
$(document).ready(function () {  
  $('#pickerleft').farbtastic('#colorleft');
});

colorright/ colorleft’ is text-box id where we will show color id

Step 3: we will create html template for display color picker.

 
<table width="100%">
<tr><td colspan="2" height="34px;" ><h4 class="green-text roundeddiv shadowImgae" style="padding-left:22px;">Background Color Management:</h4></td></tr>
<tr>
<td width="27%" style="padding-right:20px;"><div id="pickerleft"></div></td>
   <td width="70%" >
<form action="index.php?action=bgcolor&mode=add" method="post" enctype="multipart/form-data">
<table><tr><td>
<label for="file">left<label><td>
<td><input type="text" id="colorleft" name="colorleft" value="<= $bg_colorleft ?>" />
</td>
</tr>
</table>