Colorpicker using jquery plugin

Question

I'm trying to design a page which has a colorpicker to set the forecolor and backcolor of a text. I came through the demo of a colorpicker which seemed appealing and tried to implement the same on a pop-up. I would like to know whether there is anyone here who's familiar with the colorpicker described in the below link:

http://www.eyecon.ro/colorpicker/

The query is " is it possible to bind this plugin to a div with different name?" If yes, please feel free to help..

Answer 1

The page includes the following code snippet:

$('#colorpickerHolder').ColorPicker({flat: true});

The first part is a standard jQuery selector, so you should have noproblem replacing the ID for the div:

<div id="myPicker"></div>

// snip

$('#myPicker').ColorPIcker({flat: true});

On the invocation page of the website they have this, which suggests that maybe it works on an input field? I've downloaded the package and there's no better instructions. You might have to dig through the source code to see how it works.

Invocation code All you have to do is to select the elements in a jQuery way and call the plugin. $('input').ColorPicker(options);

Answer 2

I have used this color picker and it works fine. I think you are using the demo files for using this color picker. In the demo file "index.html", you can find code snippets like $('#colorpickerHolder').ColorPicker({flat: true}); but making any changes here wont affect the working on page.

If you notice, the author has included a separate code file at the top

   <script type="text/javascript" src="js/layout.js?ver=1.0.2">
    </script>

this file, layout.js contains all the calls to the function ColorPicker.

I would recommend you to create a fresh page, with just these lines at the top.

<script type="text/javascript" src="js/jquery.js">
    </script>
    <script type="text/javascript" src="js/colorpicker.js">
    </script>
    <script type="text/javascript">
        $(document).ready(function(){
            $('#colorpickerHolder').ColorPicker({
                flat: true
            });
            $('#myColorpickerHolder').ColorPicker({
                flat: true
            });        
         });
    </script>

Now, just add two divs with IDs "colorpickerHolder" and "myColorpickerHolder" in the page, you will see each one is a separate color picker.