For some time, I have been wanting to get rid of the popups that were being used for the "See it in action" and "Get the code" buttons on the snippets pages.  Most people use popup blockers when they browse the web.  Some of these blockers allow popups that originate on-site, but many do not.  This causes some people to leave the website without getting to see some of the things that should be available to them.

After a thorough search, I discovered only three other methods which provided a way of presenting additional information without going off the page, and without using popups.  None of them were exactly what I wanted, so I wrote my own script, inspired by the No-Kill Pop Box, originally presented by Will Bontrager in 2003.

The Overlay Box uses unobtrusive DOM scripting to show or to hide the box.  Just about anything you want can be put into the box: text, a textarea (scrollable or not), images, ... even another script (such as an SSI-included Perl script).  Multiple boxes can exist on the same page.

I would appreciate any feedback that you could provide.  Please let me know how you are using it, and any suggestions for modifying or extending it to make it more applicable to your needs. Future versions will be issued containing your suggestions, plus some new functions I am already using on this website.

Brief explanation:

Version 1 of Overlay Box consists of three functions: showBox, hideBox, and Overlay.  The Overlay function, which is called when the page is loaded, sets up the game plan: what to do when the "show" button is clicked, and what to do when the "hide" link is clicked.  AFTER a click, the other functions then figure out WHAT was clicked, and either reveal or hide the appropriate box.

How to use the script:

1) Follow the instructions on the main Snippets Page for how to install a javascript function that runs at load time.

2) The HTML coding of your webpage must be set up properly for each box.  Three 'class' names are used by the script, which can NOT be used for any other purpose: "box", "show", and "hide".  You may, of course, use them in your style sheet to apply a color to the button link, for example.  The box may be positioned wherever you want it on the page, but MUST be located right after the button in your HTML code.

<button class="show">[text for show button]</button>
<div class="box" style="[position, width, etc.]; visibility:hidden;">
  [contents of box]
  <a href="#" class="hide">[text for hide button]</a>
</div>

See it in action:  The first button below will show an example of a box containing an image. For examples showing how other entities may be placed in the box, see the second button; or take a look at the buttons on the other snippets pages.