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

Using JavaScript to Maintain Page Borders
Computing a Percentage for Page Width

Page Index
[ Skip Index ]
[ Introduction ] [ Using a Style ] [ Using a Table ] [ Non JavaScript-Enabled Browsers ] [ References ]

[ TOP ]

It is often desirable to attempt to manage the screen presentation on end-users machines. Often a standard page width is desired, often one of 600 pixels. Due to issues concerning accessibility, the Web Accessibility Initiative of the World Wide Web Consortium does not allow for specifying a specific pixel width, only a percentage of the page's width ("Use relative rather than absolute units in markup language attribute values and style sheet property values"). JavaScript may be used to compute a percentage from the pixel width of the end-user's machine, and then use this percent to format the page (the "em" and "px" are also relative units, the "em" -- an "em" space -- relative to the font of the element in use and the "px" -- pixel -- relative to the viewing device, although it is possible to run out of pixels based on the resolution of the display [see "Use relative rather than absolute units ..."]).

This may be done in several ways. In choosing a strategy, always use the simplest technique possible (e.g., set a style instead of building tables): the simpler the approach, the simpler disaster recovery should be (i.e., how to deal with non-scripting browsers).

[ TOP ]

Using a Style:
A Percentage With a Margin

The following JavaScript program reads the screen size and then converts that to a percentage of 600 pixels. It then creates a variable that can be used with a <style> tag to set a margin with padding to maintain the 600 pixel text space. The program always provides at least a 25 pixel border on each side (to preserve, for example, a line around the page), although that could easilly be eliminated for screen sizes under 600 pixels. The steps for this, including provisions for browsers without JavaScript enabled, are as follows:

<!-- include a default option for non-scripting browsers: 7% left/right margin (allow .5-em top/bottom) -->
<div style="margin:.5em 7%">

<!-- compute and write margins -->
<script type="text/javascript">
<!--
//<![CDATA[

  // define a function to check for and return data
  function inner_width() {
    if (document.body.clientWidth)
      return (document.body.clientWidth) ;              // Works in Mozilla 1.4 and IE 6.0 but not in NS 4.78
    else if (window.innerWidth)
      return (window.innerWidth) ;                      // Works in Mozilla 1.4 and NS 4.78 but not in IE 6.0
    else if (document.documentElement.clientWidth)
      return (document.documentElement.clientWidth) ;   // Generally resolves to zero, but odd browsers may populate it
    else
      return (0); }

  // compute margin: allow for at least two percent margin in all cases 
  // set desired content area width as constant (replace 600)
  mar = (((inner_width()-600)/2)/inner_width())* 100 
  if (mar < 2) { mar=2 } 

  // create left/right margin variable (allow .5-em margin top/bottom)
  abc = 'margin: .5em ' + mar + '%;color: #000000;font-family:serif;font-weight:bold;font-size:14pt'

  // write html -- first close the "non-script" element, then write the new formatting element
  document.write("\</div>\<div style=\"" + abc + "\"> ") 
//]]> -->
</script>

<p> BLAH BLAH BLAH ... </p>
<p> BLAH BLAH BLAH ... </p>

<script type="text/javascript">
<!--
//<![CDATA[
  // write the close tage and then open a tag to match "non-script" close tag
  document.write("\</div>\<div> ")
//]]> -->
</script>

<!-- close tag for non-script default -->
</div>

This produces the following text block:

BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH

Notes

Margin, Border, or Padding?
About setting a margin, border, or padding: the margin is outside the border, the padding is inside (see The CSS Box). In most cases it will not really matter, but combinations will have an effect (i.e., border & padding is fundamentally different from margin & border), and setting just a left/right border will not work on browsers of the NS 4 era.
This is based on the browser window width, not the entire screen width: to use screen width regardless of the size of the browser window width just use screen.width instead of the inner_width() function.

[ TOP ]

Using a Table:
A Percentage with a Table Element

A simple example

The following JavaScript program reads the browser window size and then converts that to a percentage. The program always provides at least a 1% border on each side (to preserve, for example, a line around the page), although that could easilly be eliminated for screen sizes under 600 pixels. The steps for this are as follows:

