jQuery UI Color Picker

Question

I have heard that jQuery UI includes a Color Picker but could find little documentation regarding it    Does it exist   Any decent documentation on how to implement it   I found this  http   docs jquery com UI Colorpicker  But using       colorpicker   colorpicker      does not work  with Firebug telling me  colorpicker    is not a method   It seems to work fine  unless I put it in a dialog UI where it then decides to break

User · Answer

Make sure you have jQuery UI base and the color picker widget included on your page (as well as a copy of jQuery 1.3):

<link rel="stylesheet" href="http://dev.jquery.com/view/tags/ui/latest/themes/flora/flora.all.css" type="text/css" media="screen" title="Flora (Default)">

<script type="text/javascript" src="http://dev.jquery.com/view/tags/ui/latest/ui/ui.core.js"></script>

<script type="text/javascript" src="http://dev.jquery.com/view/tags/ui/latest/ui/ui.colorpicker.js"></script>

If you have those included, try posting your source so we can see what's going on.

User · Answer

That is because you are trying to access the plugin before it s loaded  You should try making a call to it when the DOM is loaded by surrounding it with this     document  ready function            colorpicker   colorpicker

User · Answer

Had the same problem  is not a method  with jQuery when working on autocomplete  It appeared the code was executed before the autocomplete js was loaded  So make sure the ui colorpicker js is loaded before calling colorpicker

User · Answer

You can find some demos and plugins here   http   jqueryui pbworks com ColorPicker

User · Answer

Perhaps I am very late  but as of now there s another way to use it using the jquery ui slider   Here s how its shown in the jquery ui docs    x000D   x000D  function hexFromRGB r  g  b    x000D      var hex     x000D        r toString  16    x000D        g toString  16    x000D        b toString  16   x000D         x000D        each  hex  function  nr  val     x000D        if   val length     1     x000D          hex  nr      0    val  x000D          x000D          x000D      return hex join       toUpperCase    x000D      x000D    function refreshSwatch     x000D      var red        red    slider   value     x000D        green        green    slider   value     x000D        blue        blue    slider   value     x000D        hex   hexFromRGB  red  green  blue    x000D           swatch    css   background-color         hex    x000D      x000D      function     x000D           red   green   blue    slider   x000D        orientation   horizontal   x000D        range   min   x000D        max  255  x000D        value  127  x000D        slide  refreshSwatch  x000D        change  refreshSwatch x000D          x000D           red    slider   value   255    x000D           green    slider   value   140    x000D           blue    slider   value   60    x000D        x000D   red   green   blue   x000D  float  left  x000D  clear  left  x000D  width  300px  x000D  margin  15px  x000D    x000D   swatch   x000D  width  120px  x000D  height  100px  x000D  margin-top  18px  x000D  margin-left  350px  x000D  background-image  none  x000D    x000D   red  ui-slider-range   background   ef2929    x000D   red  ui-slider-handle   border-color   ef2929    x000D   green  ui-slider-range   background   8ae234    x000D   green  ui-slider-handle   border-color   8ae234    x000D   blue  ui-slider-range   background   729fcf    x000D   blue  ui-slider-handle   border-color   729fcf    x000D   lt link rel  stylesheet  href    code jquery com ui 1 11 4 themes smoothness jquery-ui css  gt  x000D   x000D   lt script src    code jquery com jquery-1 10 2 js  gt  lt  script gt  x000D   lt script src    code jquery com ui 1 11 4 jquery-ui js  gt  lt  script gt  x000D   lt p class  ui-state-default ui-corner-all ui-helper-clearfix  style  padding 4px   gt  x000D     lt span class  ui-icon ui-icon-pencil  style  float left  margin -2px 5px 0 0   gt  lt  span gt  x000D    Simple Colorpicker x000D   lt  p gt  x000D    x000D   lt div id  red  gt  lt  div gt  x000D   lt div id  green  gt  lt  div gt  x000D   lt div id  blue  gt  lt  div gt  x000D    x000D   lt div id  swatch  class  ui-widget-content ui-corner-all  gt  lt  div gt  x000D   x000D   x000D

[jquery] jQuery UI Color Picker

Examples related to jquery

Examples related to jquery-ui

Examples related to documentation

Examples related to color-picker