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

Reading and Generating QR codes in Python using QRtools

What are QR codes? A Quick Response (QR) code is a 2 dimensional barcode that is used due to its fast readability and relatively large storage capacity.  2 dimensional barcodes are similar to one dimensional barcodes, but can store more information per unit area. Installation and Dependencies Linux:   qrtools can be installed on debian based linux systems with the following commands $sudo apt-get update $sudo apt-get install python-qrtools The following dependencies must be installed as well [sudo] pip install pypng [sudo] pip install zbar [sudo] pip install pillow Windows:   qrtools can be installed on windows by downloading the file from here(https://pypi.python.org/pypi/qrtools/0.0.1). On downloading and extraction, run the following command from inside the folder python setup.py install Generating a qrCode: qrtools contains a class QR (can be viewed in the source code), for which we must initially create an object. The object takes the ...
Post a Comment
Read more

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