Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Apr 2005
    Location
    Laguna Beach, CA
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question color name selector

    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 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!

    Thanks,
    Mitch
    Last edited by mitchpowell; 10-13-2005 at 02:39 AM.

  • #2
    New Coder
    Join Date
    Oct 2005
    Posts
    87
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Try this:

    Code:
    <HTML>
    <HEAD>
    <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.getElementById('main').style.setProperty("background-color",value,null);
    document.colorForm.forCopying.value = value;
    }
    
    function highlight() {
    var attrib = eval('document.colorForm.forCopying');
    attrib.focus()
    attrib.select()
    }
    
    </script>
    </HEAD>
    <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]);
    for(i=1;i<colorName.length;i++){
    document.write("<option style='background-color:" + colorName[i] + ";' value='" + colorName[i] + "'>" + colorName[i]);
    }
    </script>
    
    </select><br><br>
    <input type="reset" value="Reset"><br><br>
    <input type="text" name="forCopying" value="" readonly><br><br>
    <input type="button" value="Select" onclick="highlight()">
    </form>
    
    </BODY>
    </HTML>
    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.

  • #3
    New to the CF scene
    Join Date
    Apr 2005
    Location
    Laguna Beach, CA
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks pccode!

    I was throwing away a perfectly good body, while trying to make everything happen in the head! [my mess]

    I see the clarity of purpose in your code.

    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!

  • #4
    New to the CF scene
    Join Date
    Apr 2005
    Location
    Laguna Beach, CA
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    It works in Firefox...

    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?


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •