Skip to main content

jQuery Color Picker

This tutorial is to see how to do simple color picker using jQuery. There are various jQuery plugins providing color picker feature. This tutorial gives a simple example code as a guideline to start writing your own jQuery color picker plugin.
In this example, we are using CSS selectors to show color palette. On clicking each color in the palette we store the selected color into a pointer to be applied to the target DIV. We are using jQuery CSS function to pick and apply colors to the target DIV.


HTML Code for Color Palette:
This is the HTML code for showing color palette to pick colors. It shows four colors with separate DIV tags.
<div class="circular-div" id="blue" onClick="pickColor(this.id);"></div>
<div class="circular-div"  id="red" onClick="pickColor(this.id);"></div>
<div class="circular-div"  id="yellow" onClick="pickColor(this.id);"></div>
<div class="circular-div"  id="aqua" onClick="pickColor(this.id);"></div>  
<div id="target" onClick="applyColor();">Click to Apply Color</div>
<div id="pointer"></div>
And the styles are,
<style type="text/css">
#pointer {
 position: absolute;
 top: 0;
 left: 0;
 height: 20px;
 width: 20px;
 border:#000 1px solid;
 border-radius:50%;
}

.circular-div{padding:20px;width:25px;height:200px;float:left;margin:1px;}
#aqua{background:aqua;}
#yellow{background:yellow;}
#bisque{background:bisque;}
#aquamarine{background:aquamarine;}
#target{float:left;padding:20px;height:200px;width:250px;border:#F0F0F0 1px solid;}
</style>

jQuery Color Picker Script:
This script contains very few lines to implement jQuery color picker. We have a pointer to track color on mouse move. On the click event of the color palette, we select the color code and save it to the pointer object. This color code will be applied as the target DIV’s background on its click event.

<script type="text/javascript">
 var demoContent = document.getElementById("demo-content");
 demoContent.addEventListener('mousemove',function(event) {   
  $("#pointer").css({'top':event.pageY+'px','left':event.pageX+'px'}); 
 });
 function applyColor(){
  $("#target").css('background-color',$("#pointer").css('background-color'));
 }
 function pickColor(id){
  $("#pointer").css('background-color',id); 
 }
</script>

Complete Picker code :

<html>
 <body> 
  <script src="https://code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></script>
  <style type="text/css">
  #pointer {
   position: absolute;
   top: 0;
   left: 0;
   height: 20px;
   width: 20px;
   border:#000 1px solid;
   border-radius:50%;
  }
  .circular-div{padding:20px;width:25px;height:200px;float:left;margin:1px;}
  #aqua{background:aqua;}
  #yellow{background:yellow;}
  #bisque{background:bisque;}
  #aquamarine{background:aquamarine;}
  #target{float:left;padding:20px;height:200px;width:250px;border:#F0F0F0 1px solid;}
  </style>
  <div id="demo-content">
   <div class="circular-div" id="aquamarine" onClick="pickColor(this.id);">
    
   </div>
   <div class="circular-div"  id="bisque" onClick="pickColor(this.id);">
     
   </div>
   <div class="circular-div"  id="yellow" onClick="pickColor(this.id);">
   </div>
   <div class="circular-div"  id="aqua" onClick="pickColor(this.id);">
   </div>  
   <div id="target" onClick="applyColor();">Click to Apply Color</div>
   <div id="pointer"></div>
  </div>
  <script type="text/javascript">
   var demoContent = document.getElementById("demo-content");
   demoContent.addEventListener('mousemove',function(event) {   
    $("#pointer").css({'top':event.pageY+'px','left':event.pageX+'px'}); 
   });
   function applyColor(){
    $("#target").css('background-color',$("#pointer").css('background-color'));
   }
   function pickColor(id){
    $("#pointer").css('background-color',id); 
   }
  </script>
 </body>
</html>
Hope you understand it.If any queries please comment below.Please subscribe to other solutions.Thank you :)
Labels:

Comments

Post a Comment

Popular posts from this blog

MYSQL CONNECTION USING PDO WITH PHP

Hello guys, In the previous tutorial we have seen how to connect to MySQL database with PHP using MySQLi. Today we will learn how to connect with PDO. As a PHP programmer we have learned how to access database by using either MySQL and MySQLi. As of PHP 5.1, there's a better way. PHP Data Objects(PDO) provide methods for prepared statements and working with objects that will make you far more productive! PDO Introduction :        PDO provides a data-access abstraction layer, which means that, regardless of which database you're using, you use the same functions to issue queries and fetch data. PDO does not provide a database abstraction; it doesn't rewrite SQL or emulate missing features. Database Support:       The extension can support any database that a PDO driver has been written for. The following drivers currently implement the PDO interface: PDO_CUBRID Cubrid PDO_DBLIB FreeTDS / Microsoft SQL Server / Sybase PDO_FIREBIRD Firebird PDO_I...
4 comments
Read more

Convert JSON to ARRAY in PHP

 To convert an Array to JSON in PHP, we use json_encode() function. The function is used to encode a value to JSON format $arr = array ( 'Millie' => 'Eleven' ,             'Mike' => 'Finn' ,             'Gaten' => 'Dustin' ,             'Noah' => 'Will' ); echo json_encode ( $arr ). " \n " ; Output : { "Millie" : "Eleven" , "Mike" : "Finn" , "Gaten" : "Dustin" , "Noah" : "Will" }
Post a Comment
Read more

MYSQL DATABASE CONNECTION WITH PHP

Hello friends, today we will learn how to connect to  MySQL  database with PHP. This tutorial will require a MySQL database and a web development environment using mysql, apache and php and a simple text editor. The tutorial takes you through establishing a  MySQL  connection using php on a web page, connecting to a  MySQL  table and retrieving the results and displaying them back on the web page. Earlier versions of PHP used the  MySQL  extension.However, this extension was depreciated in 2012. Later can work with  MySQL  database using MySQLi extension (the "i" stands for improved) PDO (PHP Data Objects)        The main difference between these two are if you want to switch your project to another database PDO makes it easy(since it can connect 12 different databases). You only have to change the connection string and a few queries. With MySQLi, you will need to rewrite the entire code - queries included.In this t...
Post a Comment
Read more