Warning: Please do not give out any FTP or ssh credentials to anyone, unless you trust them completely. Giving out login details is dangerous.

If the asker does not get an answer then they have 10 days to request a refund.

Ryan Hellyer | 08/24/11 at 1:47pm Edit

(3) Possible Answers Submitted...

See a chronological view of answers?

Warning: Please do not give out any FTP or ssh credentials to anyone, unless you trust them completely. Giving out login details is dangerous.

• 
  Last edited:
  08/24/11
  2:38pm

  This answer was downvoted by the top experts.

• 
  Last edited:
  08/24/11
  2:57pm
  Mariano Pereyra says:

  
  Update your script wqith this:
  
  <script type="text/javascript">
  
  
  jQuery(function($){
  // Adds a palette button
  $('.colour').append('<input type="button" class="palettebutton" value="pick" />');
  
  // Adds a clear palette button (not currently working)
  $('.colour').append('<input type="button" class="clearpalette" value="clear" />');
  
  // Updates colours in square boxes at top
  function updatecolours() {
  $('#firstbox').css('background-color',$('#test1').val());
  $('#secondbox').css('background-color',$('#test2').val());
  $('#thirdbox').css('background-color',$('#test3').val());
  $('#fourthbox').css('background-color',$('#test4').val());
  $('#fifthbox').css('background-color',$('#test5').val());
  $('#sixthbox').css('background-color',$('#test6').val());
  $('#seventhbox').css('background-color',$('#test7').val());
  $('#eighthbox').css('background-color',$('#test8').val());
  $('#ninthbox').css('background-color',$('#test9').val());
  }
  
  // Dialog box
  var farbtastic = $.farbtastic('#farbtastic', '')
  var picker = $('#farbtastic').dialog({
  width: 220,
  height: 260,
  autoOpen: false,
  modal: false,
  close: updatecolours
  });
  
  // Updates input field with value from colour picker
  //$('.palettebutton').farbtastic(function(s,e,v){console.log(s,e,v);});
  if(true)
  $('.palettebutton').click(function(){
  var $this = $(this);
  var setColor=function(C) {
  console.log(C, $this);
  $this.siblings('input[type="text"]').css('background-color', C).val(C);
  }
  farbtastic.linkTo(setColor);
  picker.dialog('open');
  //updatecolours();
  });
  
  // Updates colours with value from input field
  $('.colourvalue').change(function(){
  updatecolours()
  });
  
  $('.clearpalette').click(function(){
  $(this).siblings('input[type="text"]').css('background-color', '#ffffff').val('#ffffff');
  updatecolours();
  });
  
  
  });
  </script>
  
  

  • 08/24/11 3:00pm
    
    Mariano Pereyra says:

    There are a couple differences between the solutions, Hai Bui updates the boxes at the same time the color is picked, and when clearing the ext box is empty, but he beat me to it anyway :D
    
    Both solutions fit your request, anyway.

• 
  Last edited:
  08/24/11
  3:04pm
  designchemical says:

  Hi,
  
  Update the jQuery to:
  
  jQuery(function($){
  // Adds a palette button
  $('.colour').append('<input type="button" class="palettebutton" value="pick" />');
  
  // Adds a clear palette button (not currently working)
  $('.colour').append('<input type="button" class="clearpalette" value="clear" />');
  
  // Updates colours in square boxes at top
  function updatecolours() {
  $('.colourvalue').each(function(){
  var i = $(this).index('.colourvalue');
  var color = rgb2hex($(this).css('background-color'));
  $(this).val(color);
  $('.box:eq('+i+')').css('background-color',color);
  });
  }
  
  // Dialog box
  var farbtastic = $.farbtastic('#farbtastic');
  var picker = $('#farbtastic').dialog({
  width: 220,
  height: 260,
  autoOpen: false,
  modal: false
  
  });
  
  // Updates input field with value from colour picker
  $('.palettebutton').live('click',function(){
  var $this = $(this);
  farbtastic.linkTo($this.siblings('input[type="text"]'));
  //updatecolours();
  picker.dialog('open');
  });
  $('#farbtastic').live('click',function(){
  updatecolours();
  });
  
  $('.clearpalette').live('click',function(){
  $(this).siblings('.colourvalue').val('').css('background-color','#ffffff');
  updatecolours();
  });
  
  });
  function rgb2hex(rgb) {
  rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
  function hex(x) {
  return ("0" + parseInt(x).toString(16)).slice(-2);
  }
  return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
  }
  
  
  For the div boxes add class "box" (or change to something appropriate):
  
  <!-- Coloured boxes -->
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>

  Previous versions of this answer: 08/24/11 at 3:04pm

This question has expired.

Ryan Hellyer voted on this question.

Current status of this question: Completed

Warning: Please do not give out any FTP or ssh credentials to anyone, unless you trust them completely. Giving out login details is dangerous.

If the asker does not get an answer then they have 10 days to request a refund.