Click here to Skip to main content
Click here to Skip to main content

Tagged as

Simple jQuery Color Picker

, 18 Oct 2013 CPOL
Rate this:
Please Sign up or sign in to vote.
Simple and Fast Color Picker Built on JQuery

Introduction

This simple color picker solved multiple issues I had with other color pickers:

  1. Get the color picker reference any time after creation. That is the first time we do $('.selectorClass').colorPicker(), it creates the color picker and the second time we get the reference to color picker instance associated with the selector element. This is important if we have to create the color picker dynamically based on some values received from the server on the fly and refer to them later.
  2. I need to have only one instance of color table showing at a time, that's automatically close the other open one when I click on a different invoker button.
  3. I also have the need of not referencing any image files.
  4. I need to add hundreds of color picker buttons, so preloading color picker div as other color pickers pluggins seem to be reason of slow rendering.

Background

I needed to dynamically add color picker button, could be 100 of them on a page. I was using jPicker. JPicker is great, but it is a little too much for my project, and the biggest issue is being slow when you have a lot of color pickers. Also, it adds the HTML code for every color invoker button, regardless of whether the color picker table is showing or not. So I Googled around and found this and this.

But all of them add the HTML code before invoking them, and I really have a problem with that, I think that is part of the reason that it is slow.

Using the Code

Here is a common usage of the control:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <title>Simple JQuery Color Picker</title>
    <link type="text/css" href="colorPicker.css" rel="stylesheet" />
    <script type="text/javascript" 
    src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript" src="colorPicker.js"></script>
   
    <script type="text/javascript">
        function onColorChanged(color, el) {
            $('.result').css('background-color', color);
        }

        $(document).ready(function() {
            $('.b1').colorPicker({ color: 'blue', onChangeColor: onColorChanged });
            setTimeout(function() {
                $('.b1').colorPicker().setColor('purple');
            }, 2000);
            setTimeout(function () {
                $('.b1').colorPicker().setColor('green', true); //the second parameter 
                			// will cause the onColorChanged event to fire.
            }, 2000);
        });
    </script>
</head>
<body>
     Color Picker: <button class="colorPickerButton b1"></button>                      
     <div class="result" style="width: 200px; height: 200px;"></div>
</body>

</html>

Points of Interest

So far, I have only spent 3 nights on creating this control, so it's not fully tested.

I have tested on IE 7-10, Firefox, and Chrome.

There are a lot of features that I want to add to it, such as having a textbox to take custom color input, etc.

History

  • Oct 17, 2013 First draft.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Ming_Lu
Software Developer Oliver Wyman Groups
United States United States
Education: Masters in Applied mathematics
 
Certification:
MCP in Asp.net
MCP in SQL Server 2008 Implementation.
 
Working Experience In .Net since 2005

Comments and Discussions

 
QuestionDownload missing? PinmvpFlorian Rappl17-Oct-13 22:16 
AnswerRe: Download missing? PinmemberMing_Lu18-Oct-13 4:49 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.141223.1 | Last Updated 18 Oct 2013
Article Copyright 2013 by Ming_Lu
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid