Farbtastic jQuery plugin problem WordPress
- SOLVED
I have a farbtastic jQuery colour picker demo here ... http://demo.pixopoint.com/static/farbtastic/
This will become part of a WordPress plugin/theme once I can work out a few gremlins in the system.
There are three parts to the question(2) ....
Part 1:
I created a function updatecolours() which updates the colour of the squares at the top whenever the input field is updated.
How do I get this to work when the colour picker is used?
Part 2:
The second input field does not have a colour value declared. When using the colour picker, the colour of the input field updates, but the value does not.
How do I make the value update?
Part 3:
I have a farbtastic jQuery colour picker demo here ... http://demo.pixopoint.com/static/farbtastic/
I want the .clearpalette button (which has been appended via jQuery) to be able to clear the value of it's corresponding input field and also trigger the updatecolours() function to update the background colours of the top square boxes.
Answers (3)
Hai Bui answers:
Hi,
Check this: http://dragondance.byethost18.com/farbtastic/
I solved all 3 parts by making changes to the javascript in html file and farbtastic.js. You can view the source code.
Ryan Hellyer comments:
Awesome. That seems to work flawlessly!
Mariano Pereyra answers:
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>
Mariano Pereyra comments:
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.
designchemical answers:
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>