DHTML Lab: Hierarchical Menus, III; Frames - JavaScript Style Sheets

Hierarchical Menus in Frames
JavaScript Style Sheets

JavaScript WHAT?

JavaScript Style Sheets. In the beginning, they were JASS (JavaScript Accessible Style Sheets), then JSSS or JSS (JavaScript Style Sheets), and now Netscape has taken to calling them Style Sheets with JavaScript Syntax. They exist in the Netscape DHTML documentation, a few books, and a couple of old third party articles on the web. The best introduction to JSS is by HTML veteran Chuck Musciano, at SunWorld. A concise, clear examination, this article was written a year ago (April 1997). Next to nothing has been written on the Web since then.

It is outside the scope of the present article to examine JSS in detail, and it is highly recommended that the above article be read at some point, even if you do not plan on using JSS.

You must know a few things to appreciate this page, however:

1. JSS can be used to define the same style properties as CSS. Style rules are enclosed in <STYLE&gt; tags with the TYPE= attribute set to "text/javascript":

   <STYLE TYPE="text/javascript">
   .
   JSS declarations
   .
   </STYLE>

2. Style properties are assigned values using Javascript syntax, exactly like the more well known style object in Explorer:

   color = "red";
   textAlign = "right";
   borderWidth = 2;

   Variables defined in a script previously may be substituted for the literal values:

   color = colorVariable;
   textAlign = alignVariable;
   borderWidth = borderWidthVariable;

3. Style properties can only be set before document display. This is the reason JSS has been little used. JSS are, however, an excellent way to define style based on JavaScript parameter variables.

4. The style selectors (tags, classes, IDs, etc.) follow a different standard than CSS. For example to define all H2 tags as blue, and left aligned, JSS would use the following rules:

   document.tags.H2.color = "blue";
   document.tags.H2.textAlign = "left"; 
   or
   tags.H2.color = "blue";
   tags.H2.textAlign = "left";

5. The JavaScript with operator can be used to combine style property assignments:

   with (document.tags.H2) {
       color = "blue";
       textAlign = "left";
   }

6. Classes are defined with this syntax:

   document.classes.blueLeft.all.color = "blue";
   document.classes.blueLeft.all.textAlign = "left";

   This corresponds to the CSS:

   .blueLeft {
       color: blue;
       text-align: left;
   }

   Classes specific to a tag use this syntax:

   document.classes.blueLeft.H2 = "blue";
   document.classes.blueLeft.H2 = "left";

   The equivalent CSS is:

   H2.blueLeft {
       color: blue;
       text-align: left;
   }

7. Since JSS belong to the document object, any object with a document property/object can have a style created dynamically. These include windows, frames, and layers (positioned elements).

That's all we need to know for our technique.

Styling our menu item

As you probably recall, in our non-frames menu script, we dynamically created a cross-browser CSS style sheet that contained a rule for a class called items. In Navigator, this class was assigned to a dummy-like SPAN element, which was the only element contained in the menu item positioned element.

The structure of our menu item elements remains the same in this version. We need only to create an items class from the navigation frame that will apply to all SPAN elements in the main frame. The JSS syntax is:

<STYLE TYPE='text/javascript'>
with (parent.frames.main.document.classes.items.SPAN) {
    width = menuWidth;
    color = fntCol;
    fontSize = fntSiz;
    fontWeight = fntWgh;
    fontStyle = fntSty;
    fontFamily = fntFam;
    borderWidth = borWid;
    borderColor = borCol;
    borderStyle = borSty;
    lineHeight = linHgt;
}
</STYLE>

We need to create this class every time our main frame is loaded. Our problem is that we cannot document.write() the JSS to any of the frames without erasing their content. The solution is to create a positioned element on-the-fly each time a page is loaded and place the JSS in the positioned element.

For this, we use our trusty new Layer() constructor, in the makeClass() function:

function makeClass() {
    styLayer = new Layer(400);
    styleStr = "<STYLE TYPE='text/javascript'>"
    + "with (parent.frames.main.document.classes.items.SPAN) {"
    + "width=\"" + menuWidth + "\";"
    + "color=\""+ fntCol + "\";"
    + "fontSize=\""+ fntSiz + "\";"
    + "fontWeight=\""+ fntWgh + "\";"
    + "fontStyle=\""+ fntSty + "\";"
    + "fontFamily=\""+ fntFam + "\";"
    + "borderWidth=\"" + borWid + "\";"
    + "borderColor=\"" + borCol + "\";"
    + "borderStyle=\"" + borSty + "\";"
    + "lineHeight=\"" + linHgt + "\";"
    + "}"
    + "</STYLE>";
 
    styLayer.document.write(styleStr);
    styLayer.document.close();
}

Since new Layer() requires a width argument, an integer must be specified. Any integer will do, as the positioned element has no HTML to wrap.

Now, when startIt() is called to begin our routine, it calls makeClass(), assuring that the items class will be available to all SPAN elements in the main frame. With this achieved, startIt() calls makeTop(), to create the menus.

The remainder of our technique is elementary. Follow along to refresh your memory on the basics of the technique and for the small frame-specific modifications.