Overview / Getting Started

Home

Getting Started

The chromoselector color picker has two operational modes.

Inline mode
This is the default mode. When using this mode, the color picker is automatically shown under the element to which it was attached when the user clicks on this element.
Static mode
This is the alternate operational mode. When using this mode, you must specify where the color picker will be shown. This mode is especially useful when you want to always display the color picker on the page or when integrating the color picker into a dialog. Sample integrations of chromoselector are available for the jQuery UI dialog and jQuery mobile dialog.

You can see basic working examples of both modes in this demo.
Below you can see step-by-step guide on setting up the chromoselector color picker in both modes.

Inline Mode

The first step in integrating the chromoselector color picker into a web page is to upload the chromoselector.min.js, chromoselector.css and the jquery library (the provided jquery-1.10.2.min.js or any other version greater than 1.3.0 at your discretion) files to your web server.

Next, you need to include these files in the HEAD element of your page, as follows:

<html>
<head>
    <!-- include the CSS file -->
    <link rel="stylesheet" href="http://example.com/libs/chromoselector.css" />
    <!-- include the JavaScript files -->
    <script src="http://example.com/libs/jquery-1.10.2.min.js" type="text/javascript"></script>
    <!-- N.B.: jQuery MUST be included BEFORE the chromoselector script -->
    <script src="http://example.com/libs/chromoselector.min.js" type="text/javascript"></script>
</head>
<body>
    ...
</body>
</html>

At this point you need to create a form in the BODY element of your page and add an INPUT element to it. We will later attach the color picker to this element.

<form action="process.php" method="post">
    <div>
        <label for="my_color">Pick a color: </label>
        <input type="text" id="my_color" name="color" value="#ff0000" />
    </div>
</form>

The last step is to attach the color picker to the INPUT element. To accomplish this, we create a SCRIPT element in the HEAD of the page. Then we schedule the execution of our code upon the completion of the page load by using the $(document).ready() jQuery method. Inside the ready method, we find the desired element using a jQuery selector, and call the chromoselector method on it.

$(document).ready(function (){
    $("#my_color").chromoselector();
});

At this point the color picker is fully integrated and the code for the entire page should look like this:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Chromoselector inline demo page</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" href="chromoselector.css" />
    <script src="jquery-1.10.2.min.js" type="text/javascript"></script>
    <script src="chromoselector.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(document).ready(function () {
        $("#my_color").chromoselector();
    });
    </script>
</head>
<body>
    <form action="process.php">
        <div>
            <label for="my_color">Pick a color:</label>
            <input id="my_color" name="color" type="text" value="#ff0000" />
        </div>
    </form>
</body>
</html>

Static Mode

Next, you need to include these files in the HEAD element of your page, as follows:

<html>
<head>
    <!-- include the CSS file -->
    <link rel="stylesheet" href="http://example.com/libs/chromoselector.css" />
    <!-- include the JavaScript files -->
    <script src="http://example.com/libs/jquery-1.10.2.min.js" type="text/javascript"></script>
    <!-- N.B.: jQuery MUST be included BEFORE the chromoselector script -->
    <script src="http://example.com/libs/chromoselector.min.js" type="text/javascript"></script>
</head>
<body>
    ...
</body>
</html>

At this point you need to create a form in the BODY element of your page and add an INPUT element to it. We will later attach the color picker to this element. You also need to add a target element somewhere on the page, which is where the color picker will be appended to. In this example, we place the INPUT element inside our target element, a DIV element with an ID set to "picker".

<form action="process.php" method="post">
    <div id="picker">
        <input type="text" id="my_color" name="color" value="#ff0000" />
    </div>
</form>

At this point, we are finished preparing the HTML and we are missing the JavaScript code that will create the color picker. In order to put the color picker into the static mode, we specify a target as a property when calling the chromoselector API and set it to the value of "#picker". This will append the color picker to the element with the id of "picker", our DIV element. Also, since by default the color picker will be shown when the user clicks on the INPUT element, we need to override this behaviour by setting the "autoshow" property to false. And lastly, since we have set the "autoshow" property to false, we need to show the picker as soon as it is initialised. We accomplish this by calling the "show" method on the color picker inside the "create" event.

$(document).ready(function () {
    $("#my_color").chromoselector({
        target: "#picker",
        autoshow: false,
        create: function () {
            $(this).chromoselector("show", 0);
        },
        width: 260
    });
});

Although the integration of the color picker at this point is finished we might still want to add a bit of a style so that it looks pretty. To accomplish this we can add the following snippet to the HEAD element of our page, as by setting the color into static mode, we discard the default styling.

<style type="text/css">
    #picker {
        border: 1px solid;
        float: left;
        padding: 1em;
        background-color: #e4ccc1;
    }
    input {
        width: 100%;
    }
</style>

At this point the color picker is fully integrated and the code for the entire page should look like this:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Chromoselector static mode demo page</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" href="chromoselector.css" />
    <script src="jquery-1.10.2.min.js" type="text/javascript"></script>
    <script src="chromoselector.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(document).ready(function () {
        $("#my_color").chromoselector({
            target: "#picker",
            autoshow: false,
            create: function () {
                $(this).chromoselector("show", 0);
            },
            width: 260
        });
    });
    </script>
    <style type="text/css">
        #picker {
            border: 1px solid;
            float: left;
            padding: 1em;
            background-color: #e4ccc1;
        }
        input {
            width: 100%;
        }
    </style>
</head>
<body>
    <form action="process.php">
        <div id="picker">
            <input id="my_color" name="color" type="text" value="#ff0000" />
        </div>
    </form>
</body>
</html>

ChromoSelector - jQuery Color Picker plugin - Overview / Getting Started

Getting Started

Inline Mode

Static Mode

Overview / Getting Started