View Full Version : YUI Color Picker

03-06-2007, 07:08 PM
1) Script Title: YUI Color Picker

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex11/yuicolorpicker/

3) Describe problem: I am using the above script to color the background of a table.
I have a number of tables that would want the same background color as one another.

but if I use the same table id only the fist table changes color,

<td width="69&#37;"><table width="128" height="64" border="1" align="center" cellpadding="0" cellspacing="0" bordercolor="#000000" id="colorbox12" style="background-color:white;">

I need to be able to transfer the chosen background color into the other tables, I do not know much code I am more a try it and see if it works.

Any help would be welcome

03-06-2007, 07:49 PM
The color picker doesn't seem designed for that so, I assume you are using it and modifying the code. I can tell you that when scripting style, id's must be unique and that in general there is only one of a given id allowed per page. A single class attribute may be reused as many times as one likes bit scripting it is a little trickier sometimes than scripting id.

03-07-2007, 12:42 AM
I found this in archives but it mentions a revised java file but I cant locate this, please can you let me know where it may be

Ah. You'll need some more extensive changes then. Replace the original ddcolorposter.js file with the attached instead. This modified one supports changing two color boxes to reflect the currently selected color, instead of the default one. On your page then, instead of calling:

ddcolorposter.fillcolorbox("colorfield1", "colorbox1", "colorbox2") //PREFILL "colorbox1" with hex value from "colorfield1"

You'd call:

ddcolorposter.fillcolorbox("colorfield1", "colorbox1", "colorbox2") //PREFILL "colorbox1" with hex value from "colorfield1"

and instead of the code:

# <input type="text" id="colorfield1" onFocus="ddcolorposter.echocolor(this, 'colorbox1')"> <span id="colorbox1" class="colorbox">____</span> <br />

You'd have something like:

# <input type="text" id="colorfield1" onFocus="ddcolorposter.echocolor(this, 'colorbox1', 'colorbox2')"> <span id="colorbox1" class="colorbox">____</span> <span id="colorbox2" class="colorbox">____</span><br />

Untested like before, but should work.

Thanks Steve

03-07-2007, 04:36 AM
It is attached to this post:


from this thread:


Just click or right click on it and choose 'save' or 'save as' and save it to your computer, open it with a text file editor like notepad to see its contents.

03-07-2007, 05:39 PM
Thanks that has helped a lot.
I would now like to change colour of text but can only seem to be able to change color of background to text

<span id="text">Eample of text</span>

Can any one advise
Thanks again


03-07-2007, 10:56 PM
Well, the color of the text is the color style property, while the background is the background-color style property or, as it is written in javascript, backgroundColor.

03-08-2007, 08:15 AM
Thanks for reply
ok I replaced backgroundColor with Color in the ddcolorposter.js file and yes the textchanges but obviously stops the backgounds being changed. I therefore created second file ddcolorposter2.js in the hope both would work but whichever is listed first in my form is the one that works,
Is there a way round this

Sorry but this is all new to me.


03-08-2007, 06:19 PM
OK, up until now, I've just been trying to facilitate whatever it was you were trying to do by answering your questions, providing information. However, it seems as though you have reached a point where you may need me to write out some modified code for you.

I don't think an entire duplicate version of the script will be required. If you could put up a demo of what you had before:

I therefore created second file ddcolorposter2.js in the hope both would work

I can take a look at it and try to figure out just exactly what you have in mind. If I need to ask questions I will but, either way I am sure we can come up with something that works for you.