Today's The Day

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

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>

Working Example

Try this example which brings everything together from the last ten articles: frame version, non frame version, stand alone version, popop version.

Note: The non frame version will not work offline in MSIE version 3.x.

Source Code

You can view the source code of the four components:

Feedback on 'Today's The Day'

• Today's The Day - Kevin Skinner January 23, 2003 at 23:30:43:
• Today's The Day - Kevin Skinner January 13, 2003 at 18:46:08:
• Today's The Day - Stuart Arnold July 13, 2002 at 07:38:05:
• Today's The Day - melinda groves 13:44:55 7/14/99

View the profile on Martin Webb and the list of other Articles by Martin Webb.