Board Logo

Color picker called from a label element. Problem with Firefox.
Julien - 11/20/2007 at 11:44 AM


I love Tigra Color Picker, but I have a problem making it work when called from a <label>.

With MSIE 7.0, it works fine, but the small popup window on which the color picker is doesn't open the right size. (Slightly too large).

With Firefox 2.0, I experience a more serious problem: the popup opens and the palette displays, but shrinks immediately to a mini size. Like if cells that make the color palette had no size.

We can see this problem here, where the picker is called from the two small colored labels on the right of the drop lists that let choose equidistances:

I read the code and used some "alert();" to understand.
As I could see, when giving the width and height of the small cells making the color table, units are not specified and default unit is used (i.e. pixel). I tried to change it, adding "px" after the cell sizes. But later in the code, I observed that the table "innerHTML" mentioned width='8' height='10' for the cells; not '8px', '10px' like I wanted.
I think that Firefox 2.0 requires the "px" unit to be mentioned.

I call the picker this way:
<script language="JavaScript" type="text/javascript" src="../picker.js"></script>
<form ...>
<label id="colorContoursMain" style="border-style:solid; border-width: 1px; background-color:#00CC00" onclick="javascript:TCP.popup(this);" >&nbsp;&nbsp;&nbsp;</label>

In function TCPopup, I was obliged to add a "/" (server root) before the picker html page:
o_colWindow ="/picker.html", ...

Any help will be much appreciated. Thanks.


tigra - 11/20/2007 at 05:32 PM

It looks like path to pixel.gif is incorrect or image is not on the server. Fixing this should take care of firefox problem.
As for the size of the pop-up window: you can modify if you need (see var w = 194, h = 240, in line 14 of picker.js)

Julien - 11/20/2007 at 11:05 PM

Thank you for your answer which was fast and professional.
Yes, the lacking "pixel.gif" file was the problem. Now that I added it, the palette displays correctly also with Firefox.

If you permit a few suggestions:

1) Both the picker.html and picker.js tell:
Note: Script consists of two files: picker.js and picker.html

It would be nice to add -for the color picker- that pixel.gif is also required.

2) The pixel.gif is stored in a subfolder with other pictures. I would put it at the root of the ".zip" archive file as it must be at the same folder level as the script. Moreover, many users could think like me that all pictures are just for testing purposes and delete them like I did.
My Apache server was telling me that the "pixel.gif" file was lacking, but as the palette was working fine with MSIE, so I thought that it was OK without the picture.

3) Renaming pixel.gif to tigraPixel.gif or paletteCell.gif would avoid accidental delete of the picture.
After a few weeks, there is risk for a webmaster to forget why pixel.gif is useful...

4) With MSIE 7, all palettes display with cells 8px * 10px, except the gray one which cells look like 10px * 8px.
An idea could be to make the gray palette display like the others.

5) The color palette cells are bigger in Firefox than in MSIE. Having them the same size would make easier resizing the popups.

Thanks a lot again. I think that I can do most of above changes (if I find time...). Above were just a few ideas.
I love your color picker!


tigra - 11/21/2007 at 01:05 AM

Thanks for your suggestions. We'll consider them for the next release.

Back to forum: