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.
|
|