JavaScript Tool Kit #3

Yet another collection of short, simple JavaScripts that do various useful things.

Pre-Load Images

If your page uses a lot of image rollovers, you will want to pre-load the "rolled-over" images so there will be no time lag between the first image being changed to the second image.

<div style="display:none">
<script type="text/javascript">
var images = new Array()
function preload() {
for (i = 0; i < preload.arguments.length; i++) {
images[i] = new Image()
images[i].src = preload.arguments[i]
//--> </script>
Web page:

Nothing will be displayed on the web page because the images are pre-loaded into a div that is set to display:none.

This script can be placed anywhere in the body of your HTML doc.

Write Today's Date:

<div style="font: normal 14px/18px 'trebuchet ms', sans-serif">

<script language="JavaScript">
var date = new Date();
var d = date.getDate();
var day = (d < 10) ? '0' + d : d;
var m = date.getMonth() + 1;
var month = (m < 10) ? '0' + m : m;
var yy = date.getYear();
var year = (yy < 1000) ? yy + 1900 : yy;
document.write(month + "/" + day + "/" + year);

Web page:

Interactive Div

This one is useful for creating buttons or providing a larger target area for the user's cursor.

<div onmouseover="style.backgroundColor='#fff';" onmouseout="style.backgroundColor='#fed';" onclick="alert('Thanks for clicking.');" style="cursor:pointer; border: #789 solid 1px; padding: 30px; background: #fed; margin: 20px 20px 20px 20px; ">Click anywhere in this div to pop up an alert.</div>

<div onmouseover="style.backgroundColor='#fff';" onmouseout="style.backgroundColor='#def';" onclick="top.location.href='http://www.re-vision.com/webwork';" style="cursor:pointer; border: #789 solid 1px; padding: 30px; background: #def; margin: 20px 20px 20px 20px; ">Click anywhere in this div to load the Webwork Table of Contents.</div>
Web page:
Click anywhere in this div to pop up an alert.
Click anywhere in this div to load the Webwork Table of Contents.

"Mad-Libs" JavaScript Games

The Mad-Libs party game is one where words are collected to fill in the blanks in a pre-written story which is then read aloud. The results are (with luck) funny. Originally done with paper and pencil, Mad-Libs are well-suited to Javascript because of its ability to gather data from a form and present it back in whatever format the script-writer wants.

Here's a simple example based on Marc Antony's famous speech:

Plural Noun:
Part of body (plural):
<script language="JavaScript">
function create(form) {
var start="go";
if (start=="go") {

text = ("<head><title>Marc Antony's Address from Julius Caesar</title>");
text += ("<style type='text/css' media='screen'> body { padding:20px } </style> ");
text += ("<p style='font: bold 14px/18px sans-serif; '> Marc Antony's Address from Act III, Scene II of <e>Julius Caesar</em> </p>");
text += ("<p style='font: normal 14px/18px sans-serif; '> Friends, Romans, " +form.input1.value+ " lend me your " +form.input2.value+ "... </p>");
text += ("<br /><br /><input type='button' value='close window' onclick='top.window.close()'>");

msgWindow=window.open("","displayWindow","toolbar=no,width=250, height=200,directories=no,status=no,scrollbars=no,resize=no,menubar=no")
Plural Noun: <input type="text" name="input1" size=20>
Part of body (plural): <input type="text" name="input2" size=20>
<input type="button" value="Generate story" onclick="create(this.form)">

Click here for a more complex example.

Previous | Webwork Table of Contents | Next >