Home

Farbtastic 1.2 out

Jan 09, 2007

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.

Thanks!

Jan 10, 2007 Torsten

Great news! Thanks.

Issues with jQuery 1.1

Jan 15, 2007 David

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.

Feb 19, 2007 Eric Meyer

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 color value of a div; let's call it #one.
2. Changing the picker changes the color of #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

Feb 19, 2007 Steven

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

Feb 20, 2007 Eric Meyer

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

May 21, 2007 Rodrigo Moraes

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

Jan 04, 2008 phred

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;

Fixed positioning?

Oct 01, 2008 Matthew Krauss

Farbtastic is fantastic! Very cool work.

Are you aware it does not seem to work in a fixed position? At least I think that's the problem. It seems that if you try to put Farbtastic in a dialog box with BlockUI, you get all sorts of issues in Firefox 3 and IE 7 with it, and I think the Firefox problems are because the dialog box has position: fixed. IE problems must be something else... no idea really.

Keep up the awesome work.

Farbtastic and positioning

Oct 02, 2008 Matt Farina

@Matthew Krauss - Farbtastic does freak out with some positioning. It has to do with a change in jQuery going to 1.2.6. There is a fix in the version of farbtastic in the drupal cvs. You can get it at http://cvs.drupal.org/viewvc.py/drupal/drupal/misc/farbtastic/farbtastic...

@Matt Farina and Steven

Oct 03, 2008 Matthew Krauss

@Matt Farina and Steven Wittens:

Thanks for the tip Matt.

I was working on fixing it myself, and as far as I can see, the Drupal version and my own version have the same effective behavior. I really don't quite get what either Steven's version or Drupal's version are doing in the relevant section, but I've included the diff from Steven's version to mine below in case it is useful to anyone. I suspect I must be missing something important, but in all my tests so far, my (much simplified) version is working as well as the Drupal version.

Unfortunately, Explorer is still very messed up in either version. I'll keep working on it.

Regards,
Matthew

*** farbtastic.orig.js  2008-10-01 17:06:30.000000000 -0400
--- farbtastic.mdk.js   2008-10-03 11:16:55.289786092 -0400
***************
*** 105,153 ****
      var el = event.target || event.srcElement;
      var reference = fb.wheel;
 
!     if (typeof event.offsetX != 'undefined') {
!       // Use offset coordinates and find common offsetParent
!       var pos = { x: event.offsetX, y: event.offsetY };
!
!       // Send the coordinates upwards through the offsetParent chain.
!       var e = el;
!       while (e) {
!         e.mouseX = pos.x;
!         e.mouseY = pos.y;
!         pos.x += e.offsetLeft;
!         pos.y += e.offsetTop;
!         e = e.offsetParent;
!       }
!
!       // Look for the coordinates starting from the wheel widget.
!       var e = reference;
!       var offset = { x: 0, y: 0 }
!       while (e) {
!         if (typeof e.mouseX != 'undefined') {
!           x = e.mouseX - offset.x;
!           y = e.mouseY - offset.y;
!           break;
!         }
!         offset.x += e.offsetLeft;
!         offset.y += e.offsetTop;
!         e = e.offsetParent;
!       }
!
!       // Reset stored coordinates
!       e = el;
!       while (e) {
!         e.mouseX = undefined;
!         e.mouseY = undefined;
!         e = e.offsetParent;
!       }
!     }
!     else {
!       // Use absolute coordinates
!       var pos = fb.absolutePosition(reference);
 
-       x = (event.pageX || 0*(event.clientX + $('html').get(0).scrollLeft)) - pos.x;
-       y = (event.pageY || 0*(event.clientY + $('html').get(0).scrollTop)) - pos.y;
-     }
      // Subtract distance to middle
      return { x: x - fb.width / 2, y: y - fb.width / 2 };
    }
--- 105,114 ----
      var el = event.target || event.srcElement;
      var reference = fb.wheel;
 
!               var offset = $(reference).offset();
!               x = event.pageX - offset.left;
!               y = event.pageY - offset.top;
 
      // Subtract distance to middle
      return { x: x - fb.width / 2, y: y - fb.width / 2 };
    }

"Don't get what it's doing"

Oct 03, 2008 Steven

@Matthew: Farbtastic's mouse handling is commented, and I even blogged about the mechanism used.

What's disturbing is that the Drupal approach to fixing JS code has apparently devolved into 'fuck with it until it works again', rather than say, looking at the changes made to jQuery since Farbtastic was written and updating the code to use the new available functions. With jQuery's $.offset() and mouse improvements, the entire fb.widgetCoords function should be obsolete. Instead, you took a legacy workaround method that does manual offsetParent calculations and added in $.offset(). This makes no sense.

Farbtastic has been sitting in core for nearly 2 years now. If nobody knows how it works, I'd say that's symptomatic of the Drupal community's SEP field.

@Steven: Relax! I've got

Oct 03, 2008 Anonymous

