Skip to content Skip to sidebar Skip to footer

Onclick Show Color In A Div Below

I have a list of colors which display in a 50px square boxes on my page. What i would like to do is be able to click any of the color boxes and then it will show the clicked color

Solution 1:

You can do easily. Insert a class in every div like this:

<divclass="clickme"style="background:#000000; width:50px; height:50px; float: left; margin:4px"></div>

and in jquery you can do something like this:

    $(document).ready(){
       $('.clickme').click(function(){
      $('#result').html( rgb2hex($(this).css('background-color')));
   });

functionrgb2hex(rgb) {
    rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
    functionhex(x) {
        return ("0" + parseInt(x).toString(16)).slice(-2);
    }
    return"#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
}
    });

DEMO

Post a Comment for "Onclick Show Color In A Div Below"