Click here for Navigation:
Code To Be Included | Declaring the Include-file | Calling the Include-file | Includes with variable Contents | Includes With Any Number Of Arguments | Efficient Work Over Many Files


Flexible Includes:
Common Code, but Individually Adaptable

GhostMenu: Ctrl-key + right-click (IE only)

Frequently you will have a code sequence that should be identical over a number of files, but with slight modifications individually. Flexible Includes are a good solution to that.

Recently Shelley Lowery (http://www.web-source.net) suggested a methode for doing "Includes" in HTML, similar to  #include  in some higher programming languages (e.g. C++). That's quite useful if you have a code sequence occurring over a number of files; in all files it should be identical; yet it should be possible to implement code changes in one file only, all the other files should get it automatically. Typical examples of such code sequences are headers, footers, navigation bars, etc.

However, just a navigation bar is an instance that requires some more flexibility - at least if you want to do it professionally. In a former article (Make Navigation as easy as possible!) I told you: "The Navigation Bar should tell the visitors where they are". Consequently, it should be possible to call the Include with a parameter determining which of its versions should be implemented.

Code To Be Included

You can do that based on the same principle as used for static Includes, just apply it one step further:

1. The code to be included should not only be modified by bracketing it in

document.writeln(' … ')');

    ( … being the html-code to be included).

2. Additionally, all the modified code lines should be bracketed as follows:

function Include (index)
{
   writeln(' … ')');
         :
}

    thus, formally making it an (external) Javascript function.

3. Those code lines that should behave differently, depending on the index , should be coded conditionally:

if (index == … ) document.writeln(' … ')');

4. Finally, this Include-file should be stored with an extension  js , say  Include.js  .

next    top

Declaring the Include-file

Formally the Include-file is nothing but an external javascript. So, it should be declared as usual at the end of  <HEAD> … </HEAD>  by a code line like the following:

<SCRIPT language="JavaScript" src="Include.js"></SCRIPT>

previous    next    top

Calling the Include-file

Remember, the function in the Include-file was called Include (index). Hence, it can be called at the place where you want to have the code included, simply by:

<SCRIPT>Include(1);</SCRIPT>

In the next file you want it included with some other modifications. So, there you call the Include-file by

<SCRIPT>Include(2);</SCRIPT>

And so on, over all the files for which you developed your Include-file.

previous    next    top

Includes with variable Contents

You can use this technique also for variable contents to be included. Take, for example, this article. The footer is looking as if it were "hard-coded" (= written right into the source code), doesn't it? But in source code it was just one line:

<SCRIPT>ArticleFooter ("web site design, Includes, flexible", 462)</SCRIPT>

In the  <HEAD> … </HEAD>  part of this htm-file the respective function was declared by

<SCRIPT language="JavaScript" src="Includes.js"></SCRIPT>

The keywords and the wordcount are different in each article. Therefore, in file  Includes.js  the salient lines are coded as


function ArticleFooter (keywords, wordcount)
{
	:   
  document.writeln('<TR><TD WIDTH="15%" VALIGN="top">Keywords: </TD>');
  document.writeln('<TD WIDTH="85%">' + keywords + '</TD></TR>');
  document.writeln('<TR><TD WIDTH="15%">Word count: </TD>');
  document.writeln('<TD WIDTH="85%">' + wordcount + '</TD></TR>');
	:
}

A similar line (with the respective keywords and wordcount as parameters) is in all other article-files. So, when I need to modify the footer text, I just have to revise it once, in file  Includes.js . In each article the revised text will be included automatically.

previous    next    top

Includes With Any Number Of Arguments

An include can not only have variable contents - the contents can also be made up of a variable number of items (which in turn can have variable contents).

Take for example the GhostMenu floating around on this page: In source code, it is a simple function call:

<SCRIPT>GhostMenu("item1", "item2", ... "item_n");</SCRIPT>

The JavaScript function  GhostMenu  is basically declared as in the following coding scheme:

function GhostMenu()
{
  var nArgs = GhostMenu.arguments.length;

  for (i=2;  i < nArgs;  i++)
     document.writeln ('<A HREF="#' + i + '">' + arguments[i] + '</A><BR>');
}

JavaScript is powerful enough that you can have functions with a variable number of arguments. You can treat them just as if they were any array elements (at least with IE 5.0). For counting them, use the property  length . To access them individually, it's enough to code their index in square brackets. In a loop, a number of links is written to the document. That's all it takes for a menu with a variable number of items. Quite simple - isn't it?

previous    next    top

Efficient Work Over Many Files

Using an Include-file - …

previous    top