Create a JavaScript Colour Picker

@AoiSoraApr 07.2003

Halo! I got a question in the following:

Create a table with sixteen table data cells, each cell will have background color set to a different pre-de-fined colour. Sixteen will be : black.. silver.. white.. maroon..red.. purple ..etc..

question one: i have to write a script to let the user clicks one of the colors in the table data cell and it would change the background colour depending which colour the user choose.

question two: check to see that the colour picker’s current colour scheme does not conflict with the new selection and deal with it gracefully.

Anyone help ~~ ?

to post a comment

JavaScript

6 Comments(s) _↴

@SPDApr 07.2003 — #? Does this resemble what you asked for?

http://www.superprodesign.com/spd/scripts/background/color/16_1.html

Looks great your script, Dave! ?

Or, if you want, you can look for a similar script in

http://www.superprodesign.com/spd/scripts/scripts.html

Under the "Back color", category... maybe there is something like you are looking for...

SPD ?

@shiroiEGrokuApr 08.2003 — #SPD: your link is good for me to answer the question #1,

but Anyone can help me about the question #2 !!

that's the hardest part in my work !!

? ? ?

@SPDApr 08.2003 — #Dear shiroiEGroku

In what sense does my script conflict with the color scheme?

Can you please be more specific?

It's OK. I subscribed here to learn more about people's likes, as well as to problems with my scripts...

I would thank your answer.

@AoiSoraauthorApr 11.2003 — #[i]Originally posted by SPD [/i]

[B]Dear shiroiEGroku

In what sense does my script conflict with the color scheme?

Can you please be more specific?

It's OK. I subscribed here to learn more about people's likes, as well as to problems with my scripts...

I would thank your answer. [/B][/QUOTE]

Hi! Late reply! Yeah..

the question is ...

[URL=http://www.geocities.com/fantoyuyu/Hw_03.html]Click Here![/URL]

When you choose the color from drop down menu, it will

change the text color, and after if you choose the background

color from the table and the color is the same as the drop down menu which you chose b4 ! the text and the background will be the same and cannot read the text color.. so here is the conflict ! so, i need to create a javascript to solve it !!

anyone help ???

@SPDApr 11.2003 — #IMO, from a Javascript point of view, everything works well as you programmed the script to function, since it changes to the colors that you desire...

Well, nevertheless, I get your point, so I programmed a little bit of code that can help you:

First of all, copy/paste this:

<script>

function conflict(){

if (document.bgColor==document.fgColor){

document.bgColor="white" 

}

}

</script>

Afterwards, insert the function in the onchange event in the select box sfter the part that makes the foreground to change to the desired color after a ; like in the example below:

After that, look in the "black" option and do that in every onclick event after the document.bgColor function like what I did below in the "black" option:

<select onChange=document.fgColor=this.options[this.selectedIndex].value;conflict()>

<option value="black" selected>black</option>

<option value="silver">silver</option>

<option value="gray">gray</option>

<option value="white">white</option>

<option value="maroon">maroon</option>

<option value="red">red</option>

<option value="purple">purple</option>

<option value="fuchsia">fuchsia</option>

<option value="green">green</option>

<option value="lime">lime</option>

<option value="olive">olive</option>

<option value="yellow">yellow</option>

<option value="navy">navy</option>

<option value="blue">blue</option>

<option value="teal">teal</option>

<option value="aqua">aqua</option>

</select></form><br /><br />

<CENTER><TABLE COLS=6 BGCOLOR="#0099FF" WIDTH=50% BORDER=1 CELLPADDING=0 CELSPACING=0

BORDERCOLORDARK=#999999 BORDERCOLORLIGHT=#FFFFFF>

<TD><input type="radio" name="rRadio" value="black" onClick=document.bgColor="black";conflict()>black

<TD><input type="radio" name="rRadio" value="silver" onClick="document.bgColor='silver'">silver

<TD><input type="radio" name="rRadio" value="gray" onClick="document.bgColor='gray'">gray

<TD><input type="radio" name="rRadio" value="white" onClick="document.bgColor='white'">white

<TR>

<TD BGCOLOR=black onClick="document.fgColor='black'"> 

<TD BGCOLOR=silver onClick="document.fgColor='silver'"> 

<TD BGCOLOR=gray onClick="document.fgColor='gray'"> 

<TD BGCOLOR=white onClick="document.fgColor='white'"></TR>

<TR>

<TD><input type="radio" name="rRadio" value="maroon" onClick="document.bgColor='maroon'">maroon

<TD><input type="radio" name="rRadio" value="red" onClick="document.bgColor='red'">red

<TD><input type="radio" name="rRadio" value="purple" onClick="document.bgColor='purple'">purple

<TD><input type="radio" name="rRadio" value="fuchsia" onClick="document.bgColor='fuchsia'">fuchsia</TR>

<TR>

<TD BGCOLOR=maroon onClick="document.fgColor='maroon'"> 

<TD BGCOLOR=red onClick="document.fgColor='red'"> 

<TD BGCOLOR=purple onClick="document.fgColor='purple'"> 

<TD BGCOLOR=fuchsia onClick="document.fgColor='fuchsia'"></TR>

<TR>

<TD><input type="radio" name="rRadio" value="green" onClick="document.bgColor='green'">green

<TD><input type="radio" name="rRadio" value="lime" onClick="document.bgColor='lime'">lime

<TD><input type="radio" name="rRadio" value="olive" onClick="document.bgColor='olive'">olive

<TD><input type="radio" name="rRadio" value="yellow" onClick="document.bgColor='yellow'">yellow</TR>

<TR>

<TD BGCOLOR=green onClick="document.fgColor='green'"> 

<TD BGCOLOR=lime onClick="document.fgColor='lime'"> 

<TD BGCOLOR=olive onClick="document.fgColor='olive'"> 

<TD BGCOLOR=yellow onClick="document.fgColor='yellow'"></TR>

<TR>

<TD><input type="radio" name="rRadio" value="navy" onClick=document.bgColor="navy";conflict()>navy

<TD><input type="radio" name="rRadio" value="blue" onClick="document.bgColor='blue'">blue

<TD><input type="radio" name="rRadio" value="teal" onClick="document.bgColor='teal'">teal

<TD><input type="radio" name="rRadio" value="aqua" onClick="document.bgColor='aqua'">aqua</TR>

<TR>

<TD BGCOLOR=navy onClick="document.fgColor='navy'"> 

<TD BGCOLOR=blue onClick="document.fgColor='blue'"> 

<TD BGCOLOR=teal onClick="document.fgColor='teal'"> 

<TD BGCOLOR=aqua onClick="document.fgColor='aqua'"></TR>

</TABLE>

@apezValApr 11.2003 — #Incidentally, there is a very populay RGB and HEX color tool for web-developers around called "RGB Slider" ...It is the most complicated javascript code I have studied so far. The code is freely available and all you need to do is type in the name at GOOGLE to view the source code to fool around with.

I use it as an local HTML file to select color and when I tried to use it as an object in an aol web-page it surprise me by not functioning with user select-mode, ...I have since learned that aol does not support CGI, so maybe that's why it wont work via their links.:rolleyes:

Also in #JavaScript _↴

Resizing div problem alert() resets form Help with frmvalidator.addValidation

Success!

Help @AoiSora spread the word by sharing this article on Twitter...

Tweet This

Create a JavaScript Colour Picker

6 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Create a JavaScript Colour Picker

6 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

6 Comments(s) _↴

Also in #JavaScript _↴