POST-IT - HTML FILE/MENU COMMON TO MANY PAGES

Create POST-IT File  |   Reference POST-IT File In Another Page  |   Examples Of POST-IT  |   Menu POST-IT

An HTML file can be easily inserted into another HTML web page as that page is loaded by the browser. The HTML file can contain text or graphics but it can not contain javascript or calls to javascript functions. I call this method POST-IT as I am essentially "posting" another HTML onto another HTML file as it is displayed.

This 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 a post-it. The top portion of of this page is a post-it and it is shown on over 300 Help page. The post-it html file can easily be changed.

You can read another of my help pages, SideBar Menu that uses this technique to place a common menu on a page and then uses CSS Positioning to complete the page by placing various parts, e.g. logo, menu, at different positions on the page.

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

Post-it is an excellent way to eliminate adding the same code to many 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 post-its as there is only one file. How? Using Javascript!

Here is the basic concept:

  1. Create a special Javascript file;

  2. 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
<!--
document.write('... YOUR HTML CODE HERE ...')
//-->

NOTE: The HTML code that you use here can not include Javascript. The code may be a menu, such as my drop down menu at the upper left, text, graphics, or any combination of these. Please see SideBar Menu for an example of how to make one type of a menu.

The ... YOUR HTML CODE HERE ... above is your actual HTML code. Note that the ... YOUR HTML CODE HERE ... 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 you need to use a single quotation, ', within the code then you need to use the escape character, i.e. \'.

If the ... YOUR HTML CODE HERE ... is surrounded by double quotes, then you need to use 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 1st and 3rd lines, i.e. <-- 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 post-it file would look like this if the editor has word wrap on:

<!--
document.write('<table border=1><tr><td>New! My Help Page on Dynamically Updating Web Pages!</td></tr></table>')
//-->

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

  1. There are only three lines of code in the file. The 2nd line can be as long as you wish.

  2. There can be no carriage returns in the file other than at the end of the 1st line, i.e. the <!--.

  3. There is no need to put in the <HTML>, <HEAD>, etc. codes as this post-it file will be a part of an existing page when it is added to the page by the browser.

  4. There must not be extra spaces at the end of each line.

  5. You can not use any Javascript code that accesses other files or calls a javascript function.

  6. 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.

  7. You can use word-wrap or not in your editor. For example, in making my menu, using HTML-KIT I leave the word-wrap on but HTML-KIT shows that lines on the page are continuous by the "arrow pointing downward and to the left" as shown below.

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:

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

For example, in my Forms Help page I have the link just below the first line of text on my page.

You can place the .js file anyplace on a page using CSS Positioning.

3. Examples

Here are two examples of using POST-IT to place common code on anywhere on any 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.

4. Menu Example

If you have not read the beginning of this page, please go there either now or after you read the "menu" section below.

Make a drop down menu with post-it by using this format:

POST-IT Drop Down Menu
There are two things you need to make to create a menu common to many other pages using POST-IT.
  1. POST-IT file, menu.js

    <!--
    <document.write('<font size=1 face="Verdana, arial" color="#FFFF00"><FORM NAME="myform"><SELECT NAME="dest" SIZE="1" onChange="DisplayPage(this)"><option selected>Click Here For Menu<option value="termsofuse.htm">Terms Of Use<OPTION>===== HELP TOPICS =====<option value="help.htm">Introduction<option value="1planhost.htm">1planhost.com - My Host<option value="1planhostemailscript.htm">  Email Script</select></form>')
    //-->

    It is important to note that the POST-IT code has only three (3) lines!. The 1st and 3rd lines are <!-- and -->. The 2nd line, document.write('...CODE HERE...') has to be all on a single line, i.e. no carriage returns! You can, like my pages here, have hundreds of menu items on that single line.

  2. HTML code to diplay the menu:
    1. <script language="javascript" src="menu.js"><script>

This will produce:

Other types of menu, e.g. Table Menu, can also be used with the Post-It method. For other types of menus Click Here!