SitePoint Sponsor

User Tag List

Results 1 to 19 of 19

Thread: Color Picker

  1. #1
    SitePoint Enthusiast
    Join Date
    Dec 2012
    Posts
    61
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Color Picker

    Hello

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

    Code:
    http://www.eyecon.ro/colorpicker/#download
    Anyone know solve the problem?

    Thanks!

  2. #2
    Grüße aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,056
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    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/1...ie-with-jquery
    And here's a tutorial, explaining how to use it in an actual project: http://hibbard.eu/using-cookies-with...tyle-switcher/

    HTH

  3. #3
    SitePoint Enthusiast
    Join Date
    Dec 2012
    Posts
    61
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pullo View Post
    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/1...ie-with-jquery
    And here's a tutorial, explaining how to use it in an actual project: http://hibbard.eu/using-cookies-with...tyle-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.

    Code:
    // 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());
    }

  4. #4
    Grüße aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,056
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    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.

  5. #5
    SitePoint Enthusiast
    Join Date
    Dec 2012
    Posts
    61
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pullo View Post
    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.

  6. #6
    Grüße aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,056
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Quote Originally Posted by Fantastic5 View Post
    but in file color.js have this code.
    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?

  7. #7
    SitePoint Enthusiast
    Join Date
    Dec 2012
    Posts
    61
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry man, i see the souce code here.

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

  8. #8
    Grüße aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,056
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    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:

    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

  9. #9
    SitePoint Enthusiast
    Join Date
    Dec 2012
    Posts
    61
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ty. But when i select the color do not change anything. Why?

  10. #10
    Grüße aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,056
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    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?

  11. #11
    Grüße aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,056
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Update:

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

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

  12. #12
    SitePoint Enthusiast
    Join Date
    Dec 2012
    Posts
    61
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I selected color red and the text don't changed the color.

    7EYREHk.png

    Anyone browser, FF, Chrome, etc..

  13. #13
    Grüße aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,056
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    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:

    HTML 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.

  14. #14
    SitePoint Enthusiast
    Join Date
    Dec 2012
    Posts
    61
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Working. But i need this:

    4msKDTC.png

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

    Thanks!

  15. #15
    The Mind's I ® silver trophy Dark Tranquility's Avatar
    Join Date
    Sep 2003
    Location
    KSA - UAE
    Posts
    9,457
    Mentioned
    8 Post(s)
    Tagged
    1 Thread(s)
    In Pullo's code just change the code color fromff0000 to ff00ff.

  16. #16
    Grüße aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,056
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Quote Originally Posted by Fantastic5 View Post
    Working. But i need this: When i click in square appear the Color Palette. It's possible add this?
    Sure!

    Here's a new demo.

    Here's the code:

    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.

  17. #17
    Grüße aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,056
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Hi Dark Tranquility,

    Quote Originally Posted by Dark Tranquility View Post
    In Pullo's code just change the code color fromff0000 to ff00ff.
    I think the OP wanted to have a different type of picker, not to just change the colour (that would have been too easy )

  18. #18
    The Mind's I ® silver trophy Dark Tranquility's Avatar
    Join Date
    Sep 2003
    Location
    KSA - UAE
    Posts
    9,457
    Mentioned
    8 Post(s)
    Tagged
    1 Thread(s)
    Ah! I see I didn't read the text under the image in their last post!

  19. #19
    SitePoint Enthusiast
    Join Date
    Dec 2012
    Posts
    61
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Working. Thank you very much Pullo.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •