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> 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.
Beside all of these sites FAA and Motorola
both use overLIB in their intranets. overLIB has also been mentioned
elsewhere:
|