Append a div with a background color selected by the colorpicker?

Question

I have some input fields with a appendbutton, which appends the input values to a div. Thanks to this jQuery colorpicker I'm also able to 'trace' which color is selected

$('#color1').val()

So right now when the append button is clicked, it appends the input values in plain text in a div. But what I would like to accomplish is that another small div (avatar) appears in the selected color from the color picker. Let me demonstrate in the JS what I mean.

HTML:

<form>
    <div>
        <input type="text" name="price" id="price" value="price" />
        <input type="text" name="brand" id="brand" value="brand"/>
        <br/>
        <input type="radio" id="up" name="direction" value="up" />  up
        <input type="radio" id="down" name="direction" value="down" /> down
        <input type="radio" id="left" name="direction" value="left" />  left
        <input type="radio" id="right"name="direction" value="right" /> right
        <button id="addbutton">add it</button>
      </div>

</form>
      <div><label for="color1">Color 1</label>
<input id="color1" name="color1" type="text" value="#333399" /></div>


<div id="sidebar"><h1>sidebar</h1></div>

JS:

var counter = 0;
$(document).ready(function(){

$('#addbutton').click(function() {
    var $addDiv = $('#sidebar');
    $addDiv.append(
    $( '<div></div>', { id: 'item' } )
        .html( $( '#input1' ).val() + ' ' + $( '#input2' ).val() + ' ' + $('input[name="category"]:checked').val() + ' ' +("<div id="avatar" backgound="color from colorpicker"></div>")+ ' ' +$('#color1').val()));
   $('.removebtn').live('click', function() {
        $(this).parent().remove();
    });
    return false

});
    
$('#color1').colorPicker();
});

My question to you is: How can I accomplish this with the colorpicker?

Answer 1

You should first append the 'avatarDiv' and give it the right color and after that you append it to the div. The last step is to append it to the sidebar.

I devided it into two vars, to make it clear:

$(document).ready(function(){
  var counter=0; //should not be in global namespace...
  $('#addbutton').click(function() {
      var $avatarDiv = $('<div>').css('background-color',$('#color1').val()).css('height','16px').css('width','16px').css('float','left');
      var $addDiv = $('<div>', { id: 'item'+counter } ).text('your input val').append($avatarDiv);
      $('#sidebar').append($addDiv);
   counter++;

  });
});