Posted on

rgbaColorPicker Update – v1.1

Friday I went through and updated the color picker to version 1.0, then shortly after to version 1.1, to keep things simple I’ll just combine both updates into a single post. First a feature breakdown.

  • Picker now changes side to stay within widow.
  • Turned script into a proper jQuery plugin.
  • Consolidated single file and external stylesheet versions into one file.
  • Fixed CSS bug involving color display box.
  • Made index.html more useful.
  • Fixed a bug in the new read me formatting
  • Clicking outside color selector box now closes it.
  • Opening selector box no longer reflows document.
  • Fixed a bug causing selection mode to be “stuck” when you moved the mouse out of a selector area.
  • Moved colorbase datauri image into stylesheet.
  • Included the stylesheet into the plugin (single file now).
  • Included minified version of the script.
  • Updated index.html and stresstest.html as needed.

Quite a list there. The basics are that it’s now a jQuery plugin, as such it can be called different, and passed with certain options. Those options are for an external stylesheet, and a callback. The external stylesheet will load a linked file at that location instead of using the default built-in one, and the callback will fire every time the color is changed. The index.html makes use of this in the new rainbow boxes, they container box changes whenever to color changed.

Also some stuff that probably should have been in v0.8 were finally added, it acts like a real pop-up now, no document reflow, and when you click outside the box it closes, also an annoying bug that I finally diagnosed (and then promptly squashed).

The new, updated version is up on GitHub, you can go to the rgbaColorPicker GitHub Page if you want to fork it or the rgbaColor Picker GitHub Download page if you just want to download it. Alternatively  you can check it out on the new rgbaColorPicker jQuery plugin page. If you just want to see it in action you can at the links below:

rgbaColorPicker Example

rgbaColorPicker Stress Test

If you find any bugs you can fork it, but if you don’t want to be bothered fixing them yourself you can post them here or on the rgbaColorPicker GitHub Issues section and I’ll take a look, same for if you have a feature request, I’ll see what I can do about incorporating them.

Posted on

rgbaColorPicker now up on GitHub

Earlier this week I needed a color picker, but not just any color picker, I needed one with alpha level transparency support. After searching for a while and finding nothing I decided to create my own. Outside of just doing alpha it also supports colors names and converts colors using tinycolors.js.

Instead of going over the code like I usually do I decided just to put it up on github (rgbaColorPicker on GitHub), that way if anybody can make changes and they can be reintegrated into the master branch. There are some examples of the script up on this site, you can view them here:

You can use the rgbaColorPicker by including the require files (rgbacolorpicker.js and tinycolor-min.js) and either including the seperate stylesheet or adding the styles from it to your existing stylesheet. Then, create an input element and give it the class color picker, the script will do the rest.

As you select a color it will return the value to the input, either as the html color name, the the Hex value, or if there is an alpha as rgba.

This version is pretty basic, but future plans include making it only require a single fine, and giving more options, any suggestion can be posted here, or you can fork the github project and add them yourself and I’ll integrate them if you’d like. For those not interested in the whole github thing, you can get a direct download of the script GitHub rgbaColorPicker Download page.

Posted on

New Custom Search Widget

So I’ve made the new custom search widget, all that fancy without any images. Mind you, it’s only fancy in Mozilla/Webkit Engines. IE shows a boring search button. Unfortunately I don’t have a good testing environment for IE so I can’t really test it, although there is a method of making rounded corners in IE without images but I can’t seem to remember it. I’m sure it will come to me and I’ll update the CSS accordingly.

Update: 11/19/2010, 10:00pm
Found it! Simple to implement too.

I’m sure there are some nuances to it, everything in IE seems to, but I’ve used this one before and it does work (albeit not as well as proper border-radius support works). This should work until the release and widespread adoption of IE9, wich supports real border-radius’s, and does a damn good job doing it.

Update 11/20/2010, 7:16pm
I’ve since changes the search icon, so it’s not a fancy looking. Also, something to remember, using this will prevent your CSS file from validating, then gain all those browser-specific border radius calls will do the same thing.