@Steven: Relax! I've got nothing to do with Drupal, and I just started working with Farbtastic the other day. Okay, so widgetCoords is outdated. Are you planning to update it?

I thought Farbtastic was your baby? Have you handed it off to Drupal?

Anyhow, I have no idea yet why this works yet, but the following patch to the stylesheet actually solves my Explorer problems. Very strange.

Thanks,
Matthew

*** farbtastic.orig.css 2008-10-03 16:03:20.491129594 -0400
--- farbtastic.mdk.css 2008-10-03 16:03:53.487929547 -0400
***************
*** 6,11 ****
--- 6,12 ----
cursor: crosshair;
}
.farbtastic, .farbtastic .wheel {
+ left: 0; top: 0;
width: 195px;
height: 195px;
}

Farbtastic Fantastic

Oct 17, 2008 Will Fastie

What a nicely designed little color picker! I used it on a site prototype today so the client could try out different background colors. Worked out great and they thought I was a genius! (But I told them the source anyway.)

Many thanks.

Will Fastie
Baltimore, MD USA

You're Right

Oct 20, 2008 Matt Farina

@Steven - you are right that the solution in drupal is currently hack on the legacy code rather than taking advantage of what's in jQuery 1.2.6. That's my fault. Sorry I bastardized the code. In an effort to correct this I've written a patch to fix this. If you want to take a look check out http://drupal.org/node/323965. I'm not asking you to do anything but would appreciate your input if you are so inclined.

Ported to Prototype

Feb 21, 2009 Brendan

I've made a port of farbtastic for the Prototype Framework. I hope someone finds this helpful.

Thank you for the Prototype port!

Feb 25, 2009 Keith

Thanks Brendan. Much appreciated.

(Ugly) jQuery 1.3 fix

Apr 04, 2009 Anonymous

Hi there,

As I wanted to use Farbtastic within a dialog I ran into the exact same problem as the others above.
And, as always, as I don't have the time to look for a real fix I just created an ugly workaround for the dialogs fixed position problem - just position it absolutely.
Whereas "absolute" means absolute in relation to the current scrolling position.
And to simulate the fixed position just update the dialogs position as soon as the user scrolls.

Here's the code:

$('div.myDialogDiv').css('position', 'absolute');
$('div.myDialogDiv').css('top', $(window).scrollTop() + (($(window).height() - $('div.myDialogDiv').height()) / 2));
$('div.myDialogDiv').css('left', (($(window).width() - $('div.myDialogDiv').width()) / 2));
$(window).scroll(function() {
      $('div.myDialogDiv').css('top', $(window).scrollTop() + (($(window).height() - $('div.myDialogDiv').height()) / 2));
});

Hint: myDialogDiv is a unique class attached to the dialog through dialogs() "dialogClass" option.

Tested with FF 2.0.0.20, Opera 9.21 and IE 7.0.5730.11

As I said - it's an ugly fix but it works for now.

Damned...

Apr 04, 2009 G.Schuster

...forgot to enter my name :/
The comment above posted by "Anonymous" was mine.
Would be glad if Steven could fix it (hope your blog software log's IPs so you can verify it was really my omment).

TIA!

updating via onchange?

Apr 06, 2009 mark

hi there
i want to have a few "default colors" that can be used instead of using the wheel.
but right now, if you do that, the wheel keeps the old color.

i tried to use the object method setColor when the content of the input form is changed via JS (as "onchange" does not trigger the update - only "keyup" does)

anyone knows how to do that?

$(".colorPick").click(function() {
var color = $(this).attr("rel");
$("#colorInput").val(color);
$("#colorInput").css('background-color',color);
... (adjust the wheel to new color in the text input)
});

i forgot something

Apr 06, 2009 mark

i forget to ask, how to update ONLY the wheel with these predefined colors, without the input field beeing updates as well
thank you

farbtastic 1.x support

Apr 08, 2009 Matt Farina

Please see http://code.google.com/p/farbtastic for support.

@G.Schuster the positioning issue was fixed in the farbtastic 1.x branch. I'd like to get a 1.3 version out soon with that fix.

@Mark I think you the drupal color module does something similar to what you are looking for. The code is available at http://cvs.drupal.org/viewvc.py/drupal/drupal/modules/color/.

Command for updating the color based on the text field

Apr 21, 2009 Zander

First of all I have to say excellent job on this, I think it's one of the best out there. I've been working on it for a while and been reading through all the forums to try and resolve this but i can't seem to find an answer. I have a seperate div that i am updating the color on as well as i am updating the text in the text field and it all works great however if I enter a hex-value in the text field the color doesn't change to it like it would if i just put:
$('#colorpicker').farbtastic('#color')

But in using:
$('#colorpicker').farbtastic('#color')
I can no longer update the color of the div along with the text field.

The code I have is:

$('#colorpicker').farbtastic(function callback(color){
   $('#templateGallery div').css('background-color', color);
   $('#color').attr('value', color);
});

Recent comments

Images