Creating a color picker using jQuery

This will be a simple tutorial for using cookies and a color changer.

So before we get started on any jquery we have to set up the html for the simple color selector. (once advanced enough you can use this color picker Link


That's it for the html portion of the color picker.

Now lets style that html so it looks pertty.


Now that our color box looks more pertty than your own face lets start on the jquery because if you just copy and past the code above you wont see anything aside from the show button. This color changer does work with cookies so it saves per browser.

Thanks dude. I will be trying this with my site in a bit. I'm shit at jQuery and I've wanted to do this for a while

I will update

You can expand past adding classes with this jquery you can have an if statement like this

Be warned though If you are using ajax on a set of code that color will not take affect unless you load that cookie before the ajax is loaded which can be done in css and jquery like so

Thanks for the basic yet useful share.

hopefully I can try to make a cool userbar color customizer for this :-0

Ive actually set up the advanced color picker using the eyecon color picker posted at the beginning if you guys want a tutorial on that let me know below and ill post it.

color picker with jquery does the thing, thanks...

What do i need to set this up? VPS or does just shared hosting work?

05-05-2016, 04:31 AM

BurnedDesigns Wrote: This will be a simple tutorial for using cookies and a color changer.

So before we get started on any jquery we have to set up the html for the simple color selector. (once advanced enough you can use this color picker Link

Code:

<span id="showBox">Show</span>
<div id="colorBox">
  <div class="red"></div>
  <div class="blue"></div>
  <div class="orange"></div>
  <div class="purple"></div>
</div>

That's it for the html portion of the color picker.

Now lets style that html so it looks pertty.

Code:

span#showBox{
background:#fff;
border:1px solid #ccc;
padding:5px 10px;
border-radius:4px;
cursor:pointer;
font-family:arial,sans-serif;
color:#333;
}

div#colorBox{
margin-top:10px;
background:#fff;
border:1px solid #ccc;
padding:10px;
width:65px;
display:none;
}

div#colorBox > div{
height:30px;
width:30px;
display:inline-block;
}

.red{
background:#c13333;
}

.blue{
background:#336184;
}

.orange{
background:#fd8a17;
}

.purple{
background:#4c3382;
}

Now that our color box looks more pertty than your own face lets start on the jquery because if you just copy and past the code above you wont see anything aside from the show button. This color changer does work with cookies so it saves per browser.

Code:

$(document).ready(function(){
$("#showBox").click(function(){
  $("#colorBox").slideToggle();
});

  $(".red").click(function(){
    $('#container').addClass('red');
    $('#container').removeClass('blue');
    $('#container').removeClass('orange');
    $('#container').removeClass('purple');
    $.cookie("mycookie","red",{expires:999});
  });
  
   $(".blue").click(function(){
    $('#container').addClass('blue');
    $('#container').removeClass('red');
    $('#container').removeClass('orange');
    $('#container').removeClass('purple');
    $.cookie("mycookie","blue",{expires:999});
  });

$(".orange").click(function(){
    $('#container').addClass('orange');
    $('#container').removeClass('red');
    $('#container').removeClass('blue');
    $('#container').removeClass('purple');
    $.cookie("mycookie","orange",{expires:999});
  });
  
  $(".purple").click(function(){
    $('#container').addClass('purple');
    $('#container').removeClass('red');
    $('#container').removeClass('orange');
    $('#container').removeClass('blue');
    $.cookie("mycookie","purple",{expires:999});
  });


  //Check if cookie exists
  if (typeof $.cookie('mycookie') === "undefined"){
  //no cookie
  } else {
  //cookie is there, do something
   $('#container').addClass($.cookie('mycookie'));
  }
});

Download all files

very nice