Setting up your Framesets

Defining the Frames

The first thing you will want to do is set up your frames. We thought about automating this based on some parameters that you assigned appropriate values to. However we decided that it would just serve to unnecessarily complicate the code and ultimately make it less flexible. So, you will need to know about the <FRAMESET> and <FRAME> tags. If you are happy with the frame layout used on this site (at least for now) then you can skip this section.

Near the end of the index.htm file, you will find a section of code that looks like this:

if (floatingMode) {
    self.document.writeln('<frameset cols="100%" rows="*,48" onUnload="unloadFloating();" onResize="defaultResizeHandler();">');
    self.document.writeln('<frame name="menu" src="menu.htm" scrolling="auto" marginwidth="1" marginheight="1" APPLICATION="yes">');
    self.document.writeln('<frame name="menuCntrl" src="menucntrl.htm" scrolling="no" marginwidth="0" marginheight="0" APPLICATION="yes">');
    self.document.writeln('</frameset>');
} else {
    self.document.writeln('<frameset cols="100%" rows="70,*" onResize="defaultResizeHandler();">');
    self.document.writeln('<frame name="title" src="title.htm" scrolling="no" noresize marginwidth="0" marginheight="0" APPLICATION="yes">');
    self.document.writeln('<frameset cols="230,*" rows="100%">');
    self.document.writeln('<frameset cols="100%" rows="*,48">');
    self.document.writeln('<frame name="menu" src="menu.htm" scrolling="auto" marginwidth="1" marginheight="1" APPLICATION="yes">');
    self.document.writeln('<frame name="menuCntrl" src="menucntrl.htm" scrolling="no" marginwidth="0" marginheight="0" APPLICATION="yes">');
    self.document.writeln('</frameset>');
    self.document.writeln('<frame name="text" src="' + thePage + '" scrolling="auto" marginwidth="5" marginheight="5" APPLICATION="yes">');
    self.document.writeln('</frameset>');
    self.document.writeln('</frameset>');
}

This is all done in JavaScript, using the document.writeln method, so that Joust has control over the contents of the frames. The HTML that is actually created by this code is shown in bold. As you can see, there are two possible framesets created depending on the current mode. Floating Mode is discussed in more detail later. For now we will concentrate on the frameset created in "normal" mode (the "else" section).

The outside frameset (shown in green) defines the title frame and is optional. The menuCntrl frame is also optional and can be removed by deleting the blue lines. If you remove the outside (green) frameset, you should copy the onResize="defaultResizeHandler();" into the next FRAMESET tag. Feel free to change the sizes, borders and margins of these frames to your liking, but don't change the frame names.

Note: If you specify marginheight and marginwidth parameters in a frame, make sure you put the same parameters into the BODY tag of the corresponding document (otherwise Netscape 3 & 4 has a tendency to do unnecessary reloads). Also, do not set marginheight and marginwidth to "0" in the menu frame (as Netscape 4 has a tendency to not draw the scroll bar properly).

Setting the Default Page

A little above the frameset stuff, you will see the following line of code:

var thePage = pageFromSearch('home.htm');

The page name inside the quotation marks is the default page that will be loaded in the text frame when someone first arrives at your site. If necessary, you should change this to the name of your default page.

Supporting Older Browsers

At the bottom of index.htm, you will find a <NOSCRIPT> section. This will be displayed on any browser that does not support frames or JavaScript or is having problems. You should put something appropriate in here.

Changing the Frameset Structure

If you want to change the structure of the Frameset or the names of any of the Frames, you will need to tell Joust what the new names are. You do this by modifying four properties in the initialise function:

theMenu.container = "menu";
theMenu.reverseRef = "parent";
theMenu.contentFrame = "text";
theMenu.defaultTarget = "text";

The first line tells Joust how to get from index.htm to menu.htm. The second line tells Joust how get back from menu.htm to index.htm. The third line tells Joust how to get from index.htm (or index2.htm in Floating mode) to the frame containing the content. The fourth line is the default "target" property to use for new menu entries (see the page on Defining the Menu for more on this). The first 3 (container, reverseRef and contentFrame), must be valid JavaScript references. The fourth (defaultTarget) is used to specify the TARGET attribute of the links that make up the menu.

In addition, you will need to tell the menu.htm page how to find the rest of Joust in index.htm. This is done with the following line near the top of menu.htm:

var theMenuRef = "parent.theMenu";

You will need to change this to a valid JavaScript reference back to the menu object in index.htm.

Note: The default framesets are designed so that the above references are correct in both normal and floating modes. If you change the frameset structures this may no longer be true. In this case you will need to include some conditional logic to set the references according to the current mode.

The Frames

The Menu Frame

This frame is where the menu is actually displayed. The file menu.htm is loaded into this frame. You can modify menu.htm to customise the look of the menu frame, but you must be careful to make your changes in the right places. The section on Menu Appearance gives details of how to do this.

The Title Frame

The title frame is optional in "normal" mode. It can be useful to make up for the fact that it is not possible to change the title in the title bar of the browser window. A simple way to change the title when a new page is loaded is to include the following line of code in each page:

parent.title.location.href = 'titlepage.htm';

The MenuCntrl Frame

The menucntrl frame provides a place for you to put some buttons or links that you want to be always visible. The menucntrl.htm file provided contains an image map with a number of options.

If you choose to use this as provided, you will need to change the 'Home Page' and 'Help' links to point to your Home and Help pages.

Feel free to change the image map and the options available to suit your needs. Note that if you change the structure of your framesets, you may need to update the references in the imagemap accordingly.

The Joust Outliner