About This Product
WebSiteMadeEasy.net | FontsMadeEasy.com | RankChecker.net
 
Submit your Script
Google Search:
| Over 5000 Free Fonts | Tutorials | Javascript Forum | Other Javascript Resources | Cheat Sheet

Popup information box

Simply download the following zip file into your webpage directory (by clicking it, or clicking it with the shift key depressed for NS users). It contains all the neccessary files, including documentation, that will help you set up the boxes for your own site.
 
What this is
overLIB is a JavaScript library created to enhance websites with small popup information boxes to help visitors around your website. It's created from an original idea by myself (Erik Bosrup).

What you can do
You can make popups without caption. Or you can make them have a caption. You can also make them appear on the left, and of course use a caption. You can also make a sticky that stays put when you click on it. It can contain any html you wish. Of course you can also make ones that show on the left. To really know how useful these can be you should check out the site I made these for, The Visual IRC Guide.

What you may do
This script library was created for my personal usage from the start but then it became so popular I made an easy to use version. It's that version you're using now. Since this is free please don't try to sell this solution to a company claiming it is yours. Give me credit where credit is due and I'll be happy. And I'd love to see any changes you've done to the code. Free to use - don't abuse.

What version this is
This is version 2.22. Make sure you check back to http://www.bosrup.com/ now and then for new and even better versions. This file and the source was last edited on 1999-04-02.

What's new
Changes in 2.22:
Added Microsoft Stupidity Check to make Internet Explorer 5.0 move the popups correctly. Sometimes the browser companies really amaze me.

Changes in 2.2:
New functions that allows the box to be centered as well as the promised code for allowing setup to be done on the webpages. When using the centering versions of of the functions bear in mind that the offsetx variable still affects the position.

How to use it
Usually it's easiest to look at the source of a page and copy what you want. I recommend you to do that if you want a fly start, but I'll also give you the exact details on how to use the functions.

The public functions are all three characters long, expect for the onMouseOut function which differs. The three character convention is made to make it easy for you to remember. The first character is either d or s, Dummy or Sticky. The second character sets the alignment, it can as of version 2.2 be Center, Left or Right. The last character determines if there should be a caption. It can be Simple or Caption.

All the popups are called from the onMouseOver event. They must also be closed from the onMouseOut event. The stickies are called from the onClick event. Or they can be called from a javascript: url.

onMouseOver functions:
Center (remove the xoffset for complete center)
dcs(text)
dcc(text, caption)
Right
drs(text)
drc(text, caption)
Left
dls(text)
dlc(text, caption)
onMouseOut functions:
nd()
onClick functions:
scc(text, caption)
src(text, caption)
slc(text, caption)
onMouseOver and onMouseOut functions should use return true; while onClick functions should use return false;.

A popup example:
<A HREF="docs.html" onMouseOver="drc('Text','Caption'); return true;" onMouseOut="nd(); return true;">Popup</A>
Would result in: Popup

A sticky example:
<A HREF="docs.html" onClick="src('Text','Caption'); return false;" onMouseOver="drs('Popup text'); return true;" onMouseOut="nd(); return true;">Sticky</A>
Would result in: Sticky

Look in the source for more examples.

To change colors etc you should edit the JavaScript source file (it is documented there) or use the module template below.

What needs to be on the page
You must have two things on the page besides the actual function calls described above on the page for this to work. There is also a third that is optional.

Within your <BODY></BODY> you must place:
<DIV ID="overDiv" STYLE="position:absolute; visibility:hide; z-index:1;"></DIV>
<SCRIPT LANGUAGE="JavaScript" SRC="overlib.js"></SCRIPT>
Make sure you link that JavaScript library correctly.

Optionally you can place the following just after </HEAD>:
<LINK REL="stylesheet" HREF="overlib.css" TYPE="text/css">
This last snippet defines the font face, size etc for the popups and stickies. You can edit that file if you wish to change anything.

How to change settings on the page
Take a look at this template for changing colors, size etc from the webpage instead of the javascript source. This is great when you need to override the default on a large site.

What to do with questions
You can always email me (Erik Bosrup) at erik@bosrup.com.

What you can add
The JavaScript source should be easy to edit for anyone, also easy to expand on with just little knowledge of JavaScript. Interesting implementations that can be done is to store the texts and captions in arrays instead of passing them on. overLIB 1.0 had this but most people didn't seem to want that. If you know what an array is you can probably do it. On large websites you can save a lot transfers and work. If you make any cool new features for this send them to me, I'd like to see them. You can also send me any feature requests you have.

You might also want to implement statusbar messages, they were a part of 1.0 but since I don't have time to do it now and we don't want HTML to show up in the statusbar (which it would if I did it the easy way) I'm leaving that to you.

Where credit is due...
I didn't make this all by myself, even though most of it. Gnowknayme provided some cool stuff to customize the design on the page instead of in the script and Landon Bradshaw made the first implementation of popup on the left. Catherine La Croix came up with the idea of having centered versions. Many thanks to Dan Steinman for his great Dynamic Duo pages. I've also used some of his functions slightly modified.

Sites that use overLIB
Send me a note if your sites uses overLIB and it will be listed here as well.