I've released a new version of Farbtastic which fixes a bug with multiple fields that have the same value.
Get it from the Farbtastic page.
Farbtastic 1.2 out
Jan 09, 2007
Recent comments
- I live in the UK and when I
21 hours 44 min ago - It's true in Europe they
4 days 4 hours ago - Amazing!
1 week 2 days ago - Great website btw
1 week 3 days ago - Lol, that sucks...
1 week 6 days ago
Read entries about
Images
Site
Thanks!
Great news! Thanks.
Issues with jQuery 1.1
First off, Great piece of code. It is a really awesome asset that I am truly looking forward to using in my CMS.
I am working to integrate the new jQuery 1.1 release into my development process and have noticed that there are issues with Farbtastic in the new release. For example, the selector will follow the cursor when any area of the document window is clicked. Also, I can't select the input field I am linking to via the linkTo() function to manual entre the color.
Thanks again for your contribution!
David
Cool! But I'm stymied.
I was looking around for a tool like this one, and I really like your implementation. Thanks! I was wondering something, and I suspect this is pretty much entirely based on my limited JS skills and total lack of understanding of OO principles: how do I get the picker to update the color of one element while dumping the color value to another element entirely? If you just say "use
.color()" I'll be no better off, since my attempts along those lines failed.Here's what I'm trying to do in a nutshell:
1. Have a picker that's pre-set to the
colorvalue of a div; let's call it #one.2. Changing the picker changes the
colorof #one.3. As the color of #one is updated via the picker, the value of #two (another div) is set to the newly picked color in hex form.
I've managed to do #2. #1 and #3 are beyond me, it would seem. Even if you just created a quick demo file showing how to do that, I'm pretty sure I could take it from there.
Thanks again for the nice tool, and I hope you'll show pity on a poor OOJS newbie!
Custom callback
Instead of tying farbtastic directly to some elements, you can specify a callback function for linkTo / callback and do whatever you want. You can look at farbtastic's internal callback to see how it does things by default.
For your problem, something like this should work (where f is a farbtastic object).
f.linkTo(function () {$('#one').css('backgroundColor', f.color);
$('#two').attr('value', f.color);
});
I don't have time for hand-holding, sorry. Farbtastic is documented, and there are plenty of resources online that explain JS, closures and OO.
Thanks anyway
Yeah, I've read quite a few resources on those topics. So far, none of them make sense to me-- I grew up in a procedural era, and haven't been able to make the conceptual leap. Which would most likely be why I didn't really understand what you posted, though I picked up a few more glimmerings of possible understanding. (Maybe.)
Sorry to have troubled you.
Be nice with dean edwards' packer
Hi, Steven. Thank you very much for this plugin. It's awesome.
I just ask you to be nice with dean edwards' packer (http://dean.edwards.name/packer/) in future versions. Farbtastic currently misses semi-colons to make the packer work nice. But it is really easy to make it 'packable': just add a semi-colon to the end of all assignments and functions.
Patch to make color picker work within scrolling element
What a wonderful plugin! The only thing lacking is support for hosting the color picker within a scrollable element; here's my patch which allows just that:
diff -u farbtastic.js ~fred/js/farbtastic.js
--- farbtastic.js 2007-01-09 22:53:11.000000000 -0800
+++ js/farbtastic.js 2008-01-04 08:31:50.000000000 -0800
@@ -108,6 +108,7 @@
if (typeof event.offsetX != 'undefined') {
// Use offset coordinates and find common offsetParent
var pos = { x: event.offsetX, y: event.offsetY };
+ var scrollTop = 0, scrollLeft = 0;
// Send the coordinates upwards through the offsetParent chain.
var e = el;
@@ -116,12 +117,14 @@
e.mouseY = pos.y;
pos.x += e.offsetLeft;
pos.y += e.offsetTop;
+ scrollTop += e.scrollTop;
+ scrollLeft += e.scrollLeft;
e = e.offsetParent;
}
// Look for the coordinates starting from the wheel widget.
var e = reference;
- var offset = { x: 0, y: 0 }
+ var offset = { x: 0 - scrollLeft, y: 0 - scrollTop }
while (e) {
if (typeof e.mouseX != 'undefined') {
x = e.mouseX - offset.x;
Post new comment