HTML Goodies: Script Tip: Week 65

By Joe Burns


Tiger Tip...

     I really have to stop trying to say "Tip" so many different ways. Today we get underway with a new Script Tip. This is a new era in tips because this script was actually submitted right to me specifically to be used as a Script Tip. Thanks to the Silicon Valley Garage for sending it along. It's a great little color script, perfect for Web developers to check colors before writing them into the page.

     Please Note! This script was written specifically to work on MSIE browsers. If you try to run this on Netscape, it will throw errors. After we go through this script, we'll rewrite it and get it to work on Netscape Navigator.

     Take a look at the effect and the code and we'll get started.

Here's the Effect

Here's the Code
It's long, get it all.

     If you didn't take it from the code, this is a table format. The table is four cells wide with one cell spanning across all four. That spanning cell is the one that receives the color. It looks like this with the borders showing:

Color in here
Red Green Blue Hex

     The red, green, and blue settings are all drop down select box form elements. As you have probably noticed, there are 256 choices in each drop box, 000 through 255.

     What the script does is offer you the viewer the ability to choose the R,G,B values and in turn changes it to the more Web friendly hex value. It does that through the three drop down boxes. Let's start with that.

     The drop down box code looks like this:


Many items deleted here to save space...


     It's a little backwards from how I do my boxes. I always have the option selected choice first. This author decided to go the opposite way and put it at the bottom. No problem. It works just as well.

     Now, let's talk a little about colors so you get the concept of this box. You probably know that in Hex code, FFFFFF equals white and 000000 equals black.

     The concept of a hex code is two characters representing a level of red, green, and blue. The levels are 1 through 9 and A through F. The higher the number or letter, the more intense the color. So FF is the highest saturation of color and 00 is the least.

     In the case of white, FF FF FF means the highest saturation of red, green, and blue. That's white. When you're dealing with light, mixing all the colors together gives you white. Don't believe me? Grab a crystal class and shine white light into it. All the colors contained in that white light will show on the wall.

     In the case of black, 00 00 00 means no saturation of color at all. Black. If I wanted red, I could set the hex to FF 00 00. That's a ton of red, no green, and no blue. Are you getting my drift here?

     Now let me throw a monkey wrench into the mix. That hex code I was just talking about is actually a representation of a three digit code used to make color. It works the very same way. "000" is equal to no color saturation at all. "255" is equal to complete saturation.

     Now look up at the code for the drop down menu. Start at the bottom. You can see that the choice 000 has a value of 00 in hex. The next choice is 001. That has a value of 01 in hex. If you continue up the menu you'll see the hex gradually getting stronger as the three digit number rises. Basically what you have here is all 256 numbers in a drop down box and their hex equals as the value for the choice.

     With that all in mind, we can begin to describe how this script functions. When the script first loads, zero values are shown in the R,G,B drop boxes. That's black, thus black is shown in the table cell. In addition, the hex #000000 is shown in the text box.

     Each time a new value is chosen, both the table cell and the text box are updated, so there has to be a function involved that alters them both. There is.

     If you've looked at the code, you can pretty much see the table being constructed in the document.write statements, but you might also have noticed that there is only one drop down box in the code, yet three show up on the page. It's a clever trick we'll get to as the tip goes on.

What Are All Those Back Slashes For?

     So, so glad you asked. The backslash is what's known as an escape sequence. It basically allows us to type in data that shows as text or alters the text around it. In this case the author is using (\").


     That backslash, double quote will allow a double quote to appear on the page. You could probably guess that if you stuck a double quote in there, the script would think you were ending the line and errors would fall all over the place. The author could have simply written the code without any quotes, but he wanted quotes around the attribute when the page compiled, so the backslash, double quote was used to get it.

     You'll see this all the way through the script. Don't think it means anything more than a simple double quote.

Next Week: Build the Table

     Do YOU have a Script Tip you'd like to share? How about suggesting a Script Tip to write about? I'd love to hear it. Write me at: jburns@htmlgoodies.com.

Learn to write your own JavaScripts with the HTML Goodies 30-Step Primer Series

  • Web Development Newsletter Signup

    Invalid email
    You have successfuly registered to our newsletter.
Thanks for your registration, follow us on our social networks to keep up-to-date