Help Window

--oo00oo--

Introduction The help window is a little gadget I came up with that could be used to simulate those help gadgets you get with MS Office 97, you know, the paper clip and so on. The implementation I have here works best in NS3, and you can see it in action on the main page of this guide. It works best with NS3 because the windows stays on top, but there's the option to hide the window in the background too.

As well as presenting the help, the user can also use it to navigate around the site.

Buttons How exactly did I get those buttons to work I hear you ask? Have I got a box of images around the text window? Is each button a separate image? Actually you only see one image, and it's the background (<BODY BACKGORUND="....gif">), so how come you can click on the buttons? Well, this is all down to the single pixel trick.
Single Pixel Trick? This trick involves creating a .gif file 1 pixel high by 1 pixel wide. You make it transparent (using Gif Construction set or whatever) and you lie to the browser about it's size. This allows you to use it as invisible space. If your page was purely for NS3 you could use the <SPACER> tag.

It has several advantages over the spacer tag and using tables. For instance you can see the size of the space whilst the image loads in Netscape. But how did I get everything to line up, because different browsers have different margin heights and widths, and only IE3 allows you to control them, doesn't it?

Margins That's right, only IE3, and probably IE4 and NS4 allow you to control margins using straight HTML, but there is a work around, see the Margins + Offsets tip.
But what about those buttons? Ah yes, back to the buttons. The buttons as you may have guessed, are an image map. I use the single pixel trick to position another transparent single pixel image exactly over the background image where the buttons appear. This second single pixel image has an image map attached to it, and that's how it works.
So that's how you laid it out, but how does it work? The help window works by making use of frames and JavaScript. Some JavaScript code tells the browser that the location of the main frame is a JavaScript variable. By combining the code for the top of the help window with the message I want to appear and the code for the bottom of the page, all into one variable, the browser treats that variable as if it was a HTML file.

So for instance you could have variable#1 as a combination of variables 2, 3, and 4. Variable 2 is the <HTML><BODY> bit. Variable 3 is the message text to appear. Variable 4 is the </BODY></HTML>.

Talking to the window All the messages for the help window are located in the HTML of the page or pages in the main window, such as this page. A special JavaScript function in the HTML of the main window passes your comments over to that variable in the help window. It's kind of like the code I use to put the message in the status bar at the bottom of my pages when you move your mouse over a link. I also have code in the main page that checks to see if the help window is open, because if it isn't and you try and send a message to it then a JavaScript error occurs.

To talk to Alfred, add onMouseOver="HelpMessage('your message goes here');" onMouseOut = "if (HelpOpen == true) {HelpWindow.blank()}; to the <A HREF> tag in your main window.

The Code Rather than try and teach you the code, I've put it into text files for you. Adapt it to your own needs, but remember, quote my copyright on the code in your pages and I expect a link back to these pages, it takes a lot of time to develop ideas like this and you're very lucky people.

I suggest you right click on the last link and select save link as, otherwise you'll never find it!