Doc Steve
Web Coding Service

Fully Accessible Web Code, Custom Written by Hand
Specializing in html, xml, css, and U.S.§508

Web Programming Samples and References

[ Sample Pages Home ]

JavaScript Sample Pages

Additional Examples for Page Borders:
Table-Based Example Utilizing Default Option

Using a percentage to maintain a 600 pixel page width

A more robust approach to building tables: allowing non-JavaScript browsers to degrade gracefully

Combining the entire javascript formatting (the "Segment Two" and "Segment Three" from the previous page) in a table with default specifications allows for browsers that are not JavaScript capable (early browsers or ones with JavaScript disabled). The following is a simple example of doing this:

0001:
0011:
0012:
0013:
0014:
0015:
0016:
0017:
0018:
0019:
0020:
0021:
0022:
0023:
0024:
00xx:
00xx:
0031:
0032:
0033:
0034:
0035:
0036:
0037:
0038:
0039:
0040:
 
. . . 
</head><body><table width="100%" border="0"><tr>
  <td width="25%" bgcolor="#ffffcc"></td>
  <td width="50%" bgcolor="#ffffff">
<javascript type="text/javascript">
<!-- 
//<![CDATA[
// SEGMENT TWO
 document.write("\</td>\<td width=\"25%\">\</td>\</tr>\</table>")
 document.write("\<table width=\"100%\" border=\"0\">\<tr>")  
 document.write("\<td width=\"" + column_pad + "\">\</td>")
 document.write("\<td width=\"" + column_text + "\">")
//]]> -->
</javascript>
   blah
   blah
   blah
<javascript type="text/javascript">
// SEGMENT THREE
<!-- 
//<![CDATA[
 document.write("\</td>\<td width=\"" + column_pad + "\">")
 document.write("\</td>\</tr>\</table>")  
 document.write("\<table width=\"100%\">\<tr>\<td width=\"75%\">")
//]]> -->
</javascript>
</td><td width="25%">\</td>\</tr></table></body></html>

This creates a table (opened on line 0011 and closed on line 0040) that is closed without content if the JavaScript executes (line 0018).

If the JavaScript does not execute the content is formatted by this table, which uses a default set of width percentages (lines 0012 and 0013).

If the Javascript does execute, it opens a new table for formatting with computed percentages (lines 0019 to 0021). As its last step, after closing this table (lines 0035 and 0036), it opens a new table (line 0037) to correspond with the close table statements at the end of the document (line 0040).

Some interpreters read any open bracket as the termination of the script (i.e., as the open bracket of the </script> tag), but this has no affect on validation.

It has also been variously advised to escape the forward slash as well as the open bracket (although not done in this example, and it is not clear on which platorms that fails)

The page JS_Test_2B.html is a properly working example of this that validates to html 4.01. It can be examined for function by turning javascript on and off in the browser's preferences (e.g., in Netscape, Edit/Preferences/Advanced, Enable JavaScript). For the complete code, see JS_Test_2B.html.html and JS_Test_2B.js.html.


Document: http://
Revised:
TOP ]
HOME ]

Valid XHTML 1.0!  | Made with Cascading Style Sheets  | Level Triple-A conformance icon, W3C-WAI Web Content Accessibility Guidelines 1.0

Copyright © 2002 - 2004

Steve Sconfienza, Ph.D.

All Rights Reserved