Wise Old Man's Help Page

JAVASCRIPT MENU - 1 FOR ALL PAGES

The Javascript Menu - 1 For All Pages will dynamically update your page by easily inserting,or including, another file in a web page. This file can contain simple text, graphics, or a menu. The method is highly effective and efficient way to put a common menu on many pages. It allows you to change one file and have the result show on many other pages.

All my pages, Help, Page Builder, and tutorial pages, use this method. The menu at the top left is shown on over 300 Help page and it can easily be changed.

There are several methods that can be use to insert one document into another. This page will deal with dynamically updating your page with javascript. For other methods, please see IFRAME and Server Side Include.

Dynamically updating a web page, i.e. have information dynamically added to any or all of your web pages without modifying each and every page, is an excellent way to save yourself from adding the same code to every one of your pages, e.g. a menu!

For example, suppose you wish to have a menu on each of 25 pages but you don't want to change each page when you change the menu. You can do this dynamically by only changing one file. How? Using Javascript!

Here is the basic concept:

Create a special Javascript file;
Reference this Javascript file in each of the other files at the place where you want the information to be.

1. Create a special Javascript file

Below is the basic code you have to use in a special file for dynamically placing code within another file:

BASIC CODE FOR DYNAMIC WEB PAGE

The _____ above is replaced by the actual HTML code. Note that the _____ is surrounded by single quotation marks, '. This means that within the HTML code you can freely use the double quote without the escape character, backslash(\). If the _____ is surrounded by double quotes, the you would need the backslash escape character to put a double quote in the HTML code, e.g. <font color=\"#0033ff\">.

The code can be any legal HTML codes but without any carriage returns, i.e. all the code goes in the second line of the file. This code is placed in a file that has .js for the file extension, e.g. update.js. NOTE: the <-- and //--> are really not needed but are there simply to remind you that the code is in a .js file.

For example, say you wish to but some text in a table and have other pages display this table which has this code:

<table border=1><tr><td>
New! My Help Page on Dynamically Updating Web Pages!
</td></tr></table>

The the update file would look like this if the editor has word wrap on:

There are a few RULES that you must follow when creating the .js file:

There are only three lines of code in the file. But the 2nd line can be as long as you wish.
There can be no carriage returns in the file other than at the end of the 1st line, i.e. the <!--.
There is no need to put in the <HTML>, <HEAD>, etc. codes as this .js will be a part of an existing page when it is dynamically added to the page.
There must not be extra spaces at the end of each line as Javascript is very sensitive.
You can not use any Javascript code that accesses other files.
Use the escape character, backslash, \, to allow certain other characters to be used. If the HTML code is surrounded by a single quote then you need to use \' to put a single quote in the code.
document.write('This is my Form\'s Menu</a>')
Conversely, if you surround the HTML code with double quotes, then you need to use \" to put a double quote in the code but the backslash is not needed to put a ' in the code but a backslash is not needed to put a single quote, ', in the code.
document.write("<a href=\"mymenu.html\">Form's Menu</a>")
Recommendation: use the single quote to surround the html code so you can use double quotes normally.
It is best to keep the word/line wrap off in the editor you are using to make the file.

To make a drop down menu use the following format:

Sample Javascript Dynamic Menu

This javascript function is "linked to" by all pages, i.e. it is the file, displaypage.js, and every page uses this code to link to it. There is nothing else is this file other than what you see below.
<script language="javascript" src="displaypage.js"><script&>
-------- displaypage.js file --------------

-------- end of displaypage.js file -----------
------- code for the common menu page, a file named mymenu.js ----------

------- end of mymenu.js file -------------
This will produce:

It is important to note that the above code has only three (3) lines!. The 1st and 3rd lines are <'!-- and -->. You can, like my pages here, have hundreds of menu items.

IMPORTANT NOTE: Extra spaces at the end of a line within the document.write will cause the code not be displayed.

