1

I'm useing spectrum jQuery colorpicker and changing the background-color working properly but there's just one problem. after refreshing the page,the color of the chooser button gets black instead of selected color (for example, red) background color of the page changed without any problem and everything worked properly except that. Look at this(click to see images):

Selected Color -> after refreshing the page

This is my code:

HTML:

<input id="colorpicker" style="display: none;">

JS:

var currColor = $.cookie('body_color') || 'rgba(0, 0, 0, 0.5)';
 $('body').css('background-color', currColor);
 $("#colorpicker").spectrum({
    preferredFormat: 'rgb',
     showInput: true,
     showAlpha: true,
     color: currColor.substring(1),
     move: function(color) {
         $('body').css('background-color', color.toRgbString());
         $.cookie('body_color', color.toRgbString(), {
             expires: 365
         });
     }
 });

how can I fix this?

If I change color.toRgbString() to color.toHexString() this issue get fixed but another issue occurs (after that I cant use rgba colors for page's background and transparency not work):

var currColor = $.cookie('body_color') || 'rgba(0, 0, 0, 0.5)';
     $('body').css('background-color', currColor);
     $("#colorpicker").spectrum({
        preferredFormat: 'rgb',
         showInput: true,
         showAlpha: true,
         color: currColor.substring(1),
         move: function(color) {
             $('body').css('background-color', color.toHexString());
             $.cookie('body_color', color.toHexString(), {
                 expires: 365
             });
         }
     });
Edris
  • 13
  • 5
  • If you store both the hex **and** rgba strings in the cookie, then both will be available on page refresh. All you have yo do is separate them out and use each one appropriately. – Roamer-1888 Mar 29 '17 at 03:06
  • @Roamer-1888 thanks but the problem still exist. – Edris Mar 29 '17 at 03:53
  • Maybe I misunderstood the problem, You say "if I change color.toRgbString() to color.toHexString() ...", Can you add that code to the question please? – Roamer-1888 Mar 29 '17 at 09:02
  • @Roamer-1888 check again.just replace two toRgbString() to toHexString() in the JS code. – Edris Mar 29 '17 at 09:36
  • Related Topic : http://stackoverflow.com/questions/25774643/update-new-color-in-color-picker-palette?rq=1 – Edris Mar 29 '17 at 09:40
  • Sorry, I'm out of ideas. You've just got to work at it until you find something that works. – Roamer-1888 Mar 29 '17 at 10:32

1 Answers1

0

I have an idea, but you should edit the spectrum.js file. This function function inputToRGB(color) forced rgba color of color chooser buttons to set to the rgb(0, 0, 0) (when you choose rgba color, after refreshing the page, the colorpicker button's color forced to set to that but there is no problem with hex).

to fix this:

Find this code in spectrum.js:

function inputToRGB(color) {

    var rgb = { r: 0, g: 0, b: 0 };
    var a = 1;

then change above codes to:

    function inputToRGB(color) {

   var colorString = color.toString(),
       colorsOnly = colorString.substring(colorString.indexOf('(') + 1, colorString.lastIndexOf(')')).split(/,\s*/),
       red = colorsOnly[0],
       green = colorsOnly[1],
       blue = colorsOnly[2],
       opacity = colorsOnly[3];

    var rgb = { r: red, g: green, b: blue };
    var a = opacity;

Use above regex to get color values from browser cookie then extract color values of 4 sections of rgba color codes, then use those in 'rgb' & 'a' variables! you can use both of color.toString() or color.toRgbString().

SEAN
  • 51
  • 5