Login | Register   
RSS Feed
Download our iPhone app
Browse DevX
Sign up for e-mail newsletters from DevX

By submitting your information, you agree that devx.com may send you DevX offers via email, phone and text message, as well as email offers about other products and services that DevX believes may be of interest to you. DevX will process your information in accordance with the Quinstreet Privacy Policy.


Build a Web-safe Color Palette Application-2 : Page 2




Application Security Testing: An Integral Part of DevOps

Create a Web-safe Palette
This solution has two goals—displaying the Web-safe palette and making it interactive. Displaying the palette is easy; you use some nested loops and a simple array to build a table whose cells each represent a different entry in the palette. A pair of radio buttons on the page lets users choose whether they're selecting a foreground or a background color. Finally, to make the display interactive, you can connect the onClick event for each colored cell in the table to a function that applies the selected color to either the foreground or background color of a separate display—based on the currently selected radio button. Simple event handlers for the radio buttons maintain the foreground/background value, and a "dummy" <div> tag holds content so users can see the effect of their chosen colors immediately.

To get started, open up your favorite text editor and add the following code:

<html> <head> <title>Web Safe Color Palette App</title> <style> body,td { font: 10pt Tahoma, Arial, Helvetica, sans-serif; } td { cursor: pointer; cursor: hand; } #colorTable { position:absolute; top:0; left:0; width:350; } #controls { position:absolute; top:5; left:360; width:350; } #testArea { position:absolute; top:70; left:360; width:400; padding: 5px; } </style> </head> <body> </body> </html>

The CSS Rules shown above position elements on the page. Next, create three <div> tags to hold the color table, the radio button controls, and a test area where the color effects appear. Because each of the <td> cells will be clickable, the td rule turns the standard cursor into the hand cursor when users move the mouse over a table cell. Note that the rules don't specify any colors—users will determine the colors in the testArea by clicking on the cells in the palette.

Add the following between the <body> tags:

<u> <div id="colorTable"> <script type="text/javascript"> document.write(createTable()); </script> </div> <div id="controls"> <table cellspacing="5" cellspacing="5"> <tr> <td> <input type="radio" name="colorControl" checked="true" value="fore" onClick="colorToSet='fore';"> Set Foreground Color</input> </td> <td><input type="radio" name="colorControl" value="back" onClick="colorToSet='back';"> Set Background Color</input> </td> </tr> <tr> <td id="foreground">Foreground: 000000</td> <td id="background">Background: ffffff</td> </tr> </table> </div> <div id="testArea"> <p>Lorem ipsum dolor... (get the complete placeholder text from the code download)</p> </div> </u>

The colorTable <div>'s content will be generated by a function called createTable(). Also note that the controls <div> possesses two radio buttons—one to set the foreground color and one to set the background color. Each radio button has an onClick event that sets the value of a flag—colorToSet—in the script to either "fore" or "back". The function that displays the selected colors in the testArea <div> will check this flag to see which property to change. The controls <div> also contains labels that display the current color values of the foreground and background properties of the testArea. Initially, these values are set to black text (#000000) on a white (#ffffff) background. Finally, the testArea <div> contains some placeholder text so users can see how the colors interact.

Comment and Contribute






(Maximum characters: 1200). You have 1200 characters left.



Thanks for your registration, follow us on our social networks to keep up-to-date