CODEWITHSUNDEEP
jqueryhtmlcolors
Robbert
Robbert

Reputation: 1330

My jQuery color picker

I am working on a color picker for my project where a costumer can click on a color and then the color popups so you can select/submit this color.

I want to add the style (so the color code) to "color_example" and in this div the color code (so the value of the clicked color).

And I have tried to remove the html popup if you click on another color and this worked but it also removes the color code out of the #colors span.

Can someone help me with adding the style of the clicked element to the example, and when click another color, not the color value in it is gone but only the example popup.

I added it to jsfiddle: http://jsfiddle.net/yKZP6/2/

My html:

<div id="color_scheme">
    <div id="colors"> 
        <span value="1000" style="background:rgb(190,189,127);">1000</span>
         <span value="1001" style="background:rgb(194,176,120);">1001</span>
         <span value="1002" style="background:rgb(198,166,100);">1002</span>
         <span value="1003" style="background:rgb(229,190,1);">1003</span>
         <span value="1004" style="background:rgb(205,164,052);">1004</span>
         <span value="1005" style="background:rgb(169,131,007);">1005</span>
         <span value="1006" style="background:rgb(228,160,016);">1006</span>
         <span value="1007" style="background:rgb(220,156,000);">1007</span>
         <span value="1011" style="background:rgb(138,102,066);">1011</span>
         <span value="1012" style="background:rgb(199,180,070);">1012</span>
         <span value="1013" style="background:rgb(234,230,202);">1013</span>
         <span value="1014" style="background:rgb(225,204,079);">1014</span> 
    </div><!--End colors-->
</div><!--End color_scheme-->

My jQuery:

// Custom Select box
enableSelectBoxes();

// Custom select box function
function enableSelectBoxes() {
    $('div#color_scheme').each(function () {
        if ($(this).children('span.selected').html() == '') $(this).children('span.selected').html($(this).children('div#colors').children('div#colors span:first').html());


        $(this).find('#colors span').click(function () {
            $('#colors span.selected_color')
                .removeClass('selected_color')
                .empty();

            $(this).addClass('selected_color')
                .html('<div class="this_color"><div class="color_example">Color value</div><input type="submit" value="Select color"/></div>');
            $(".this_color").html($(this).attr('value'));

        });
    });
}

Upvotes: 0

Views: 169

Answers (1)

Andrew
Andrew

Reputation: 5340

Try this:

$(this).find('#colors span').click(
        function() {

            var num = $(this).data('selnum');

            if (!num) {

                //keep the old color num, like 1000, 1001...
                num = $.trim($(this).html());

                $(this).data('selnum', num);
            }

            var oldSel = $('#colors span.selected_color');

            //make it just like before
            oldSel.removeClass('selected_color').empty().html(oldSel.data('selnum'));

            $(this).addClass('selected_color').html(
                    num + '<div class="this_color"><div class="color_example">Color value</div><input type="submit" value="Select color"/></div>');

            $(".color_example").html($(this).attr('value'));

            //the bg color
            var bgColor = $(this).css('background');

            //set the bgColor
            $(".color_example").css({
                background : bgColor
            });

        });

http://jsfiddle.net/rooseve/yKZP6/7/

Upvotes: 1

Related Questions