Joust supports being used in a separate window. You can use this to provide floating and non-floating versions of the outline as this site does, or you can add a floating site map to any site.
Getting the outline to work correctly in a separate window is technically difficult. We have made it work but, as explained below, there are a number of factors you need to take into account.
First of all, let's look at the framesets defined in the files supplied. There are two framesets in floating mode. One is in the floating window that contains the Joust outline, the other is in the main window that will display your content.
index.htm is loaded into the floating window that contains the outline. It contains most of the Joust code and the code the draws the floating window's frameset. Near the bottom of index.htm you will find this code:
if (floatingMode) { self.document.writeln('<frameset cols="100%" rows="*,48" onUnload="unloadFloating();">'); self.document.writeln('<frame name="menu" src="menu.htm" scrolling="auto" marginwidth="1" marginheight="1">'); self.document.writeln('<frame name="menuCntrl" src="menucntrl.htm" scrolling="no" marginwidth="0" marginheight="0">'); self.document.writeln('</frameset>'); } else { self.document.writeln('<frameset cols="100%" rows="70,*">'); self.document.writeln('<frame name="title" src="title.htm" scrolling="no" noresize marginwidth="0" marginheight="0">'); 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">'); self.document.writeln('<frame name="menuCntrl" src="menucntrl.htm" scrolling="no" marginwidth="0" marginheight="0">'); self.document.writeln('</frameset>'); self.document.writeln('<frame name="text" src="' + thePage + '" scrolling="auto" marginwidth="5" marginheight="5">'); self.document.writeln('</frameset>'); self.document.writeln('</frameset>');> }
As described in "Defining the Frames", the first part of this "if" statement contains the frameset definition for floating mode.
In non-floating mode, the menuCntrl is optional. In floating mode it is not optional. This is because a frameset with one frame is not allowed. If you don't want a menuCntrl frame then you should make it a hidden frame like this:
if (floatingMode) { self.document.writeln('<frameset cols="100%" rows="100%,*" onUnload="unloadFloating();">'); self.document.writeln('<frame name="menu" src="menu.htm" scrolling="auto" marginwidth="1" marginheight="1">'); self.document.writeln('<frame name="menuCntrl" src="menucntrl.htm" scrolling="no" marginwidth="0" marginheight="0">'); self.document.writeln('</frameset>'); } else {
Note that some older browsers do not support hidden frames and will attempt to draw a 1 pixel high frame. You cannot prevent this but you may be able to minimise its effect by making sure menucntrl.htm has the same background colour as menu.htm and by removing the frame borders (if supported by the browser).
index2.htm is loaded into the "main window" in Floating Mode. It contains the following frameset definition:
self.document.writeln('<frameset cols="100%" rows="70,*" onUnload="closeMenu();">'); self.document.writeln('<frame name="title" src="title.htm" scrolling="no" noresize marginwidth="0" marginheight="0">'); self.document.writeln('<frame name="text" src="' + thePage + '" scrolling="auto" marginwidth="5" marginheight="5">'); self.document.writeln('</frameset>');
As with index.htm, you can change the borders, sizes, etc. of these to suit your liking. Unlike non-floating mode, the "title" frame is not optional for the same reasons described above. Again, you can make it invisible like this:
self.document.writeln('<frameset cols="100%" rows="100%,*" onUnload="closeMenu();">'); self.document.writeln('<frame name="text" src="' + thePage + '" scrolling="auto" marginwidth="5" marginheight="5">'); self.document.writeln('<frame name="title" src="title.htm" scrolling="no" noresize marginwidth="0" marginheight="0">'); self.document.writeln('</frameset>');
Notice the change in the order of the text and title frames. This is because a hidden frame must always the last in the frameset definition.
A little above the frameset stuff, you will see the following four lines of code:
var index1 = 'index.htm'; var index2 = 'index2.htm'; var index3 = 'index3.htm'; var thePage = pageFromSearch('home.htm');
If necessary, you should change these so that index1 points to wherever you have put index.htm (or whatever you have renamed it to), index2 points to your index2.htm file and index3 points to your index3.htm file. As with index.htm, the page inside the pageFromSearch function should point to whatever is your default page.
Using Floating Mode does put some limitations on how you can use Joust.
When a user switches between Floating and Frames modes, Joust remembers what page is currently loaded in the 'text' frame and reloads that page. If the currently loaded page is from a different server this will break the JavaScript security model. Joust will detect this situation, display an error message and then load the default home page instead.
In order to change modes, Joust needs to be able to store a non-persistant cookie in the users browser. If cookies are turned off (or the user rejects it), Joust will display an error message and not change modes.
Finally, floating mode does not work in all browsers (like Opera, MSIE on a Mac and WebTV). If a user of one of these browsers tries to select floating mode, an error message will be displayed.
Joust can be added to any existing site as a floating menu - with a few limitations. When a user selects an entry in the menu, Joust needs to know where to load the document. By default, it will load the document into a frame called "text". If you want to change this default (to the name of your current content frame or window) you can do so by setting the defaultTarget property in your initialise function like this:
theMenu.defaultTarget = 'windowName';
If your site does not already use frames then you have a possible problem. By default, a browser window does not have a name. This means that, if you have opened Joust in a floating window, it will not know how to find your main window. What is needed is a way to change the name of your main window. Well, there is - but it only works on Netscape 3, MSIE 4 and newer browsers. The way to change the name of a window on these browsers is to set the "name" property.
So, if you wanted to put a button on a page of your existing site that opened Joust in floating mode, this function will do it for you:
function openJoust() { if ((navigator.userAgent.indexOf("MSIE 3") >= 0) || (navigator.userAgent.indexOf("Mozilla/2") >= 0)) { alert("Sorry. Your browser cannot do this. Please upgrade."); } else { self.name = "text"; document.cookie = "mode=Floating; path=/"; JoustMenu = window.open("/index.htm", "JoustMenu", "toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=yes,resizable=yes,width=230,height=400"); } }