Insert segment "ONE" somewhere in the document ahead of segment TWO (generally in the header, between <head> and </head>).
Insert segment "TWO" as the very first thing after the <body> tag.
Insert segment "THREE" as the very last thing in the body, just before the </body></html> tags.

The problem here is that if JavaScript is not enabled on the browser, the page will simply fill the entire screen ( see below).

N.B., the text between the <script> tags in segments two and three must be on one line, regardless of how this page wraps them.

Segment One

<script type="text/javascript">
<!--
// SEGMENT ONE
//<![CDATA[
  var column = new Object() ;

  // Works in Mozilla 1.4 and NS 4.78 but not in IE 6.0
  column.width_var = window.innerWidth

  // Works in Mozilla 1.4 and IE 6.0 but not in NS 4.78
  if (column.width_var < 1 || column.width_var == undefined) {
    column.width_var = document.body.clientWidth }

  // Resolves to a zero in Mozilla 1.4, NS 4.78, & IE 6.0, but odd browsers may populate it
  if (column.width_var < 1 || column.width_var == undefined) {
    column.width_var = document.documentElement.clientWidth }
 
  // If all else fails, use the screen width
  if (column.width_var == undefined || column.width_var == 0) {
    column.width_var = screen.width}

  // Compute Text Area and Margin
  column.text=100*(600/screen.width);
  if (column.text > 98.0) {column.text = 98.0}
  column.pad=(100-column.text)/2 ;
//]]> -->
</script>

Segment Two

<script type="text/javascript">
<!--
// SEGMENT TWO
//<![CDATA[
  document.write("\<table border=\"1\"")
  document.write(" cellpadding=\"0\" cellspacing=\"0\" width=\"100%\"")
  document.writeln(" summary=\"Sample table using JavaScript\">")
  document.writeln("  \<tr>")
  document.write("    \<td width=\"" + column.pad + "%\">\</td>\<td width=\"" + column.text + "%\">")
  document.writeln("\<div style=\"color: #000000;font-family:serif;font-weight:bold;font-size:14pt\">")
//]]> -->
</script>

Content


<p> BLAH BLAH BLAH ... </p>
<p> BLAH BLAH BLAH ... </p>

Segment Three

<script type="text/javascript">
<!--
// SEGMENT THREE
//<![CDATA[
  document.write("\</div>\</td>\<td width=\"" + column.pad + "%\">\</td>\</tr>\</table>");
//]]> -->
</script>

This produces the following table:

Notes:

In practice, the table attribute "border" would probably always be set to "0" so as not to display the cell borders.
This is based on the browser window width, not the entire screen width: to use screen width regardless of the size of the browser window width just use that assignmnet alone.

[ TOP ]

Non JavaScript-Enabled Browsers: Allowing Pages to Degrade Gracefully

First and foremost, always consider the option of using a <noscript> element to put something in place of the JavaScript. However, certain combinations may not validate properly (e.g., having open elements that may not contain a <noscript> element or opening an element inside a <noscript> element that may not carry outside of the </noscript> tag). While a style example may incorporate a <noscript> option to accomodate non-scripting browsers, tables requres more esoteric handling in order not only to operate properly but also to validate, and <noscript> usually requires duplicating the entire content: e.g.,

<script type="text/javascript">
<!--
//<![CDATA[
  document.write("\<p style=\"margin:0em " + margin_variable + "\">")
//]]> -->
</script>
<noscript>
<p style="margin:0em 3em">
</noscript>
blah blah blah
</p>

does not validate (although most browsers paint this invalid code as intended, script on or off), so the entire text block (blah blah blah) would have to be repeated in a completely formated <noscript> block.

Another option, which avoids <noscript> element and its possible awkward usages, is to code a default action and then have the script close that action before proceeding with its own insertion, as done in the first example above, "Using a Style" (see Additional Examples for Page Borders: Table-Based Example Utilizing Default Option).

[ TOP ]