JavaScript Tip of the Week for October 28, 1996: The Art of Dynamic HTML creation | Source Code | WebReference

JavaScript Tip of the Week for October 28, 1996: The Art of Dynamic HTML creation | Source Code

JavaScript Tip of the Weekfor October 28, 1996: Source Code: The Art of Dynamic HTML creation, Part Two

Tailoring Your Pages for Any Browser
Create Eye Catching Intros



This code is put in the HTML document where you want the browser version to be detected and the respective page to be displayed. This is the exact one that was used in this week's tip:
<HTML>
<HEAD>
<TITLE>JavaScript Tip of the Week for October 28, 1996: The Art of Dynamic HTML creation</TITLE>
<SCRIPT LANGUAGE = "JavaScript">
/* 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.
 */
bName = navigator.appName;
bVer = parseInt(navigator.appVersion); 
        if      (bName == "Netscape" && bVer >= 3) ver = "n3";
        else if (bName == "Netscape" && bVer == 2) ver = "n2";
        else if (bName == "Microsoft Internet Explorer" && bVer >= 2) ver = "e3";
        if (ver == "n3") {
        document.write('<FRAMESET ROWS = "100%, *" FRAMEBORDER = NO BORDER = 0>' +
                       '<FRAME NAME = "real" SRC = "part01_ns3.html" SCROLLING = AUTO MARGINHEIGHT = 2 MARGINWIDTH = 2>' +
                       '</FRAMESET>');
        }
        if (ver == "n2") {
        document.write('<FRAMESET ROWS = "100%, *" FRAMEBORDER = NO BORDER = 0>' +
                       '<FRAME NAME = "real" SRC = "part01_ns2.html" SCROLLING = AUTO MARGINHEIGHT = 2 MARGINWIDTH = 2>' +
                       '</FRAMESET>');
        }
        if (ver == "e3") {
        document.write('<FRAMESET ROWS = "100%, *" FRAMEBORDER = NO BORDER = 0>' +
                       '<FRAME NAME = "real" SRC = "part01_e3.html" SCROLLING = AUTO MARGINHEIGHT = 2 MARGINWIDTH = 2>' +
                       '</FRAMESET>');
        }
</SCRIPT>
<BODY BGCOLOR = "#FFFFFF" TEXT = "#000000" LINK = "#B8860B" ALINK = "#8B0000" VLINK = "#B8860B">
<CENTER>
This page is what non-javascript browsers see.
</CENTER>
</BODY>
</HTML>
This code is put in the HTML document where you want the slide show to be displayed. No other documents are needed, this is the exact one that was used in this week's tip:
<HTML>
<HEAD>
<TITLE>JavaScript Tip of the Week for October 28, 1996: The Art of Dynamic HTML creation</TITLE>
<SCRIPT LANGUAGE = "JavaScript">
<!--
/* 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 makeArray() {
this.length = makeArray.arguments.length;
        for (var i = 0; i < this.length; i++)
        this[i + 1] = makeArray.arguments[i];
}
function makeSlideShow (obj, wait, pre, url) {
this.curText = '';
this.posit = 1;   
this.word = obj;  
this.length = obj.length;
this.pre = pre;
this.wait = wait;
this.url = url;
this.display = displaySlideShow;
}
function displaySlideShow() {
        if (this.posit <= this.length) {
        this.curText = this.word[this.posit]
        outStringWord = blankFrameTop + this.pre + this.curText + blankFrameBottom;
        parent.draw.location = 'javascript:parent.outStringWord';
        this.posit++;
        }
        else top.location = this.url;
}
function displayLoop() { 
        if (wordIntro.posit <= wordIntro.length)
        reDraw = setTimeout('displayLoop()', wordIntro.wait);
wordIntro.display();
}
var words = new makeArray ('This is a simple effect.', 'One of many actually.', 'It caught your attention.', 'Now find out how it\'s done.');
var wordIntro = new makeSlideShow (words, 2500, '<CENTER><BR><BR><BR><BR><BR><BR><BR><BR><FONT SIZE = 5>', 'part02_index.html');
var blankFrameTop = '<HTML><BODY BGCOLOR = "#000000" TEXT = "#FFFFFF">';
var blankFrameBottom = '</BODY></HTML>';
var blankFrame = blankFrameTop + blankFrameBottom;
document.write ('<FRAMESET onLoad = "displayLoop()" ROWS = "100%, *" FRAMEBORDER = NO BORDER = 0>');
document.write ('<FRAME SCROLLING = AUTO SRC = "javascript:parent.blankFrame" NAME = "draw" MARGINWIDTH = 2 MARGINHEIGHT = 2>');
document.write ('</FRAMESET>');
//-->
</SCRIPT>
</HEAD>
<BODY>
This Page is what non-JavaScript browsers see.
</BODY>
</HTML>