Color Picker: Works even in IE6

March 4th, 2010 by ljshj Leave a reply »

Works even in IE6

Love that quote from the color picker over at RaphaelJS land. This plugin by Dmitry Baranovskiy gives you an easy color picker in short order:

JAVASCRIPT:

  1.  
  2. var icon = Raphael(“picker”, 23, 23).colorPickerIcon(11, 11, 10);
  3.  
  4. icon.attr({cursor: ”pointer”}).node.onclick = function () {
  5.     document.getElementById(“benefits”).style.visibility = ”visible”;
  6.     var out = document.getElementById(“output”);
  7.     out.style.visibility = ”visible”;
  8.                
  9.     // this is where colorpicker created
  10.     var cp = Raphael.colorpicker(document.body.offsetWidth / 2 - 150, 250, 300, ”#eee”, document.getElementById(“picker2″));
  11.                
  12.     out.onkeyup = function () {
  13.         cp.color(this.value);
  14.     };
  15.     // assigning onchange event handler
  16.     cp.onchange = function (clr) {
  17.         out.value = clr;
  18.         document.body.style.background = clr;
  19.         document.body.style.color = Raphael.rgb2hsb(clr).b <.5 ? ”#fff” : ”#666″;
  20.      };
  21.      // that’s it. Too easy
  22.                
  23.      icon.node.onclick = null;
  24. };
  25.  

colorpicker

Advertisement

Leave a Reply