Braak!
Lock up your hindbrain, it's Andy's Bucket-o-Memes
Pop-up help - how was it done?

This site used to have pop-up help which allowed a user to get additional information as and when they require it, without necessarily interrupting the flow of their browsing. In effect it is the same as the pop-up help that most PC users are familiar with from Windows. Critically, the pop-up help will work on any of the major browsers, from Netscape and Internet Explorer v3+. I felt that it was important not to restrict access to this functionality to a subset of the browser market (such as one product, or only the latest version) - the Web is all about interoperability, isn't it?

I eventually mothballed the help for several reasons:

  1. There were some problems with cross-browser compatibility, which would mean that on some v5 browsers it worked fine while on others it didn't work at all.
  2. Non-browser viewers such as WAP devices and WebTV weren't able to process the chunky script, and even if they did the layout was shot to hell.
  3. In terms of elegance, a server-based help would have been preferable. One is currently in development...
Okay, moving past my naiveté and willful ignorance of the Corporate Machine, how does it all work?

To start with, the whole thing is written in JavaScript. There is a function in each page which allows it to call the help library, and a single central help library which draws the appropriate entry when called. To pass information between the calling page and the library, I use a cookie.

Here comes the science bit. Concentrate.

The Calling Document

Any page which wants to call the help library needs to have the following code inserted between the <HEAD> </HEAD> tag pair:


<SCRIPT>
function glossary(entry){
     document.cookie = "andyshome=" + entry
     window.open("glossary.htm","glossary","width=400,height=250")
}
</SCRIPT>
Then, every time you want to have a help link, it would look something like this: 

<A HREF="javascript:glossary(1)">Insert your text here</A>
Here's how it works: When you click the link in your document, it calls the glossary() function and passes the value in brackets to it. The glossary function creates a cookie called andyshome with the value that was passed, and then opens the pop-up help library file, which is called glossary.htm.

This method of passing information between pages is kinda clunky, but it works. It is not as elegant as server-side processing but if your resources are limited - say, by using a commercial free ISP - then it is a handy second-best. Of course if the user is paranoid and has disabled cookies, this does not work.

The Library

When you load the pop-up library, it checks for that cookie that we created, and then creates a text string based upon the value of the cookie.. Here is an example:


<HTML>

<HEAD>

<TITLE>Andy Explains...</TITLE>

<SCRIPT LANGUAGE="JavaScript">

// These are some variables that need to be set up for later.
var htmlTop = "<BODY BGCOLOR=82E8D0 <"
    htmlTop += "FONT FACE='Arial'><CENTER><H1>"
var htmlMiddle = "</H1></CENTER><P>"
var htmlBottom = "<P><CENTER>"
    htmlBottom +="<A HREF='javascript:window.close()'>Back</A>"
    htmlBottom += "</CENTER><P></BODY></HTML>"
var page = ""

function makeItem(title,text){
     this.title=title       //Title of the glossary entry
     this.text=text         //Text of the glossary entry (long!)
     }

glossary = new Array(2)

glossary[0] = new makeItem("JavaScript","A simple scripting language.")
glossary[1] = new makeItem("Cookie","A snippet of information from a Web page.")

function buildPage(){
     var entry = parseInt(document.cookie.substring(10,document.cookie.length))
     page += htmlTop
     page += glossary[entry].title
     page += htmlMiddle
     page += glossary[entry].text
     page += htmlBottom
     document.write(page)
     document.close()
}

</SCRIPT>

</HEAD>

<BODY onLoad="buildPage()">

</HTML>
There are two functions in this script, some variables, and an array of glossary entries.

  1. buildPage() is the function that does the hard work. It interrogates the cookie for its value, then stitches together an HTML document comprising of a top part, the title of the chosen entry, a middle part, the text of the entry, and a bottom part. It then writes this to the window. The title, text and top, middle and bottom parts of the page are all just HTML, so they could easily contain links, <IMG> tags or whatever.
  2. makeItem(title,text) is something that is used during the construction of the array.

The array is a simple list of glossary objects. Each object has two properties: title and text. Add more as you need them.
BackHomeMail andyg@ravenfamily.org