Would you like to put presentation slides on the web the same day you deliver the presentation? Would you like to give a presentation with integrated web technology demos without switching back and forth between the browser and a proprietary page turner? Would you like to get your message out to all potential customers regardless of which browser, platform, or office suite they use? Would you like to let all your customers download, view, edit, reuse, and redistribute a presentation regardless of which platform they use? Netscape's free cross-browser Dynamic HTML presentation template makes this all possible.

The presentations for Netscape's Developer Conference (DevCon) were authored in HTML and viewed using a simple presentation template which was developed using JavaScript, style sheets, and Dynamic HTML. This TechNote explains the techniques used in designing the presentation template. The presentation template itself is available as a ZIP file for free downloading and distribution and includes a read_me.htm file which explains how to use it. The presentation template is an example of crossware, software which is developed using platform-independent technologies like JavaScript and HTML and can be used on all the platforms in use today including Windows 3.1, Windows 95/NT, PowerMac, and UNIX. As a cross-browser Dynamic HTML application, the presentation template is fully functional in both Netscape Navigator 4.0 and Internet Explorer 4.0. It is also backward-compatible with Netscape Navigator 3 and can display presentations with gracefully degraded default HTML formatting in that version of the browser.

Netscape benefited greatly from authoring and distributing the DevCon presentations using this template. Presenters were free to author on the platform of their choice using the HTML editing software of their choice. Because of the seamless cross-platform compatibility of the HTML file format and the JavaScript language, presentations which had been authored on Windows 95, Windows NT, PowerMac, and various UNIX platforms were later displayed on stage using Windows 95 and Sun Solaris UNIX. Because all of the presentations were authored in an open standard format, they could be made available on the World Wide Web to customers on all platforms immediately after DevCon ended. Because the format of the presentations was defined by external style sheet files instead of by hardcoded tags in each HTML page, it was easy to revise the format of all the presentations, even at the last minute, and it was easy to keep a consistent look and feel across all of the presentations. Those presenters who did technical demonstrations of HTML, JavaScript, and Java were able to embed the demos within the presentation pages themselves, eliminating the need to flip back and forth between proprietary page-turner software for slides and the browser for demonstrations. And it has been easy since DevCon for employees throughout Netscape to reuse the presentations on their own machines. The "speaker notes" feature makes it easy for presentation authors to embed hidden explanatory text in the HTML pages to help others who must deliver the same presentation, and the "tutorial mode" feature makes it possible to turn presentations into self-guided online tutorials with minimal additional effort. Since DevCon, the template has been further enhanced to provide full support for Internet Explorer 4.0 and to degrade gracefully on Navigator 3.

Netscape is providing this TechNote and the enhanced version of the DevCon template to make it easy for customers to use the template themselves and to customize it as they wish. This TechNote assumes the reader is familiar with JavaScript, Cascading Style Sheets, level 1 (CSS1), Positioning HTML Elements with Cascading Style Sheets (CSSP), and Netscape's Document Object Model, which makes the formatting and positioning properties of style sheets accessible from JavaScript. (If you are not familiar with these technologies, first go to Netscape's Dynamic HTML Presentations Page and click through Netscape's Visual Tutorials on CSS1, CSSP, and Accessing Style Sheet Properties from JavaScript via the Document Object Model.) If you aren't familiar with the differences between the JavaScript Document Object Model of Navigator 4.0 and of Internet Explorer 4.0, read Danny Goodman's View Source article CSS Positioning -- The Dynamic HTML Neutral Zone.

The body of this document may be browsed and printed with any browser. The demonstrations and the presentation template itself require Navigator 4.x or later or Internet Explorer 4.0 for fully formatted viewing, but they can be viewed as HTML text with default formatting in Navigator 3.x.

Netscape has twice released enhanced versions of this presentation template and TechNote, Version 2.0 on October 3, 1997, and Version 3.0 on June 5, 1998. All of the information in this TechNote has been revised for Version 3.0 of the presentation template. Version 3.0's only new feature is full support for Internet Explorer 4.0. The major new features of Version 2.0 were the ability to view text of presentations in Navigator 3.x, keyboard navigation (when using Navigator 4.x), a new tutorial mode for making visual tutorials with accompanying explanatory text, the ability to scale presentation font size up or down by any amount, and the alternative frameset documents index2.htm and notes2.htm, which include graphical navigation arrows. For full information about the differences between Version 1.0, Version 2.0, and Version 3.0, see What's New in Version 2.0 and What's New in Version 3.0 in the template's read_me.htm file.

