Related items

Today's The Day

You are here: irt.org | Articles | JavaScript | Date and Time | Today's The Day [ previous next ]

Published on: Thursday 1st January 1998 By: Martin Webb

Introduction
Adding Images
Stand alone Version
Working Example
Source Code

Introduction

This article brings together the last few articles, to produce a page that shows all data regarding any date entered: full date, age, events, birthstone, Zodiac star sign, Chinese year, lottery numbers and random colors.

As an added extra it also includes images of birthstones, zodiac star sign and the animal associated with the Chinese year.

It also demonstrates how to use the output page in three different options, framed, non-framed and stand alone.

Adding Images

Adding a variable image to a document whilst it is being rendered is fairly simple:

document.write('<IMG SRC="' + imageName + '">');

All that is required is the imageName.

The three different types of images used within this example are displayed as follows:

document.write('<IMG SRC="data/birth/' + months[month] + '.gif" NAME="birthImage" WIDTH="100" HEIGHT="75" ALT="' + birthstone + '" ALIGN="LEFT">');

document.write('<IMG SRC="data/zodiac/' + months[starsign] + '.gif" NAME="zodiacImage" WIDTH="83" HEIGHT="61" ALT="' + zodiac + '" ALIGN="RIGHT">');

document.write('<IMG SRC="data/chinese/' + chineseyear.toLowerCase() + '.gif" NAME="chineseImage" WIDTH="94" HEIGHT="94" ALT="' + chineseyear + '" ALIGN="LEFT">');

All the images are within sub-directories of the data directory. All the images have the height, width and alt attributes defined (all good practice).

The names of the images are defined by the variable, months[month], months[starsign] and chineseyear.toLowerCase() with the addition of .gif. All these varibles have been covered in recent articles, so I won't go into any detail here.

Stand alone Version

In the previous article Blind Date we described how to code a document to accept its input data from either the parent frame, or from the location search property:

if (location.search.length == 0) {
    var year = parent.year - 0;
    var month = parent.month - 0;
    var day = parent.day - 0;
}
else {
    var day   = location.search.substring(5,7) - 0;
    var month = location.search.substring(14,16) - 0;
    var year  = location.search.substring(22) - 0;
}

To add a stand alone version, i.e. where there is no input data, requires a default input. The following script first checks if the location of the current document is not equal to the location of the parent frame, if they are not the same then the current document is within a frameset. In which case we'll use the data held in the parent frame.

If they are the same, then the length of the location search property is checked. If its not zero, then the data held within the search string is used.

If its zero, then it defaults to the local data:

var today = new Date();
var thisYear = y2k(today.getYear());
var thisMonth = today.getMonth()+1;
var thisDay = today.getDate();

if (parent.location.href != window.location.href)
    var year = parent.year - 0, month = parent.month - 0, day = parent.day - 0;
else if (location.search.length != 0)
    var year = location.search.substring(22) - 0, month = location.search.substring(14,16) - 0, day = location.search.substring(5,7) - 0;
else
    var year = thisYear, month = thisMonth, day = thisDay;

The stand alone version also shows the input form, otherwise there is no way to change the date :-)

Now that we've created a stand alone version, we can include it in a popup window:

<SCRIPT LANGUAGE="JavaScript"><!--
function newWindow(fileName,windowName) {
    msgWindow=window.open('',windowName,'toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=yes,resizable=no,width=640,height=480');
    msgWindow.location.href = fileName;
}
//--></SCRIPT>

<A HREF="javascript:newWindow('output.htm','window')">popop</A>