HTML Goodies: Script Tip: Week 67

By Joe Burns

 

Hello...

     The engine that makes this script run is a simple function named mix(). We'll get into it here.


Here's the Effect


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


     The function mix() performs the same maneuver twice sending the same result to two different places. One result goes to the table cell to display the color. The other goes to the text box to display the hex code. The function looks like this:

function mix()
{
if (document.all)
{
document.all("box").style.background = "#"+document.ColorMix.red.options[document.ColorMix.red.selectedIndex].value+document.ColorMix.green.options[document.ColorMix.green.selectedIndex].value+document.ColorMix.blue.options[document.ColorMix.blue.selectedIndex].value;

document.ColorMix.code.value = "#"+document.ColorMix.red.options[document.ColorMix.red.selectedIndex].value+document.ColorMix.green.options[document.ColorMix.green.selectedIndex].value+document.ColorMix.blue.options[document.ColorMix.blue.selectedIndex].value;
}
else
{
alert("Sorry, your browser does not support the programming needed to run this script.");
}
}

     The function begins like all other functions do, but the command function, the name of the function, mix, the instance, and then a curly bracket encase what the function will do.

     The first line of the function is the major reason this will not run on Netscape Navigator browsers. The if statement begins with the command if(document.all).

     That is a proprietory command understood by IE4 and above browsers. By attaching "all" to a document you basically set it up to be a representation of all the elements in the HTML document. It will help us attach style attributes to elements of the page.

     For now, its usage in the if statement basically asks if the browser can support the command "all". If it can't, then an alert pops up telling the user they don't have a browser powerful enough to run the script. Bummer.

     But let's stick with what happens if the document.all is recognized and the function mix() runs.

     Remember that each of the drop down menus carries with it an onChange Event Handler. That way, any time the user alters the display of the menu, the function is triggered to run. No matter what change is made, the script responds. Pretty slick...

     The first item we're interested in altering is the long table cell. This is the line that attaches the function to it:

document.all("box").style.background =

     Now document.all is carrying an instance. See the parentheses after all? In this case, all is being used as an array reresenting all of the elements on the page. Notice what is in the instance, "box". That's the ID name given to the table cell. So now we're focusing right on that specific element of the page.

     But what will we do to it? We'll work with the background style. See the format? We're going to set a background style color for that specific element, "box".

     This is the reason the script doesn't function properly in Netscape. This format is MSIE only.

     Next we need to set the background style to some color. That color will be formed by taking the value chosen by the user from the red, green, and blue drop down menus. Here's the first blip of code:

"#"+document.ColorMix.red.options[document.ColorMix.red.selectedIndex]

     The color code will begin with a pound sign (#). It's in quotes and will just be attached to the front of the hex code. Next we grab the red code. The item will come from the first drop down box denoted by document.ColorMix.red.options. Exactly what hex was chosen is represented by [document.ColorMix.red.selectedIndex].

     The selectedIndex is the value of the item chosen. Those values are hex codes. So if the user chooses 255, then the value FF is returned to this run.

     Now look at the code again. The same thing happens grabbing the value from the green and then the blue drop down menus. When those three hex values are put together, you get a hex code. That hex code is assigned to the table cell and the background color changes. In the next full line of the function, the exact same thing happens. The choices the user made are pulled together to create a hex code. Only in this line of code, the hex is sent to the text box for display:

document.ColorMix.code.value =

     So each time a new value is chosen in any of the boxes, the function mix() is triggered. That function firsts tests the browser, then grabs the choices the user made, changes the table cell background and sends the hex to a text box for display.

     It's a great script, but as I said a couple of tips back, it only works in MSIE 4.0 and above. I took some time to play with the code and got it to work in Netscape (and of course MSIE also). Well see that next week.

Next Week: Make it work in Navigator

     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


Make a Comment

Loading Comments...

  • 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