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

JavaScript Presentation Framework:
Mini Slide-Show


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

Downloading

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

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

go_current.gif go_next.gif go_prev.gif
go_current.gif (1187 bytes) go_next.gif (1467 bytes) go_prev.gif (1177 bytes)

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?
  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.

History

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.

item NS 3.04 NS 4.04 IE 3.x IE 4.01
window.close()   1    
capturing the enter key 2 2 2 2
dynamic HTML 3      

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.


Author: John G. Faughnan.  The views and opinions expressed in this page are strictly those of the page author. Pages are updated on an irregular schedule; suggestions/fixes are welcome but they may take weeks to months to be incorporated. I reserve copyright except where noted, if you want to repost or quote a page just ask. Anyone may freely link to anything on this site and print any page; no permission is needed for linking,  printing, or distributing printed copies.