Color Chip Hover chooser

Color Chip Hover chooser - JQuery + CSS3 by Andrew Pougher

by Andrew Pougher

HTML

<div class="container"><div class="row"><div class="col-md-5"><ul class="color-chips"><h2 class="lead">Choose Color by Andrew Pougher</h2>

    </ul></div></div></div>
<div class="badge btn-lg"></div>
<!-- MY WORK DEV IS TESTED & CONCEPT PROOFED HERE. PLEASE LEARN FROM IT, BUT DON'T DIRECTLY COPY AND PASTE THIS INTO YOUR LIVE PROJECTS. I HOPE TO HELP OTHERS FROM MY PUBLIC WORK BUT NOT PRIVIDE PRET-A-PORTER CODE FOR YOUR COMMERCIAL USE. IF YOU WANT TO USE MY WORK COMMERCIALLY, MAKE CONTACT WITH ME FIRST-->

CSS

/* COLOR PALETTE */
.colors { border-width: 1px 1px 1px 1px; border-color:#c5c5c5; border-style:solid; padding:5px 5px 0 5px; }
.color { border-width: 1px 1px 1px 1px; border-color:#c5c5c5; border-top-style:solid; border-right-style:solid; padding:5px 8px 0 2px; }

ul.color-chips {
	margin: 0 0 5px 9px;
	}
ul.color-chips li {	
	margin: 0 0 5px 0;
	}
ul.color-chips li a {	
	float: left;
	width: 30px;
	height: 30px;
	margin: 3px 3px;
	background-image: url(http://prophyperfect.brandoral.com/img/lens.png);
	text-indent: -9999px;
	background-color: transparent;
	background-repeat: no-repeat;
	background-position: 0 50%;
	-webkit-transition: -webkit-transform .2s ease;
	-moz-transition: -moz-transform .2s ease;
	-o-transition: -o-transform .2s ease;
	transition: transform .2s ease;
	}

ul.color-chips li a:hover {	
	background-image: url(http://prophyperfect.brandoral.com/img/lens.png);
	-webkit-transform: scale(1.4);
	-moz-transform: scale(1.4);
	-o-transform: scale(1.4);
	transform: scale(1.4);
	-webkit-box-shadow: 1px 1px 2px rgba(0,0,0,.3);
	-moz-box-shadow: 1px 1px 2px rgba(0,0,0,.3);
	box-shadow: 1px 1px 2px rgba(0,0,0,.3);
	}

.cSelected {	
	background-image: url(http://prophyperfect.brandoral.com/img/lens.png);
	-webkit-transform: scale(1.4);
	-moz-transform: scale(1.4);
	-o-transform: scale(1.4);
	transform: scale(1.4);
	-webkit-box-shadow: 1px 1px 2px rgba(0,0,0,.3);
	-moz-box-shadow: 1px 1px 2px rgba(0,0,0,.3);
	box-shadow: 1px 1px 2px rgba(0,0,0,.3);
	}

JavaScript

var jsoncols = [
    {
        "id": "1",
        "title": "Color Name Here",
        "color": "#00FF00"
    },
    {
        "id": "2",
        "title": "Color Name",
        "color": "#646432"
    },{
        "id": "3",
        "title": "Color Name",
        "color": "#323232"
    },{
        "id": "4",
        "title": "Color Name",
        "color": "#969664"
    },{
        "id": "5",
        "title": "Color Name",
        "color": "#646464"
    },
    
];
 var colist=[];
$.each(jsoncols, function(index, value) { 
    var stringLI = "<li class='tag'><a href='"+value.color+"' style='background-color: "+value.color+"' title='"+value.title+"' rel='tag'><strong>"+value.color+"</strong></a></li>"
colist.push(stringLI);
    });
    $("ul").append(colist)    
    
    
    $("a").on("click", function(e){
    e.preventDefault();
    $(".badge").html("Set the color choice to: " + $(this).attr("href"));
   $(".color-chips li a").removeClass("cSelected");
    $(this).addClass('cSelected');
});