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 expressions as HTML attribute values:
&{nnn};

NOTE:
THIS IS AN OBSOLETE TECHNIQUE:
IT DOES NOT WORK AFTER
Netscape Navigator 4
OR ANY
MS Internet Explorer

This approach, which looks great but that, unfortunately, does not really work in the real world. It uses JavaScript to create a style attribute that includes left and right margins that are one-half the difference between 600 and the screen width (or browser window width: take your pick) -- so far, so good: just like other methods demonstrated -- and then sets that as the value of the style attribute of the <p> element using a JavaScript variable as an HTML attribute value (i.e., <p style="&{padtext};">) -- which is where it all goes to pieces. This does not work under Internet Explorer, never having made its way into JScript, perhaps because the attribute value usage was developed by Netscape in NS 3: going with the flow, it no longer works in NS 6, either. So this is not a feasible technique to use (but if you have it available, try this under NS4 just to see that it worked).


JavaScript as HTML Variables

Header Script

<!-- Set 600 pixels as percentage of screen width -->
<script type="text/javascript">
<!-- 
// <![CDATA[
  var column = new Object() ;
  column.text=100*(600/screen.width);
  column.pad = (100-column.text)/2 ; 
  text = column.text ; 
  pad = column.pad ; 
// ]]> -->
</script>

Using an object reference

<table align="center" border="1" width="100%">
  <caption>Using an object reference</caption>
  <tr>
    <td width="&{column.pad};%"> </td>
<td width="&{column.text};">
blah blah blah . . . </td>
    <td width="&{column.pad};%"> </td>
  </tr>
</table>
Using an object reference
(center cell is 600 pixels wide)
  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 blah blah blah blah blah blah blah blah blah blah blah blah  



Substitution of a variable for the object reference

<table align="center" border="1" width="100%">
  <caption>Substitution of a variable for the object reference</caption>
  <tr>
    <td width="&{pad};%"> </td>
<td width="&{text};">
blah blah blah . . . </td>
    <td width="&{pad};%"> </td>
  </tr>
</table>
Substitution of a variable for the object reference
(center cell is 600 pixels wide)
  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 blah blah blah blah blah blah blah blah blah blah blah blah  



Non-JavaScript Browsers

One note on tables for non-JavaScript browsers:
including alternate "width=" values
(it doesn't work)

TESTED:

<td width="50%" width="&{column.text};">

The browser read the first (hard-coded) width, ignoring the second (variable-coded) width, even when javascript was enabled.

TESTED:

<td width="&{column.text};" width="50%">

The browser read the first (variable-coded) width, ignoring the second (hard-coded) width, even when javascript was disabled.

CONCLUSION

The browser always reads the first width, ignoring the second
AND
the page validates as an error with the second "width" specification.


CSS: A Note on Validation

This page validates as XHTML, as indicated by the tag below; however, there is a problem validating the CSS. The CSS validator (as it operates as of the publication date of this page) fails an intitial XHTML scan and never gets to the CSS validation; instead, it returns an error messge that the page needs to be validated as XHTML before it can be validated as CSS: o.k., but it just did validate as XHTML! The problem is the format of the JavaScript/HTML variable substitution. The XTHML validator sees and recognizes the "&" as a special symbol: it sees an unfamiliar argument but passes it anyway (apparently it recognizes the argumeent as an argument, albiet an unfamiliar one). The CSS validator sees and recognizes the "&" as a special symbol: it sees an unfamiliar argument, assumes an error in the XHTML code, and stops the validation process before proceeding to the CSS validation.



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