Since that last post, I have continued refining the solution. I've would up with a reasonable thing which might drop into any application that needs it. Starting from the Farbtastic Demo2.html, which uses a single picker for multiple selections, a defect was, from my viewpoint, that the picker was showing all the time, brightening when used, but always nonetheless present.
In this version, offered below, the opacities have been altered, permitting:--
- the picker to be invisible until one of the color destinations is clicked upon,
- the picker to disappear after color selection is completed and the mouse moves away,
- the picker to take no space in the layout because z-index is used (as in the earlier example).
Placement of the picker, in this version, is absolute, unlike the original demo2, where it is floated. As before, it is important that it both occupies no space, but sits on top while in use, and that it seamlessly disappears after use. In this demo version, I've used a
textarea to represent other on-page material, but unlike the intended usage, this textual material uses a z-index lower than the picker, so the text will appear beneath the picker when it is visible.
the code is posted below. The only thing needed to make it work is to get a copy of the farbtastic plug-in, and to install it in a subdirectory to the one where this code was placed, named
js, or to edit the script statement to point to where it has been put.
<!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.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;
}
</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;
$('.colorwell')
.each(function () { f.linkTo(this); $(this).css('opacity', 0.5); })
.focus(function() {
if (selected) {
$(selected).css('opacity', 0.75).removeClass('colorwell-selected');
}
f.linkTo(this);
p.css('opacity', 1);
$(selected = this).css('opacity', 1).addClass('colorwell-selected');
});
$('#picker').hover(function(){p.css(opacity(1.0))}, function(){p.css('opacity',0.0)});
});
</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>