JavaScript Tip of the Week for November 18, 1996: A JavaScript Tour | Source Code | WebReference

JavaScript Tip of the Week for November 18, 1996: A JavaScript Tour | Source Code

JavaScript Tip of the Weekfor November 18, 1996: Source Code: A JavaScript Tour

This code is put in the HTML document where you want the tour 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 November 18, 1996: A JavaScript Tour</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 = 0;
}
function makeTourStop(url, desc, mult) {
this.url = url;
this.desc = descFrameTop + desc + descFrameBottom;
        if (mult != null) this.mult = blankFrameTop + '<EMBED HIDDEN = TRUE LOOP = TRUE AUTOSTART = TRUE SRC = "' + mult + '">' + blankFrameBottom;
        else this.mult = blankFrame;
this.display = displayStop;
}
function displayStop() {
nurl = baseHREF + this.url;
ndesc = this.desc;
nmult = this.mult
parent.pageview.location = nurl;
parent.description.location = 'javascript:parent.ndesc';
        if (!musicEnabled) parent.music.location = 'javascript:parent.blankFrame';
        else if (nmult != lastMus && musicEnabled) parent.music.location = 'javascript:parent.nmult';
}
function newTourStop(url, desc, mult) {
cur++;
tourStops.length = cur;
tourStops[cur] = new makeTourStop(url, desc, mult);
}
function backTour() {
        if (curStop > 1) { 
        lastMus = tourStops[curStop].mult;
        curStop--;
        tourStops[curStop].display();
        }
}
function contTour() {
        if (curStop < tourStops.length) {
                if (curStop > 0) lastMus = tourStops[curStop].mult;
        curStop++;
        tourStops[curStop].display();
        }
        else parent.location = lastStop 
}
function toggleMus() {
        if (!musicEnabled) {
        musicEnabled = true;
        lastMus = '';
        }
        else musicEnabled = false;
tourStops[curStop].display();
}
var cur = 0;
var curStop = 0;
var lastMus = '';
var tourStops = new makeArray();
var musicEnabled = true;
var lastStop = 'index.html';
with (parent.location) { (baseHREF = href.substring (0, href.lastIndexOf ('/') + 1) ); }
var blankFrameTop = '<HTML><BASE HREF = "' + baseHREF + '"><BODY BGCOLOR = "#FFFFFF" TEXT = "#000000" LINK = "#B8860B" ALINK = "#8B0000" VLINK = "#B8860B">';
var blankFrameBottom = '</BODY></HTML>';
var blankFrame = blankFrameTop + blankFrameBottom;
var descFrameTop = '<HTML><BASE HREF = "' + baseHREF + '"><BODY BACKGROUND = "bg.gif" TEXT = "#000000" LINK = "#B8860B" ALINK = "#8B0000" VLINK = "#B8860B"><IMG HEIGHT = 109 WIDTH = 145 SRC = "tourhead.gif"><BR><BR>';
var descFrameBottom = '</BODY></HTML>';
var descFrame = descFrameTop + descFrameBottom;
var controlFrame = '<HTML><BASE HREF = "' + baseHREF + '"><BODY BACKGROUND = "bg.gif" TEXT = "#000000" LINK = "#B8860B" ALINK = "#8B0000" VLINK = "#B8860B"><A HREF = "javascript:parent.backTour()" onMouseOver = "parent.status = \'Back up one stop in tour.\'; return true;"><IMG BORDER = 0 HEIGHT = 27 WIDTH = 81 SRC = "bk_act.gif" HSPACE = 2></A><A HREF = "javascript:parent.contTour()" onMouseOver = "parent.status = \'Continue on to next stop in tour.\'; return true;"><IMG BORDER = 0 HEIGHT = 27 WIDTH = 81 SRC = "ct_act.gif"></A><A HREF = "javascript:parent.toggleMus()" onMouseOver = "parent.status = \'Toggle Music [on/off].\'; return true;"><IMG BORDER = 0 HSPACE = 2 HEIGHT = 19 WIDTH = 61 SRC = "mus.gif"></A></FONT></BODY></HTML>';
newTourStop('blank.html', 'Welcome to the second, and greatly improved, JavaScript Tip of the Week Tour. I\'m Nick, and I\'ll be your textual host throughout the tour.<P> Please take a moment to familiarize yourself with the controls. <P> Pressing "Continue" advances the tour to the next stop, pressing "Back Up" returns you to the previous stop, and (most importantly) if the music gets on your nerves feel free to turn it off using the "Toggle Music" button. <P> All right? Let\'s go on to our first stop...', '../music/pop/relief1.mid');
newTourStop('../index.html', 'Here we are at the front page of JTotW; this is where it all begins. <P> At the top of the page you will always find this week\'s tip; and just below that a brief description of what it\'s all about.', '../music/pop/relief1.mid');
newTourStop('../index.html#news', 'Moving on down the page, you will find the latest happenings at JTotW. Generally there\'s nothing more exciting than a few updates listed, but it\'s always a good idea to take a quick glance if you haven\'t visited for a while.', '../music/pop/relief1.mid');
newTourStop('../index.html#sitenav', 'How do you get around the site fast? Use the Site Navigator; it allows you to jump all over the site with the greatest of ease. <P> Simply select a category on the left, and select a related page on the right.', '../music/pop/relief1.mid');
newTourStop('../index.html', 'A question I often get is, "What are those little signs next to the tips?" Let me clarify, they are there to show you which browers a tip will work on. <P> Signs N3, N2, and E3, stand for Netscape 3, 2, and IE 3. If the sign is highlighted, then you\'re in luck. Otherwise, may the JavaScript Gods have mercy upon your browser.', '../music/pop/relief1.mid');
newTourStop('blank.html', 'Now it\'s time to move on to the other major parts of the site...', '../music/funky/hopfunk1.mid');
newTourStop('../tip_week_past.html', 'This is the Tip Repository, where all of the tips are gathered and organized by subject and date. <P> If you can\'t find it here, then it probably doesn\'t exist. <P> The Repository is due for a big update; soon it will be organized using a JavaScript menuing system... but for now you\'ll have to sift through it on your own.', '../music/funky/hopfunk1.mid');
newTourStop('../book/index.html', 'This section is pretty self explanatory: "The Book". <P> When the book is done, all of it\'s source code and examples will be listed here. You think the Tip Repository is big? You won\'t after seeing this.', '../music/funky/hopfunk1.mid');
newTourStop('../thehut/jtotw_intro.html', 'The Hut. This is where all the tips are put together and played back in fast forward. <P> Every so often, The Hut will offer a new attraction that includes sound, graphics, and (sometimes) bad jokes. <P> You want to see what can be done with JavaScript? Then enter The Hut.', '../music/funky/hopfunk1.mid');
newTourStop('../960930/index.html', 'Here we are at the ever popular image menus tip. After reading a few of the tips, you\'ll see that most are laid out in the same way. <P> First a working example is given, then an explanation of how it works, and finally how you can customize it for your site.', '../music/funky/hopfunk1.mid');
newTourStop('../960930/index.html#code', 'All of JTotW\'s code is color coded. Blue shades mean that the code is important but don\'t agonize over it. Green shades, on the other hand, mean one of two things: You are going to have to change the code to fit your needs (or) the code is being pointed out because of it\'s importance.', '../music/funky/hopfunk1.mid');
newTourStop('blank.html', 'That concludes the tour, I hope you enjoyed it and learned something new about the site. <P> Please <A HREF = "../e-mail.html" TARGET = "_top">tell</A> me if you find this useful; if so I will be adding more to it. <P> Now it\'s time to find out how this was done...', '../music/soundtrk/algarve1.mid');
document.write ('<FRAMESET onLoad = "contTour()" COLS = "210,*" FRAMEBORDER = 0 FRAMESPACING = 0 BORDER = 0>');
document.write ('<FRAMESET ROWS = "0, *, 70" RAMEBORDER = 0 FRAMESPACING = 0 BORDER = 0>');
document.write ('<FRAME NAME = "music" SRC = "javascript:parent.blankFrame" MARGINHEIGHT = 0 MARGINWIDTH = 0 SCROLLING = NO NORESIZE>'); 
document.write ('<FRAME NAME = "description" SRC = "javascript:parent.descFrame" MARGINHEIGHT = 0 MARGINWIDTH = 10>'); 
document.write ('<FRAME NAME = "control" SRC = "javascript:parent.controlFrame" MARGINHEIGHT = 0 MARGINWIDTH = 0 SCROLLING = NO NORESIZE>'); 
document.write ('</FRAMESET>');
document.write ('<FRAME NAME = "pageview" SRC = "javascript:parent.blankFrame" MARGINHEIGHT = 0 MARGINWIDTH =0>'); 
document.write ('</FRAMESET>');
//-->
</SCRIPT>
</HEAD>
<BODY>
You must have a JavaScript enabled browser to view the tour.
<BODY>
</HTML>