Response title
This is preview!
More on taming the farbtastic color picker
in Using jQuery
•
12 years ago
After my prior post on this issue, I have completed what I regard as the 'best' solution for page design using the farbtastic color picker, and expect that this is my last post on the subject. Although the prior solution was simple, it had the defect that, although invisible, the color picker was still there, and if the mouse inadvertently crossed the picker, the color in the last colorwell would be disturbed. Also, while over the picker, the cursor became a large +.
In this new solution, these problems are fixed, but it requires a change to the farbtastic.js file. The html solution posted here is based upon the farbtastic Demo2.html, and allows multiple colorwells to be used with one picker.
Change to the Farbtastic.js file
This change allows altering the farbtastic container after it is connected to the picker. That is, after the client executes: $.farbtastic('#picker'); or some such. It is done simply to give it a name.
In that file, somewhere around line 35, you will see: $(container).html('<div id="fbc" class="farbtastic">....
Change that line to read: $(container).html('<div id="fbc" class="farbtastic"> ...
The inserted material is shown in boldface and underline.
The JQuery source
The source below allows:
- multiple color destinations (colorwells),
- the picker to appear superimposed upon anywhere you put it after clicking upon the colorwell,
- the picker to disappear after the cursor moves off the picker,
- firing of the color change when the picker disappears.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Farbtastic</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="js/farbtastic-dbd.js"></script>
<link rel="stylesheet" href="css/farbtastic.css" type="text/css" />
<style type="text/css" media="screen">
.colorwell {
border: 2px solid #fff;
width: 6em;
text-align: center;
cursor: pointer;
}
body .colorwell-selected {
border: 2px solid #000;
font-weight: bold;
}
#picker {
z-index: 5; position: absolute; top: 70px; left: 300px;
}
#textbox {
z-index:1; position: absolute; top: 60px; left: 290px;
}
.dishide { display: none }
.disshow { display: inherit }
</style>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
$('#demo').hide();
var f = $.farbtastic('#picker');
var p = $('#picker').css('opacity', 0.0);
var selected;
$('#fbc').addClass('dishide');
$('.colorwell')
//.each(function () { f.linkTo(this); $(this).css('opacity', 0.5); })
.focus(function() {
if (selected) {
$(selected).removeClass('colorwell-selected');
}
f.linkTo(this);
$('#fbc').removeClass('dishide');
$('#fbc').addClass('disshow');
p.css('opacity', 1);
$(selected = this).css('opacity', 1).addClass('colorwell-selected');
});
$('#picker').hover(function(){p.css(opacity(1.0))
p.removeClass('dishide');
p.addClass('disshow');
} // cursor over picker
, function(){
var kolor = $(selected).attr('value');
// distribute value of kolor to all
//destinations which require i.t
p.css('opacity',0.0)
$('#fbc').removeClass('disshow');
$('#fbc').addClass('dishide');
} // cursor leaves picker
);
});
</script>
</head>
<body>
<h1>jQuery Color Picker: Farbtastic</h1>
<div id="demo" style="color: red; font-size: 1.4em">jQuery.js is not present. You must install jQuery in this folder for the demo to work.</div>
<form action="" style="width: 500px;">
<div id="outer">
<div id="picker"></div>
<div class="form-item"><label for="color1">Color 1:</label><input type="text" id="color1" name="color1" class="colorwell" value="#123456" /></div>
<div class="form-item"><label for="color2">Color 2:</label><input type="text" id="color2" name="color2" class="colorwell" value="#123456" /></div>
<div class="form-item"><label for="color3">Color 3:</label><input type="text" id="color3" name="color3" class="colorwell" value="#123456" /></div>
</div>
</form>
<p>More info available on the <a href="http://code.google.com/p/farbtastic/">Farbtastic Project</a> page.</p>
<p>Created by <a href="http://www.acko.net/">Steven Wittens</a>.</p>
<textarea id='textbox' rows="14" cols="39">
This command inserts a section group. The section group must be closed with SectionGroupEnd, and should contain 1 or more sections. If the section group name begins with a !, its name will be displayed with a bold font. If /e is present, the section group will be expanded by default. If index_output is specified, the parameter will be !defined with the section index (that can be used for SectionSetText etc). If the name is prefixed with 'un.' the section group is an uninstaller section group.
</textarea>
</body>
</html>
In this new solution, these problems are fixed, but it requires a change to the farbtastic.js file. The html solution posted here is based upon the farbtastic Demo2.html, and allows multiple colorwells to be used with one picker.
Change to the Farbtastic.js file
This change allows altering the farbtastic container after it is connected to the picker. That is, after the client executes: $.farbtastic('#picker'); or some such. It is done simply to give it a name.
In that file, somewhere around line 35, you will see: $(container).html('<div id="fbc" class="farbtastic">....
Change that line to read: $(container).html('<div id="fbc" class="farbtastic"> ...
The inserted material is shown in boldface and underline.
The JQuery source
The source below allows:
- multiple color destinations (colorwells),
- the picker to appear superimposed upon anywhere you put it after clicking upon the colorwell,
- the picker to disappear after the cursor moves off the picker,
- firing of the color change when the picker disappears.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Farbtastic</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="js/farbtastic-dbd.js"></script>
<link rel="stylesheet" href="css/farbtastic.css" type="text/css" />
<style type="text/css" media="screen">
.colorwell {
border: 2px solid #fff;
width: 6em;
text-align: center;
cursor: pointer;
}
body .colorwell-selected {
border: 2px solid #000;
font-weight: bold;
}
#picker {
z-index: 5; position: absolute; top: 70px; left: 300px;
}
#textbox {
z-index:1; position: absolute; top: 60px; left: 290px;
}
.dishide { display: none }
.disshow { display: inherit }
</style>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
$('#demo').hide();
var f = $.farbtastic('#picker');
var p = $('#picker').css('opacity', 0.0);
var selected;
$('#fbc').addClass('dishide');
$('.colorwell')
//.each(function () { f.linkTo(this); $(this).css('opacity', 0.5); })
.focus(function() {
if (selected) {
$(selected).removeClass('colorwell-selected');
}
f.linkTo(this);
$('#fbc').removeClass('dishide');
$('#fbc').addClass('disshow');
p.css('opacity', 1);
$(selected = this).css('opacity', 1).addClass('colorwell-selected');
});
$('#picker').hover(function(){p.css(opacity(1.0))
p.removeClass('dishide');
p.addClass('disshow');
} // cursor over picker
, function(){
var kolor = $(selected).attr('value');
// distribute value of kolor to all
//destinations which require i.t
p.css('opacity',0.0)
$('#fbc').removeClass('disshow');
$('#fbc').addClass('dishide');
} // cursor leaves picker
);
});
</script>
</head>
<body>
<h1>jQuery Color Picker: Farbtastic</h1>
<div id="demo" style="color: red; font-size: 1.4em">jQuery.js is not present. You must install jQuery in this folder for the demo to work.</div>
<form action="" style="width: 500px;">
<div id="outer">
<div id="picker"></div>
<div class="form-item"><label for="color1">Color 1:</label><input type="text" id="color1" name="color1" class="colorwell" value="#123456" /></div>
<div class="form-item"><label for="color2">Color 2:</label><input type="text" id="color2" name="color2" class="colorwell" value="#123456" /></div>
<div class="form-item"><label for="color3">Color 3:</label><input type="text" id="color3" name="color3" class="colorwell" value="#123456" /></div>
</div>
</form>
<p>More info available on the <a href="http://code.google.com/p/farbtastic/">Farbtastic Project</a> page.</p>
<p>Created by <a href="http://www.acko.net/">Steven Wittens</a>.</p>
<textarea id='textbox' rows="14" cols="39">
This command inserts a section group. The section group must be closed with SectionGroupEnd, and should contain 1 or more sections. If the section group name begins with a !, its name will be displayed with a bold font. If /e is present, the section group will be expanded by default. If index_output is specified, the parameter will be !defined with the section index (that can be used for SectionSetText etc). If the name is prefixed with 'un.' the section group is an uninstaller section group.
</textarea>
</body>
</html>
1
