vanderlee/colorpicker — Issue #1: Remove inline image calls from JS and move to CSS
Author: cjboco
Created: 2011-11-01 23:15:29+00:00
State: open

I noticed that you've placed a lot of image calls directly inside the JavaScript file. This causes issues if your script is not located at the same level as the "images" directory.

I fixed this by declaring new CSS rules:

#ui-colorpicker-bar { background-color: rgb(0, 0, 255); }
#ui-colorpicker-bar-layer-1 { background: url(images/bar.png) repeat-x; }
#ui-colorpicker-bar-layer-2 { background: url(images/bar.png) repeat-x; }
#ui-colorpicker-bar-layer-3 { background: url(images/bar.png) repeat-x; }
#ui-colorpicker-bar-layer-4 { background: url(images/bar.png) repeat-x; }
#ui-colorpicker-bar-layer-alpha { background: url(images/bar-opacity.png); }
#ui-colorpicker-bar-layer-alphabar { background: url(images/bar-alpha.png); }
#ui-colorpicker-preview-initial-alpha { background: url(images/preview-opacity.png) repeat; }
#ui-colorpicker-preview-current-alpha { background: url(images/preview-opacity.png) repeat; }
#ui-colorpicker-map-layer-1 { background: url(images/map.png) no-repeat; }
#ui-colorpicker-map-layer-2 { background: url(images/map.png) no-repeat; }
#ui-colorpicker-map-layer-alpha { background: url(images/map-opacity.png); }
#ui-colorpicker-map-pointer { display: inline-block; width: 15px; height: 15px; background: url(images/map-pointer.png) no-repeat; }
#ui-colorpicker-bar-pointer { display: inline-block; width: 20px; height: 7px; background: url(images/bar-pointer.png) no-repeat; }

..and then stripping all of the inline style calls in your JS file. The only issue, is that instead of using for your pointers, I converted them to and kept the ID's you had assigned. Works as expected now.