Color Picker

Hello

I put this script in my website, but he don’t save the color in cookies when i restart the browser.

http://www.eyecon.ro/colorpicker/#download

Anyone know solve the problem?

Thanks!

Hi,

I looked at the documentation you linked to and it doesn’t mention anything about cookies.
I guess you’ll have to implement this feature yourself.
As you are using jQuery anyway, I would recommend this plugin: https://github.com/carhartl/jquery-cookie
Here’s how to use it: http://stackoverflow.com/questions/1458724/how-to-set-unset-cookie-with-jquery
And here’s a tutorial, explaining how to use it in an actual project: http://hibbard.eu/using-cookies-with-jquery-to-make-a-simple-style-switcher/

HTH

Thanks for your reply.

In documentation don’t say anything, but in file color.js have this code. I think something is wrong.

// JavaScript Document
$(document).ready(function () {
    var $color = getCookie('text-color');
    if ($color.length > 0) {
        $(".movief a").css('color', $color);
        $(".yazitip").css('color', $color);
        $("#content .sidebar-right h2").css('color', $color);
        $("#nav li a").css('color', $color);
        $("#nav li a:link").css('color', $color);
        $("#nav li a:visited").css('color', $color);
        $(".wp-pagenavi span").css('color', $color);
        $(".wp-pagenavi a").css('color', $color);
        $("#searchbox").css('color', $color);
        $("#bgdiv").css('background-color', $color);
    } else {
        $color = $(".movief a").css('color');
        $color = $(".yazitip").css('color');
        $color = $("#content .sidebar-right h2").css('color');
        $color = $("#nav li a").css('color');
        $color = $("#nav li a:link").css('color');
        $color = $("#nav li a:visited").css('color');
        $color = $(".wp-pagenavi span").css('color');
        $color = $(".wp-pagenavi a").css('color');
        $color = $("#searchbox").css('color');
    }
    $('#colorSelector').ColorPicker({
        color: $color,
        onShow: function (colpkr) {
            $(colpkr).fadeIn(500);

            return false;
        },
        onHide: function (colpkr) {
            $(colpkr).fadeOut(500);

            return false;
        },
        onChange: function (hsb, hex, rgb) {
            $('.movief a').css('color', '#' + hex);
            $('.yazitip').css('color', '#' + hex);
            $('#content .sidebar-right h2').css('color', '#' + hex);
            $('#nav li a').css('color', '#' + hex);
            $('#nav li a:link').css('color', '#' + hex);
            $('#nav li a:visited').css('color', '#' + hex);
            $('.wp-pagenavi span').css('color', '#' + hex);
            $('.wp-pagenavi a').css('color', '#' + hex);
            $('#searchbox').css('color', '#' + hex);
            setCookie('text-color', '#' + hex);
            $("#bgdiv").css('background-color', '#' + hex);
        }
    });


});

$("div.color-box").click(function () {
    var $color = $(this).css('background-color');
    $(".movief a").css('color', $color);
    $(".yazitip").css('color', $color);
    $("#content .sidebar-right h2").css('color', $color);
    $("#nav li a").css('color', $color);
    $("#nav li a:link").css('color', $color);
    $("#nav li a:visited").css('color', $color);
    $(".wp-pagenavi span").css('color', $color);
    $(".wp-pagenavi a").css('color', $color);
    $("#searchbox").css('color', $color);
    setCookie('text-color', $color);
});

function getCookie(c_name) {
    if (document.cookie.length > 0) {
        c_start = document.cookie.indexOf(c_name + "=");
        if (c_start != -1) {
            c_start = c_start + c_name.length + 1;
            c_end = document.cookie.indexOf(";", c_start);
            if (c_end == -1) {
                c_end = document.cookie.length;
            }
            return unescape(document.cookie.substring(c_start, c_end));
        }
    }
    return "";
}

