JavaScript Tip of the Week for October 21, 1996: The Art of Dynamic HTML Creation | Source Code
for October 21, 1996: Source Code: The Art of Dynamic HTML Creation
This code goes in the right before the main FRAMESET:
/* This code is Copyright (c) 1996 Nick Heinle and Athenia Associates,
* all rights reserved. In order to receive the right to license this
* code for use on your site the original code must be copied from the
* Web site webreference.com/javascript/. License is granted to user to
* reuse this code on their own Web site if and only if this entire copyright
* notice is included. Code written by Nick Heinle of webreference.com.
*/
function baseHREF() {
pathURL = window.location + ''; //little bug with URLs and strings
pathDir = pathURL.lastIndexOf ('/', pathURL.length);
pathBase = pathURL.substring (0, pathDir + 1);
return pathBase;
}
function createPage () {
var name = parent.main.document.survey.user_name.value;
var level = parent.main.document.survey.user_level.selectedIndex;
var learn = parent.main.document.survey.user_learn.selectedIndex;
if (learn == 0) how_to = 'play sounds';
if (learn == 1) how_to = 'save space';
if (learn == 2) how_to = 'play with images';
if (level == 0) {
comment = 'Since you are just beginning to learn JavaScript';
if (learn == 0) tip = 'The <A HREF = "../960826/sound_music.html" TARGET = "_top">LiveAudio</A> Tip.';
if (learn == 1) tip = 'The <A HREF = "../960923/part01.html" TARGET = "_top">Simple Select Menu</A> Tip.';
if (learn == 2) tip = 'The <A HREF = "../960902/image_object.html" TARGET = "_top">Image Object</A> Tip.';
}
if (level == 1) {
comment = 'Since you have been using JavaScript for a while';
if (learn == 0) tip = 'The <A HREF = "../960916/part02.html" TARGET = "_top">LiveConnect</A> Tip.';
if (learn == 1) tip = 'The <A HREF = "../960902/select_boxes.html" TARGET = "_top">Modifiable Select Menus</A> Tip.';
if (learn == 2) tip = 'The <A HREF = "../960930/index.html" TARGET = "_top">Highlighted Menus</A> Tip.';
}
if (level == 2) {
comment = 'Since you are experienced in JavaScript';
if (learn == 0) tip = 'The <A HREF = "../960916/part02.html" TARGET = "_top">LiveConnect</A> Tip.';
if (learn == 1) tip = 'The <A HREF = "../960902/select_boxes.html" TARGET = "_top">Modifiable Select Menus</A> Tip.';
if (learn == 2) tip = 'The <A HREF = "../960923/part02.html" TARGET = "_top">Animated Billboard</A> Tip.';
}
newPage = '<BASE HREF = "' + baseHREF() + '">' +
'<HTML><HEAD><TITLE>Your Tip</TITLE></HEAD>' +
'<BODY BGCOLOR = "#FFFFFF" TEXT = "#000000" LINK = "#B8860B" ALINK = "#8B0000" VLINK = "#B8860B">' +
'<TABLE BORDER = 0 CELLPADDING = 5><TR><TD ALIGN = CENTER BGCOLOR = "#EDEDED"><FONT SIZE = 4>Your Tip:</FONT></TD></TR>' +
'<TR><TD>Welcome to JavaScript Tip of the Week ' + name + '. ' + comment + ' and you want to learn how to ' + how_to + ', I suggest:</TD></TR><TR><TD BGCOLOR = "#EDEDED"> ' + tip + '<TD></TR></TABLE>' +
'</BODY></HTML>';
parent.draw.location = 'javascript:parent.newPage';
}
function init() {
blankFrame = '<HTML><BODY BGCOLOR = "#FFFFFF"></BODY></HTML>';
parent.draw.location = 'javascript:parent.blankFrame';
}
Then, right after the code include this FRAMESET:
<FRAMESET onLoad = "init()" COLS = "30%, 60%" FRAMEBORDER = NO BORDER = 0>
<FRAME
SCROLLING=AUTO
SRC = "javascript:parent.blankFrame"
NAME = "draw"
MARGINWIDTH = 2
MARGINHEIGHT = 2>
<FRAME
SCROLLING=AUTO
SRC = "part01_index.html"
NAME = "main"
MARGINWIDTH = 2
MARGINHEIGHT = 2>
</FRAMESET>
These are the forms that were used to control the app:
<FORM NAME = "survey">
First Name: <INPUT TYPE = TEXT NAME = "user_name"></TD></TR>
Expertise in JavaScript:
<SELECT NAME = "user_level">
<OPTION>Beginner
<OPTION>Intermediate
<OPTION>Advanced</SELECT>
I want to learn how to:
<SELECT NAME = "user_learn">
<OPTION>Play Sound
<OPTION>Save Space
<OPTION>Play with Images</SELECT>
<INPUT TYPE = BUTTON VALUE = "Find Tip"
onClick = "if (parent.draw) parent.createPage();">
<INPUT TYPE = BUTTON VALUE = "Lose the Frames"
onClick = "parent.location = 'part02_index.html'">
<FORM>
