Color Picker

JavaScript
16

Sure!

Here’s a new demo.

Here’s the code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <!--http://www.sitepoint.com/forums/showthread.php?1023843-Color-Picker-->
    <link rel="stylesheet" href="css/colorpicker.css" type="text/css" />
    <link rel="stylesheet" media="screen" type="text/css" href="css/layout.css" />
    <title>ColorPicker - jQuery plugin</title>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/colorpicker.js"></script>
    <script type="text/javascript" src="js/jquery.cookie.js"></script>
    <style>
      body{padding:10px;}
      #text{text-align:left;margin:15px 0 0 5px;}
    </style>
  </head>
  
  <body>
    <div id="colorSelector"><div></div></div>
    <p id="text">The cookie currently contains: <span id="cookie">no value</span></p>
    
    <script>
      $(document).ready(function(){
        var col = 'cf0fcf';
        
        function updateCookieInfo(c){
          $("#cookie").html(c);
          $("#text").css("color", "#" + c);
          $("#colorSelector div").css("background-color", "#" + c);
        }
        
        if(typeof $.cookie('color') != 'undefined'){
          col = $.cookie('color');
          updateCookieInfo(col);
        }
         
        $('#colorSelector').ColorPicker({
          color: col,
          onShow: function (colpkr) {
            $(colpkr).fadeIn(500);
            return false;
          },
          onHide: function (colpkr) {
            $(colpkr).fadeOut(500);
            $.cookie('color', col, { expires: 7 });
            updateCookieInfo(col);
            return false;
          },
          onChange: function (hsb, hex, rgb) {
            col = hex;
            $('#colorSelector div').css('backgroundColor', '#' + hex);
          }
        });
      });
    </script>
  </body>
</html>

If you have any questions about how this works, just let me know.