View Full Version : color name selector

10-13-2005, 01:34 AM
I started a VERY simple javascript program for selecting a color's name for use in coding (for whatever reason).

I wanted to practice and to review my javascript knowledge; and I was challenging myself to make it as concise and simple, and tight as possible.

This is how far I got (http://powell3d.com/colorsbyname.html) before things started getting a little more complicated. (A 'View Source' should give you the full code I'm using - I think).

Anyone up to the challenge?

Review what I have and suggest how I can:
1)color the selected option appropriately.
2)apply the selected color to the page's background.
3)assign the color's name to the textbox for copying it, OR
4)hold the color's name in memory for pasting into some other program (forget the textbox).

Please keep in mind that what I have already seems like a good start, but it is really confusing to me. My concept of recursion may be all wrong, or I may need to reload the page, or something.

I'm swimming through my javascript reference books, and not seeing how to dig myself out of this mess. Any help would be appreciated; and perhaps when we complete this little script, it could be very useful to other readers. A similar script could be made to copy special characters to the clipboard.
Maybe even one for Regular Expressions reference!

Mitch :)

10-13-2005, 05:05 AM
Try this:

<TITLE>What Do They Call That Color?</TITLE>
<script type="text/javascript" language="JavaScript">

var colorName = new Array('aliceblue', 'antiquewhite', 'aqua', 'aquamarine', 'azure', 'beige', 'bisque', 'black', 'blanchedalmond', 'blue', 'blueviolet', 'brown', 'burlywood', 'cadetblue', 'chartreuse', 'chocolate', 'coral', 'cornflowerblue', 'cornsilk', 'crimson', 'cyan', 'darkblue', 'darkcyan', 'darkgoldenrod', 'darkgray', 'darkgreen', 'darkkhaki', 'darkmagenta', 'darkolivegreen', 'darkorange', 'darkorchid', 'darkred', 'darksalmon', 'darkseagreen', 'darkslateblue', 'darkslategray', 'darkturquoise', 'darkviolet', 'deeppink', 'deepskyblue', 'dimgray', 'dodgerblue', 'firebrick', 'floralwhite', 'forestgreen', 'fuchsia', 'gainsboro', 'ghostwhite', 'gold', 'goldenrod', 'gray', 'green', 'greenyellow', 'honeydew', 'hotpink', 'indianred', 'indigo', 'ivory', 'khaki', 'lavender', 'lavenderblush', 'lawngreen', 'lemonchiffon', 'lightblue', 'lightcoral', 'lightcyan', 'lightgoldenrodyellow', 'lightgreen', 'lightgrey', 'lightpink', 'lightsalmon', 'lightseagreen', 'lightskyblue', 'lightslategray', 'lightsteelblue', 'lightyellow', 'lime', 'limegreen', 'linen', 'magenta', 'maroon', 'mediumaquamarine', 'mediumblue', 'mediumorchid', 'mediumpurple', 'mediumseagreen', 'mediumslateblue', 'mediumspringgreen', 'mediumturquoise', 'mediumvioletred', 'midnightblue', 'mintcream', 'mistyrose', 'moccasin', 'navajowhite', 'navy', 'oldlace', 'olive', 'olivedrab', 'orange', 'orangered', 'orchid', 'palegoldenrod', 'palegreen', 'paleturquoise', 'palevioletred', 'papayawhip', 'peachpuff', 'peru', 'pink', 'plum', 'powderblue', 'purple', 'red', 'rosybrown', 'royalblue', 'saddlebrown', 'salmon', 'sandybrown', 'seagreen', 'seashell', 'sienna', 'silver', 'skyblue', 'slateblue', 'slategray', 'snow', 'springgreen', 'steelblue', 'tan', 'teal', 'thistle', 'tomato', 'turquoise', 'violet', 'wheat', 'white', 'whitesmoke', 'yellow', 'yellowgreen');

function doColor(value){
document.colorForm.forCopying.value = value;

function highlight() {
var attrib = eval('document.colorForm.forCopying');

<BODY id="main">
<form name="colorForm">
<select name="getColors" onclick="doColor(document.colorForm.getColors.value)">

<script type="text/javascript">
document.write("<option style='background-color:" + colorName[0] + ";' value='" + colorName[0] + "' selected>" + colorName[0]);
document.write("<option style='background-color:" + colorName[i] + ";' value='" + colorName[i] + "'>" + colorName[i]);

<input type="reset" value="Reset"><br><br>
<input type="text" name="forCopying" value="" readonly><br><br>
<input type="button" value="Select" onclick="highlight()">


It's possible to copy text to the clipboard using IE, but unfortunately most browsers including Firefox don't support it. The best you could do in Firefox would be to offer a button that would select the text, but the user would still have to copy it manually.

10-13-2005, 06:08 AM
Thanks pccode!

I was throwing away a perfectly good body, while trying to make everything happen in the head! [my mess (http://powell3d.com/colorsbyname.html)]

I see the clarity of purpose in your code (http://powell3d.com/colorsbypccode.html).

Your other posts here have been consistently understandable and helpful too! You're good!

I had a feeling browsers didn't support the dragging feature between applications. That would be nice though, wouldn't it? If you could click and drag the piece of text you want, and drop it off in the text-editing interface of your choice?

Thanks again.
I'll use it as is!
Someday I'll re-write it in PHP and add some features to it!

10-13-2005, 09:35 PM
Looks like I'll have to work with it to get it to work in IE and Nestscape.

My IE requires that I disable my Norton firewall. I don't know what changed things, but now I don't use it very often because of this.

Anybody have any luck re-working this program to get it to work in IE and Netscape?