[WEB4LIB] RE: HTML Referring?

Wed Oct 23 22:02:04 EDT 2002

Revisiting...

> 6. Client Side Includes (with Java[EMCA]Script)

A small, simple, illustrative sample to clarify:

 HTML Source
 -----------------------
 <html>

 <head>
    <!-- simple sample to demonstrate javascript client-side includes
         ...please don't whine about non-CSS, etc....this was a
         five-minute sample...
    -->
 </head>

 <body>
 <!-- abuse a table for frame-like formatting purposes -->
    <table>
  <tr>
     <td colspan="2" bgcolor="#FF8888">
	<center>Topmost Page Header Here<center>
  </td>
  </tr>
  <tr>
     <td bgcolor="#88FF88">
        <script lang="javascript" src="sample.js"></script>
     </td>
     <td bgcolor="#8888FF">
 The rest of what goes in this sample page is filler to flesh out what
 might be expected in the main body part of a 3-frame layout.
     </td>
  </tr>
    </table>
 <body>

 </html>
 -----------------------
 JavaScript Source
 -----------------------
 //  I like to format the string construction process with a
 //  close-to-normal HTML look to the layout. Much of the time, I get 
 //  away with not having to escape special characters...occasionally,
 //  deep quote-nesting defeats this ideal. Note that the concatenate
 //  use of the + operator lets you use as many lines as needed in the
 //  course of defining the string and permits a single call to write().
 //  Remember that JavaScript doesn't give a hoot as to which kind of
 //  quotes (single or double) you elect to make inner or outer - as 
 //  long as you match opening and closing instances...since I use
 //  double-quotes by preference in the declaration of property values
 //  for HTML tags, I use single-quotes as the outer containment layer
 //  in scripts.

 navStr = ' <table>                                                 ' +
          '    <tr><td>Navigation Controls</td></tr>                ' +
          '    <tr><td><a href="link1">text for link1</a></td></tr> ' +
          '    <tr><td><a href="link2">text for link2</a></td></tr> ' +
          '    <tr><td><a href="link3">text for link3</a></td></tr> ' +
          '    <tr><td><a href="link4">text for link4</a></td></tr> ' +
          '    <tr><td><a href="link5">text for link5</a></td></tr> ' +
          ' </table>                                                '   

 document.write(navStr);
 -----------------------

Put the HTML source into one file (any_name.html will serve) and the
JavaScript into a file called sample.js. Open the *.html and voila! No
steep learning curves. Java servlets or PHP are better solutions, but
this works without much effort or access web application servers and can
be extended quite a long way with only very little imagination.

<geek>Richard</geek>