function setCookie(c_name, value, expiredays) {
    var exdate = new Date();
    exdate.setDate(exdate.getDate() + expiredays);
    document.cookie = c_name + "=" + escape(value) + ((expiredays == null) ? "" : ";expires=" + exdate.toGMTString());
}

Oh, ok. It seems to have cookie functionality built in.

Then just use the setCookie() method to save your user’s preferences.
If you’re not sure how, let me know and I’ll knock you up a demo.

If is possible…Thanks. :slight_smile:

So, just having a look at this now, but can’t find a file entitled “color.js”.
Is this a file you made yourself or is it part of the download I seem to have missed?

Sorry man, i see the souce code here.

http://duckranger.com/demos/colorchanges/

No probs.
In that case I have reverted to the cookie plugin I mentioned earlier.

Here’s a demo using the color picker with cookies.
The cookie is set every time the user changes the color with the button in the bottom right hand corner.

You can download the files here.

And to be complete, 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>
    <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>
  </head>
  
  <body>
    <p id="colorpickerHolder"></p>
    <p style="text-align:left;margin:15px 0 0 5px;">The cookie currently contains: <span id="cookie">no value</span></p>
    <script>
    $(document).ready(function(){
       var col = 'ff0000';

       function updateCookieInfo(c){
         $("#cookie").html(c);
       }
       
       if(typeof $.cookie('color') != 'undefined'){
         col = $.cookie('color');
         updateCookieInfo(col);
       }
       
       $('#colorpickerHolder').ColorPicker({
         flat: true, 
         color: col,
          onSubmit: function (hsb, hex, rgb) {
            $.cookie('color', hex);
            updateCookieInfo(hex);
          }
       });
    });
    </script>
  </body>
</html>

HTH

Ty. But when i select the color do not change anything. Why?

Sorry, I don’t understand.
In the demo I link to, you can select the colour in the normal way (i.e. with the cross-hair and the slider), then press the little circle in the bottom right hand corner to “accept” the new colour.
This should then also update the cookie.
Is this not working for you?

Which browser are you using?

Update:

Just noticed it wasn’t working in IE.
Changed setting the cookie to include expiry time and path:

$.cookie('color', hex, { expires: 7, path: '/' });

I selected color red and the text don’t changed the color.

Anyone browser, FF, Chrome, etc…

No, it’s not meant to.
This was just a demo to demonstrate how to save the colour picker’s vaue in a cookie.

But, if it’s coloured text you want …
I’ve update the demo accordingly.

Here’s the revised 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>
  </head>
  
  <body>
    <p id="colorpickerHolder"></p>
    <p id="text" style="text-align:left;margin:15px 0 0 5px;">The cookie currently contains: <span id="cookie">no value</span></p>
    <script>
    $(document).ready(function(){
       var col = 'ff0000';

       function updateCookieInfo(c){
         $("#cookie").html(c);
	 $("#text").css("color", "#" + c);
       }
       
       if(typeof $.cookie('color') != 'undefined'){
         col = $.cookie('color');
         updateCookieInfo(col);
       }
       
       $('#colorpickerHolder').ColorPicker({
         flat: true, 
         color: col,
          onSubmit: function (hsb, hex, rgb) {
            $.cookie('color', hex, { expires: 7, path: '/' });
            updateCookieInfo(hex);
          }
       });
    });
    </script>
  </body>
</html>

Again, please be aware that the text only changes colour when you select the new colour by pressing the circle in the bottom right-hand corner of the picker.

P.S. I’m off to bed now, so if you have any more questions, I’ll pick this up again tomorrow.

Working. But i need this:

When i click in square appear the Color Palette. It’s possible add this?

Thanks!

In Pullo’s code just change the code color fromff0000 to ff00ff.

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.

Hi Dark Tranquility,

I think the OP wanted to have a different type of picker, not to just change the colour (that would have been too easy :))

Ah! I see :slight_smile: I didn’t read the text under the image in their last post! :slight_smile:

Working. Thank you very much Pullo. :slight_smile: