Example: Building A Colour Picker

Next: Web Page Design Up: JavaScript and Frames Previous: JavaScript and Frames

Example: Building A Colour Picker

This example is taken from the recommended course book:

Web Programming by Chris Bates

The simple colour picker:

Shows how we can customise HTML a little more also

Also shows how to process a HTML form in JavaScript

Construct a framset of two frames.

The upper one contains a form which is used for data gathering.

Enter data in form
Can set colour (by name) of Background Color, Text Color, Table Headings and Table Data.

The lower frame shows the result of the colour selections

created directly by JavaScript code.

Colour Picker

The Frameset

The code for the frameset is very simple:

<html>
<head>
<title>colour picker</title>
</head>
<frameset rows="40%,*">
<frame name="topone" src="./cols.html">
<frame name="botone" src="./blank.html">
</frameset>
</html>

The names of the frames will become important shortly

Initial Bottom Frame

Eventually we write to the bottom frame
initially it is set blank HTMLL page
For good browser support best to use blank HTML code:
```
<html>
<head>
</head>
<body>
</body>
</html>
```

The Top Frame

The top frame is simple enough.

Simple HTML
Call a JavaScript: picker.js
Use onClick() action to trigger bottom frame display (by picker.js on submit

<html>
<head>
  <script language=javascript src="picker.js">
  </script>
</head>

<body bgcolor=white text=red>
<h1 align=center>Chris's HomeBrew Colour Picker</h1>

<form>
  <table align="center" border=0 cellpadding=5>
  <tr>
  <td colspan=4 align=center>
  <h2>Enter Colour Values in the Boxes</h2>
  </td>
  </tr>
  <tr>
  <td>
  <h3>Background Colour</h3>
  </td>
  <td>
  <input type="textfield" size=16 name=bgcol 
   value=white>
  </td>
  <td>
  <h3>Text Colour</h3>
  </td>
  <td>
  <input type="textfield" size=16 name=fgcol 
   value=black>
  </td>
  </tr>
  <tr>
  <td>
  <h3>Table Headings</h3>
  </td>
  <td>
  <input type="textfield" size=16 name=thcol 
   value=black>
  </td>
  <td>
  <h3>Table Data</h3>
  </td>
  <td>
  <input type="textfield" size=16 name=tdcol 
   value=black>
  </td>
  </tr>
  <tr>
  <td colspan=2 align=center>
  <input type="submit" value="Show It!!" 
   onClick="ShowIt()">
  </td>
  <td colspan=2 align=center>
  <input type="reset" value="Reset It">
  </td>
  </tr>
  </table>
</form>
</body>
</html>

The JavaScript Code: picker.js

The Interesting Bit!!

The operation of code is fairly simple:

Use JavaScript frame class -- which we've not seen before.
Use JavaScript form class.
Single function called ShowIt() does the job.
Form colour values don't need to be passed as parameters.
- Available to the script through the frameset itself.
- frames given the names when created
  topone and botone,
- script is part of the document that is being displayed in frame topone
- access colour values through this

Create two local variables:
```
var topbox = document.forms[0].elements;
var bottombox = parent.frames['botone'].document;
```
topbox
: refers to all items in the upper frame -
- document only has one form
- start of the forms array on position zero.
- Values of form stored in elements array.
bottombox
: refers to all items in the lower frame -
- This how we are going to communicate info from the top to bottom frame.
- Reference the bottombox and write() data to it.

Getting Information from the Form

Once the documents have been correctly aliased the values can be extracted from the form.

We refer the topbox variable:
For example to get the background colour off the form. We do
var bg = topbox.bgcol.value;
Note bgcol is the name associated with this form element.
Other form items similarly treated.

Setting up the bottom frame

Having extracted the parameters the coloured sample page can now be created.

First the frame has to be opened -- otherwise we cannot write to the frame:
bottombox.open();

Next we create the HTML for the page:

Need to make the <BODY> ...</BODY> pair of tags
To set up background and foreground colours.

Use write() to the bottombox:

bottombox.write("<body bgcolor="
                 + bg
                 + " text="
                 + fg
                 + ">\n");
bottombox.write("</body>");

Also the visible content (a table) in similar way
Finally we close the document.
bottombox.close();
- Essential: The point at which the HTML gets sent to the frame
- The page gets displayed.

The full code for picker.js:

function ShowIt( ){

var topbox = document.forms[0].elements;
var bottombox = parent.frames['botone'].document;

// first extract the values from the form
var bg = topbox.bgcol.value;
var fg = topbox.fgcol.value;
var thc = topbox.thcol.value;
var tdc = topbox.tdcol.value;

// now build the new page
bottombox.open();
bottombox.write("<body bgcolor="
                 + bg
                 " text="
                 + fg
                 + ">\n");
bottombox.write("<h1 align=center>The Result Is:</h1>");
bottombox.write("<table align=center border=2"
                 + "cellpadding=4 cellspacing=4>\n<tr>"
                 + "<th>Plain Heading</th>"
                 + "<th bgcolor="
                 + thc
                 + ">Coloured Heading</th>"
                 + "</tr>"
                 + "<th>Plain Data</th>"
                 + "<th bgcolor="
                 + tdc
                 + ">Coloured Data</th>"
                 + "</tr>"
                 + "</tr>\n</table>");
bottombox.write("</body>");
bottombox.close();
}

EXERCISE: amend the picker.js script to check for valid colour data form entry?

Next: Web Page Design Up: JavaScript and Frames Previous: JavaScript and Frames

Dave Marshall
9/28/2001