Faughnan Home | FP Web Starter | Contact Info | Glossaries and Links | Site Contents

JavaScript Presentation Framework:
Mini Slide-Show

• Introduction
• Usage and Demo
• Downloading
• How It Works
• Next Steps
• JavaScript/JScript/Browser Defects (Bugs)
• History

Introduction

I've made up a framework for doing presentations using JavaScript. The mini-application has been tested with Netscape 3.04 Win95, NS 4.05 Win95, and IE 4.01 Win95. It does not work with IE 3.x Win95.

This is a very simple applet, but getting anything to work with the usual incredibly buggy browsers is a challenge.

Usage and Demo

You can view a simple demo at this URL (see end for a complex demo):

http://www.faughnan.com/slides/fmain.html.

For a more complex demo: Internet Tutorial, NS3

Constructing your slide show

1. Create or gather the individual pages that will make up your presentation. Doing this by hand is extremely tedious and inefficient. I use FrontPage 97 to create my "slide" pages and to drag and drop URLs onto a "slide list" page. (My comments on FP97.) Visit the Introduction to the Internet tutorial for examples of slide templates. I don't yet use style sheets for my slides, but that's high on my to do list.
2. Create your list of URLs ("slides") that will make up your presentation. This list must be in a single page called slidelist.html. View and edit the included slidelist.html to see the structure of this page. Note the <base target="displayframe"> statement -- that's used in the alternative frames based view of the presentation.
3. Have start.hml, controller.html and the control images present in the same directory as your slidelist file. (You can, of course, revise path names. JavaScript security will not allow the slidelist.html file to be located in a different domain, however.

Showing slides

• Use start.html to begin. You can rename this whatever you like.
• You will get a window including directions similar to these. Click on the start button. You can close this window if you wish, it servers no further purpose.
• Rearrange the controller and display windows as you like. I put the long controller window on the far right side of my screen. Due to a security limit in JavaScript 1.1, the window cannot be made any narrower.
• Click on the right arrow to advance, the left arrow to reverse.
• The "up" arrow causes the "current" slide to be displayed. If you traverse links from within the display window, this brings you back to the current slide.
• If the display window crashes or is accidentally closed, clicking on any of the buttons will bring it back with the appropriate slide displayed.
• The select box lists the current slide, selecting a slide here displays the specified slide and changes the "current slide" number.

Downloading

To download the files click on each of the following in turn and save it to your disk:

• start.html: creates a narrow window and loads controller.html into that window.
• slidelist.html: this document is just a list of the links you want to traverse (the slides). It's normally hidden from view. The sequence of the links determines the sequence of the "slides".
• controller.html: all the work is done here.
• slides listed in the sample slidelist
  • Slide One
  • Slide Two
  • Slide Three
• TemplateSlide: A sample of what I use for my own slides.

You also need the control GIFs (please send me nicer ones if you make any):

go_current.gif	go_next.gif	go_prev.gif

How It Works

For now, check source code.

Problems

If you do a refresh on the controller, you lose all the variables and have to start over. This is a basic JavaScript problem. Might be able to work around this by storing state information in a cookie.

Next Steps

Please, if you have time to do these things, please do them and email me the results of your work. Thanks!

1. Fix problems with attempting to access the dynamic html component of controller displayFrame before it is completely loaded. I work around this at the moment but I'd like to find a generic solution for this very common problem.
2. Try to get rid of frames use in controller altogether.
3. Capture the enter and/or arrow keys for browsers that support this facility.
4. create a configuration file that has all the configuration items in one place (has to be a .js or .html file). The configuration file could be the only file that changes. Might have its own window.
5. Figure out a way to hande paths so one controller can support all presentations across my web site. The start page should open the controller window (at most) and nothing more. Maybe dynamically generate a <base> tag?
   • current plan
     • start stub opens controller window and passes URL for slidelist directory, presumed to be same as start stub, to controller.
     • controller checks for slidelist.html and about.html. If slidelist missing, exit with error message. If about.html present then save URL.
     • controller opens display window while closing window for the start stub
     • controller writes html into display window including base tag and a frameset tag with an onload handler that invokes the controller's initialization functions (src points to slidelist. See if URL array now reflects effect of base tag. Base URL is the folder of controller.) ALT: Use unique transient window for slidelist, see if could use body unload handler and location.document.href rather than frameset
     • controller creates controls, includes link to about.html. If click opens window for about.html that can hold about 4-5 URLs and presentation info.
   • can we set an appropriate <base> tag for the controller or for the slidelist? how does changing slidelist base tag alter urls read into controller?
   • array contents are interpreted using controller's base?
   • beware domain problem -- first page loaded into a browser sets the domain in NS 3
6. Change how the slidelist is processed so multiple slidelists could be dropped into a "meta-slidelist" page and the final slidelist would be built by processing these modular slidelists. Preferably implement by use of meta-tag in header of the meta-slidelist.
7. Add a 'reference links' page that, if present, will produce links on the RHS of the controller window. Better, if a special links page is found in the same directory as slidelist, a button appears on controller that will open that page in its own window.
8. Better buttons!
9. Currently I cannot use IE 3 because I cannot get IE 3 to change the location of a remote page. Still trying to track down if there is a work around.
10. create standard links within controller that can be dynamically modified (eg. glossary, exercises, presentation home, etc.)
11. try closing the start window from the constructed controller window during ini function execution (less likely to crash the browser).
12. Use Cookies to store state information, instead of storing it in the window.
    • Cookie initialization is done by startup routine that's configured for each presentation
    • initialize cookie on startup with presentation ID
    • specify cookie lifespan of 1 day
    • store URL of slidelist, exercises, etc.
    • set 'path' for Cookie as root for my website

History

• Version 1: This version used a frameset to contain the dispayed slide. The frameset included a hidden frame for capturing the enter key, a hidden frame that held the slidelist, and a bottom frame with slide controls. Many versions and point releases of Netscape and IE had unpredictable and intermittent problems with the framesets. Crashes were all too common.

JavaScript/JScript/Browser Defects (Bugs)

A partial list of things that should work but don't work with the specified browser version. See also the WebCoder Features and Bugs page.

1. If the start window closes itself the browser often crashes.
2. In an early version I used a hidden form to capture the enter key, so one could advance by hitting enter. This failed very unpredictably on many browsers and I had to remove this handy feature.
3. NS 3 has erratic problems with attempting to access a page element before the page is closed.