Before reading on, please take a moment to try out the presentation template by using it to view a sample presentation. When viewing the sample presentation:

• resize the presentation window to full screen mode so you can use the entire screen for viewing.
• hide the tool bar, the location bar, and the personal bar so you can use the entire window for viewing.
• to go forward to the next page, click on the upper-right edge of the page.
• to go back to the previous page, click on the upper-left edge of the page.

To familiarize yourself with the template and the way it automatically formats HTML pages, please click these buttons using Netscape Navigator 4.x or Internet Explorer 4.0. These buttons will automatically open new full-screen windows to display the presentation; when you close those windows, this page will still be open.

Alternatively, you can open the demo windows by using these ordinary HTML links. Be sure to full-screen the window and hide the tool bars:

• view a sample presentation.
• view the same presentation in speaker notes mode (explained below).
• view the same presentation in tutorial mode (explained below).

If you want more detailed information about the presentation's features, read the read_me.htm file, which includes full instructions for viewing and authoring presentations.

The heart of the presentation template is the JavaScript file style.js (in the presentation template's main directory) which detects the user's display size and scales the HTML text's font size up or down to match it. By scaling the size of the text to match the screen's width in pixels, we ensure that the same amount of screen area is used by the page on any monitor. A "full page of HTML" will look like a "full page" whether it is being viewed on a screen running at 640x480, 800x600, 1600x1200, or some other pixel resolution. This simple trick reliably preserves line and page breaks at different screen resolutions and achieves a visual effect one could call "resolution-independent HTML formatting."

style.js also defines some other text styles that are used throughout the presentation, such as the red-on-yellow agenda highlighting text style "agendahilite," the right-aligned footnote text style "footnote," and the boldfacing of all PRE elements (to make source code samples more easily visible at a distance).

Currently, the presentation template defines most formatting settings in the JavaScript file style.js. A second style sheet file style.css is provided for the convenience of users who would like to define additional formatting settings using CSS1 syntax. All HTML pages in the sample presentation and the template directories link in both of these files; their settings cascade together. style.js is loaded after style.css, so its settings take priority in the event of a conflict. This enables the JavaScript in style.js to make dynamic modifications at display time to the static settings in style.css.

Two other frameset documents, index2.htm and notes2.htm, differ from index.htm and notes.htm only in that they provide clickable left-right graphical arrows to page back and page forward.

CSS1 settings, while powerful, have one fundamental limitation. CSS1 is designed to be a static file formatting language, not a programming or scripting language, so it is unable to do things like check the current display size and conditionally set font sizes to developer-defined values in response. For this kind of application, a scripting language like JavaScript is required. JavaScript 1.2 makes all CSS1 settings accessible from JavaScript via the Document Object Model (DOM), which exposes these settings as a set of document object properties. For more information about the Document Object Model, see the JavaScript reference manual.

The following sections explain various features of the presentation template as examples of the effects which can be achieved by combining static CSS1 formatting and CSSP positioning with intelligent JavaScript control.

Detecting the Browser Vendor and Version (style.js)

Version 3.0 of the presentation supports Navigator 4.0 and Internet Explorer 4.0, but there are numerous differences between the implementations of JavaScript 1.2 and the Document Object Model in Navigator 4.0 and Internet Explorer 4.0. Moreover, the presentation template provides backward compatibility for Navigator 3.0, which lacks support for Dynamic HTML and the new features of JavaScript 1.2.

To provide support for all three browsers, the presentation template detects the vendor and version number of the user's browser using JavaScript browser-detect code copied from The Ultimate JavaScript Client Sniffer:

Determining the Screen Width in Pixels (style.js)

style.js first checks the current screen width in pixels by getting the width property of the screen object, which exists in both Navigator 4.0's and Internet Explorer 4.0's implementations of JavaScript 1.2:

Setting Font Sizes by Element Name and by Class From JavaScript (style.js)

The particular font size values for each HTML element in these function calls were selected at 800x600 resolution by a graphic artist for ease of viewing by an audience and then adjusted arithmetically to scale downward and upward for other screen resolutions.

Here is the code that checks the current browser and then evaluates the appropriate code to set the sizes of HTML elements:

Storing Element Font Size Settings for Later Use (style.js)

Scaling the Text in Speaker Notes Mode and Tutorial Mode (style.js)

In addition to scaling the standard font sizes to match different screen resolutions, the template must adjust the standard font sizes downward to provide a slightly smaller font size in tutorial mode and an even smaller font size in speaker notes mode. In these modes, more text is generally used per page than in standard presentation mode, and the content is being read by an single individual in front of a display rather than by a presenter on screen in front of a large audience. The smaller font sizes are used to reduce the need to scroll down to read text on each page.

To scale the standard font sizes downward, style.js first defines global variables which define whether the presentation is running in speaker notes mode or tutorial mode. There are three versions of style.js for presentation mode, speaker notes mode, and tutorial mode. Each version sets the global variables appropriately. Here is the source code from the version of style.js for presentation mode:

Hiding the Speaker Notes Text and Tutorial Text by Setting an Element's Visibility with CSSP (style.css, s_agenda.htm)

Presentation pages usually include normal text (shown at all times), speaker notes text (which are notes for the use of the presenter while rehearsing the presentation), and tutorial text (displayed when the presentation is being used online as a self-guided tutorial). The speaker notes text and tutorial text must be hidden when the presentation is being displayed in front of an audience. For an example of the use of speaker notes text, compare page 3 (the "Agenda" page) of the sample presentation when viewed in normal mode and speaker notes mode.

HTML 3.2 does not include support for true conditional text, but it can be simulated in Dynamic HTML through the ability to hide and show HTML elements and their contents. The presentation template demonstrates this ability.

In presentation mode, we have no need to explicitly control the positioning of the DIV elements on the screen; we only need to hide these elements, not reposition them. Since the speaker notes text and tutorial text will be hidden, we allow them to be shown on the screen where they would normally be placed by the browser's default positioning rules. To do this, we specify that they are positioned HTML elements by setting each element's position property (one to absolute, the other to relative); this is necessary to expose the elements for positioning and hiding within the Navigator 4.0 Document Object Model. Although we give the elements unique identifiers and declare them to be positioned (which together exposes the elements for positioning and hiding within the Navigator 4.0 Document Object Model), we do not specify what the elements' actual positions are. Therefore, the elements are displayed at their default positions within the default layout of the HTML page.

Displaying the Tutorial Text by Setting an Element's Visibility with CSSP (style.css)

Since we wish to display the now-visible tutorial text in its default position (directly below the always-visible presentation text), there is no need to reposition the tutorial text element, so we specify relative positioning with no offset.

Getting the JavaScript Objects for HTML Elements on Navigator 4.0 and Internet Explorer 4.0 (style.js)

In subsequent sections, this TechNote explains how the presentation template uses JavaScript to hide, show, and move HTML elements. Before you can hide, show, or move an HTML element, you must get the JavaScript object which represents that HTML element. Because Navigator 4.O and Internet Explorer 4.0 have a different Document Object Model, you must use different JavaScript code on Navigator 4.0 and Internet Explorer 4.0 to get the HTML element's JavaScript object. If you aren't familiar with the differences between the JavaScript Document Object Model of Navigator 4.0 and of Internet Explorer 4.0, read Danny Goodman's View Source article CSS Positioning -- The Dynamic HTML Neutral Zone.

Setting the CSSP Properties of HTML Element Objects (style.js)

Once you have gotten the JavaScript object for an HTML element, you can set the properties of that JavaScript object. Again, because of the differences between the Navigator 4.0 and Internet Explorer 4.0 Document Object Model, some of the property names differ, so you must use different JavaScript code to set a given property on Navigator 4.0 and Internet Explorer 4.0. When running in speaker notes mode, the presentation template needs to move and then show the HTML element that contains the speaker notes text. (This element is initially hidden.) To do that, the presentation template uses functions from the cross-browser Dynamic HTML API contained in the TechNote about Setting CSSP Properties From JavaScript on Both Browsers.

Positioning the Speaker Notes Text by Setting an Element's Position From JavaScript (style.js, style.css, s_agenda.htm)

When the presentation is being viewed in speaker notes mode, we need to display the hidden speaker notes text and reposition it on the page. In the HTML pages, the presentation text is at the top of the page, the tutorial text is below it, and the speaker notes text is at the bottom. As a result, if we hide the tutorial text and display the speaker notes text in their default positions, there will be a large blank space on the screen (the hidden tutorial text, which is not displayed but, in compliance with the CSSP specification, still takes up layout space) between the presentation text and the speaker notes text.

This source code can be explained as by the following if-then sequence.

If:

then:

if (speakerNotesMode) {
  if (is.nav4up) {
     document.contextual(document.ids.speakernotessection, document.tags.H1).textDecoration = "underline"
     document.contextual(document.ids.speakernotessection, document.tags.H1).marginTop = "1em"
     self.onload = moveSpeakerNotes;
  }
  else if (is.ie4up) {
     document.styleSheets[ieTargetStyleSheetID].addRule ("#speakernotessection H1", "text-decoration:underline");
     document.styleSheets[ieTargetStyleSheetID].addRule ("#speakernotessection H1", "margin-top:1em");
     top.frames["slide"].window.onload = moveSpeakerNotes;
  }
}

If we are in speaker notes mode, when the HTML file finishes loading, the onLoad event occurs, the function is called, and the HTML element with the speaker notes is moved upward on the page and made visible.

Formatting the Speaker Notes Text by Contextual Selection From JavaScript (style.js, s_agenda.htm)

Linking in External Style Sheet Files (s_color.htm)

All of the sample HTML pages (in the main presentation directory) and the template HTML pages (in the template and blanktmp subdirectories) link in the external style sheet files style.js (which, strictly speaking, is a JavaScript script that sets element styles using the Document Object Model) and style.css using this HTML markup:

In general, any style settings that may be reused and shared by multiple pages should be placed in an external style sheet file rather than within the HTML file. This approach achieves clean separation of formatting information and content, saves disk space on the server and download time for the user, and enables efficient long-term maintenance of style information in a single location.

Page-Specific Style Sheets (s_color.htm)

Some pages need to use font styles which differ from the presentation defaults. For example, sample HTML file s_color.htm uses a different background color (yellow), different text colors for H2 and H3 elements (red and blue), and different font sizes for P, H2, and H3 elements (medium). Such pages use their own internal styles sheets, defined inside <STYLE> and <SCRIPT> elements within the HTML file itself.

s_color.htm uses this inline CSS1 style sheet to set the background color and the text color for H2 and H3 elements:

Cascading Multiple Style Sheets to Format a Single HTML Page (s_color.htm)

s_color.htm demonstrates how settings defined in multiple style sheets can cascade together to control the format of a single HTML page according to the priority rules defined in the Cascading Style Sheets, level 1 specification. As explained in the previous section, Page-Specific Style Sheets, a total of four style sheets (two external and two inline) cascade together to determine the format of the HTML page.

Where rules of the same specificity defined in different style sheets for the same element and property conflict, the rule in the style sheet that appears later in the HTML file takes precedence. For example, the page's rule setting the size of H2 elements to medium overrides the style.js rule setting their size because the page's style sheet appears in s_color.htm later than the link to style.js. For more information about the cascading rules governing conflict resolution between different rules, see the Cascading Style Sheets, level 1 specification. Generally speaking, declarations for more specific groups of elements override declarations for more general groups of elements (for example, rules for the unique element with a particular ID override rules for elements of a given class, and rules for elements of a given class override rules for all elements of a given tag name), and declarations which appear later override declarations which appear earlier.

Navigator 4.0 and Internet Explorer 4.0 also have differences in their APIs for intercepting and handling events. For full details, read Danny Goodman's article JavaScript Apostle: Dueling Event Models -- A Cross-Platform Look in View Source. The following differences are relevant to the presentation template application:

Getting the Character Code of the Key Which Was Pressed (slide.js, basefile/navbar.js)

Here is the event handler function that is called on both Navigator 4.0 and Internet Explorer 4.0:

// KEYBOARD CONTROL IN Naviator 4.0

// support SPACE key codes (*not* RETURN because of Goto field!)
var nextKeys = new String("nN ")
var prevKeys = new String("pP")

function handleKeys(e) {
     var keyChar;
     if (is.nav4up) keyChar = String.fromCharCode(e.which);
     else if (is.ie4up) keyChar = String.fromCharCode(window.event.keyCode);
     if (prevKeys.indexOf(keyChar) != -1)
     {  prev_slide(); return false  }
     else if(nextKeys.indexOf(keyChar) != -1)
     {  next_slide(); return false  }
     else return true;
}

Capturing the Event (slide.js, basefile/navbar.js)

Because the presentation's content (defined by the HTML pages), format (defined by style.js and style.css), and page-turner frameset (defined by index.htm and notes.htm) are all independent of each other, it is easy to change one without disturbing the others. By editing the HTML pages, you can display different content in the same format and within the same frameset. By editing style.js and style.css, you can change the presentation's format but display the same content within the same frameset. Or, by changing index.htm and notes.htm (and the HTML pages basefile/prev.htm and basefile/next.htm which they link to) you can provide a different frameset to display the same content in the same format.

As an example, an alternative frameset is provided by the documents index2.htm and notes2.htm. This frameset features graphical arrows which can be clicked to page forward or backward. In the same way, developers can create other frameset documents to implement the user interface of their choice.

While taking full advantage of the power of Dynamic HTML in Navigator 4.x, it is best to ensure that pages and applications are also usable with earlier versions of the browser whenever possible, as earlier versions remain in use even after the newer version is released. Versions 2.0 and later of the presentation template also run without error under Navigator 3.x so that the unformatted text of presentations is still viewable in older versions of the browser. (The text cannot be shown formatted in Navigator 3.x because Navigator 3.x does not support Cascading Style Sheets, and it cannot be viewed at all in Navigator 2.x because Navigator 2.x does not support the SRC attribute of the SCRIPT tag.)

The name of the external JavaScript file had to be changed from style.jss to style.js because Navigator 3.x would display the content of the file style.jss in the center frame rather than the content of the HTML file. Changing the name of the linked JavaScript file eliminated this problem. To preseve backward compatibility with presentations authored using Version 1.0 of the template, the obsolete file style.jss is retained in the presentation directory.

Since the presentation template is implemented using JavaScript and HTML -- technologies that are platform-independent -- the ability to support multiple platforms is a benefit that comes almost completely for free. The presentation template was used unchanged at DevCon to author presentations on Windows 95, Windows NT, PowerMac, and various UNIX platforms. On stage, the presentations that had been authored on this variety of platforms were displayed using Windows 95 and Sun Solaris UNIX machines.

To ensure that any presentation authored on any platform can be viewed unchanged on any other platform, only minimal care need be taken to account for platform differences in file naming conventions. Windows 3.1 machines use 8.3 format filenames (eight character filenames followed by a three character extension), so all of the presentation template's files use filenames in 8.3 format. Likewise, when specifying pathname strings in JavaScript (for example, in the style.js file), the forward slash character is used; when this character occurs in a JavaScript pathname string, JavaScript automatically maps it to the appropriate platform-dependent character (backslash on the various Windows platforms, forward slash elsewhere).

Please refer to the following resources for further information:

• What's New in JavaScript 1.2
• Cascading Style Sheets, level 1
• Positioning HTML Elements with Cascading Style Sheets
• JavaScript Document Object Model
• DevEdge Online Dynamic HTML Presentations
• Visual Tutorial: Cascading Style Sheets, level 1 (also viewable as presentation or in speaker notes mode)
• Visual Tutorial: Positioning HTML Elements with Cascading Style Sheets (also viewable as presentation or in speaker notes mode)
• DevCon Presentations:
• Introduction to Dynamic HTML (viewing instructions)
• Cross-Browser Dynamic HTML
• Danny Goodman View Source article: CSS Positioning -- The Dynamic HTML Neutral Zone
• Danny Goodman View Source article: JavaScript Apostle: Dueling Event Models -- A Cross-Platform Look
• TechNote: Setting CSS1 Properties from JavaScript
• TechNote: Setting CSSP Properties From JavaScript on Both Browsers