2. Referencing The File

This is the easy part. You just put this code in the other pages where you want the dynamically HTML to appear:

For example, in my Forms Help page I have the above just below the first line of text at the top of my page which states the page topic.

3. Examples

To see the use of this method for a menu on a number of pages, please see my Frame Page or My Forms Page. Each of these have a common menu at the top that is done with this document.write method. Use your browser's VIEW > SOURCE and note the use of the single line:

<SCRIPT language="javascript" src="____menu.js"></SCRIPT>

to place the menu at the top of each page in those sections.

4. Testing The Method

In order to assure you that this works, I placed the following code in a file named update.js. You can cut and paste the code below into a blank document and use it as is. It will work as there are no "end-of-lines" or extra space, which, according to the rules, you can not have.

Note that the code below is surrounded by double quotes. Therefore, a single quote can be used where you normally would use a double quote, e.g. in the bgcolor='#0033FF'.

document.write("<table border=0 bgcolor='#0033FF' width=500 cellpadding='1pt' cellspacing=0><tr><td><table cellpadding=5 border=0 cellspacing=0 width=100%><tr><td align=center><font size=2 face='verdana,arial' color='#FFFFFF'><B>A DYNAMICALLY UPDATE FOR A WEB PAGE</B></font></td></tr></table><table width='100%'  cellpadding=10 border=0 cellspacing=0><tr><td bgcolor='#FFFFFF'>This is an example of a table with (1) a header and (2) a Thin-Line Border.  This is made with a <B>table-within-a-table</B>.  The outside table displayes the thin-line border, using <B>cellpadding='1pt'</B> , which is really just the outside table background color with an inside table of a different color. The header is just another table-within-a-table. If you look at the code you will see that this is rather a complicated table arrangement but only one <B>document.write</B> code is used. <p>The key here is to make sure that the code doesn't have any extra spaces as this will cause the file not to display.</td></tr></table></td></tr></table>")

As you can see, I have use a very long, complicated html code in the above. Again, it is important that you not have any extra spaces as it will most likely cause the code not to be displayed. This code will display:

A DYNAMICALLY UPDATE FOR A WEB PAGE
This is an example of a table with (1) a header and (2) a Thin-Line Border. This is made with a table-within-a-table. The outside table displayes the thin-line border, using cellpadding='1pt' , which is really just the outside table background color with an inside table of a different color. The header is just another table-within-a-table. If you look at the code you will see that this is rather a complicated table arrangement but only one document.write code is used.
The key here is to make sure that the code doesn't have any extra spaces as this will cause the file not to display.

Use this link, See Dynamically Updated Page which will be displayed in a new window. Please use your browser's VIEW SOURCE to look at the source code to see that this is exactly how the file is coded.

<html>
<head>
<title>Dynamically Updated Page</title>
</head>
<body>
<SCRIPT language="javascript" src="update.js">
</SCRIPT>
<font size=2 color="#000000" face="verdana,arial">
<p>
This is a sample page which accesses the file, <B>update.js</B>,
to dynamically place HTML code on the page.
<p>Please use the <B>VIEW | SOURCE</B> of your browser
to view the code of this page to see that the actual code for

the table is not present if you are using Microsoft's Internet Explorer, i.e. it is added
dynamically when
the page loads. Netscape, however, will show the dynamically added code.
</body>
</html>

Here are two more examples of using this method to place a .js file anywhere in a page.

If you VIEW THE SOURCE CODE you should not see the actual code for the Did You Know? or the Files On This Site as they are added dynamically as the page loads.

You can use this technique to place a dynamic menu on your pages. Then you could have many pages as you want and all of them would use the same menu file!!! The menu at the top of this page is an example of this method.

If you go to brainjar.com, you will see an excellent menu and the code to produce it. Now, go to my help page, Menu > Navigation Bar and you will see how to use the dynamically update a page to make this drop down menu on the web site.