overLIB Documentation
The best way to learn how to use something is to get your hands dirty and do it. Therefor this
documentation isn't very long, instead it provides some basic instructions and then
acts as a reference for you. That way you'll learn to do all the cool stuff yourself.
The basic parts
First of all you need to prepare the page that you will be using overLIB on. Add these
two lines inside the <BODY></BODY> section of your page:
<DIV ID="overDiv" STYLE="position:absolute; visibility:hidden; z-index:1000;"></DIV>
<SCRIPT LANGUAGE="JavaScript" SRC="overlib.js"></SCRIPT>
If you have other layers (<DIV>) on the page you might want to change the z-index.
The next step is actually using overLIB. We've already come half way so it's really easy. :)
But before doing that we need to take a look at the two essentially different types of
popups that you can make with overLIB. The first type is when the popup goes away after
you move your mouse away from a link. The other type sticks around afterwards. We call
these "stickies", or in singularis a sticky.
See the difference here
and here.
Now that that is done let's look at the code for those two popups and go through it. First
the code for the ordinary popup:
<A HREF="javascript:void(0);" onMouseOver="return overlib('This is a ordinary popup.')" onMouseOut="nd();">here</A>
As you see this is no ordinary hyperlink as we've placed javascript:void(0); instead of an
url as HREF. This causes the browser not to load a new page when we click on the link. This
is of course optional. You can link to a page or anything else if you want.
In the onMouseOver part comes overLIB. Whichever type of popup you want to make you call the
overlib() function. It can take any amount of parameters. You'll understand why that is good
soon. To make a simple popup we just pass the text we want to display to the function inside
single quotes.
After that comes onMouseOut. It contain one cryptic function that has to be there. The nd()
function makes the popup go away when you move the mouse outside the link. You still have
to have it there when making stickies though.
Take a look at the code for a sticky now:
<A HREF="javascript:void(0);" onMouseOver="return overlib('This is what we call a sticky.', STICKY)" onMouseOut="nd();">here</A>
The only difference between the two of them (except for the text passed) is that the sticky one
has another parameter after the text. This parameter, STICKY, tells overLIB that we want
the popup to stick around.
Now that you know the really basic parts lets look at a bit tougher stuff. You remember from
the frontpage that you could click on links and make a popup show up then? This isn't hard
either. You just place the overLIB code in onClick instead of onMouseOver. (Or both.) Here
is an example:
Click here!
Lets digest the code again:
<A HREF="javascript:void(0);" onClick="return overlib('This is a sticky with a caption. And it is centered under the mouse!', STICKY, CAPTION, 'Sticky!', CENTER)" onMouseOut="nd();">Click here!</A>
Here we have the overlib() call in onClick instead, and we have lots more parameters!
These parameters command overLIB to behave in a certain way, hence we call them commands.
The first command to a popup is always just a text string inside of single quotes.
(Actually not true, read about INARRAY in the command reference.). Following that you can
pass any command you want to overLIB. In any order you want. Some commands expect to receive
more than just a command though, it also want some data. When that is the case the next
parameter is expected to be that data. (Some commands expect more than just one parameter.)
Lets go through the commands in this call to see what actually happens. First we have STICKY
that tells overLIB that this popup should be a sticky and stay around. Followed by that is
CAPTION and its parameter 'Sticky!'. This tells overLIB that we want a caption on the popup
and that that caption should be Sticky!. After that the last command is CENTER which tells
overLIB to place the popup centered under the mouse pointer.
Now that you know the basics how the overlib() function works, you can look in the command
reference to find out how you can customize overLIB even more. There are more than 40
different commands that you can play with.
Customizing overLIB
You can customize overLIB in many ways by passing different commands to the overlib()
function. The commands only last for that specific popup. Sometimes you want to make changes
to many pages or just one page. For those reasons you can either customize overlib.js to
fit your needs or set a few variables on the html pages.
To customize overlib.js just open the file and follow the directives in it. It is well
documented on what to edit and what not to.
To customize overLIB settings for a certain page, you need to set a few JavaScript variables.
Just set any variables from the customization section of overlib.js and they will be used.
You don't have to set them all. Any variables you don't set will use the defaults from
overlib.js.
If you don't understand these things you should probably read up on JavaScript and HTML
some more. See the overLIB homepage
for recommended reading on doing that.
Command reference
This reference is for overLIB 3.00. Make sure you are using this version, or you
might not be able to use all functions listed here.
Notation in this reference:
COMMAND parameter
Note that all commands do not have parameters and some commands have more than one.
Also note that commands are case-sensitive.
STICKY
Makes the popup stick around until closed.
CAPTION title
Sets the caption to title.
FGCOLOR color
Color of the inside of the popup box.
BGCOLOR color
Color of the border of the popup box.
TEXTCOLOR color
Sets the color of the text inside the box.
CAPCOLOR color
Sets the color of the box's caption.
CLOSECOLOR color
Sets the color of the close text.
TEXTFONT font
Sets the font to be used by the main text.
CAPTIONFONT font
Sets the font of the caption.
CLOSEFONT font
Defines the font for the "Close" text.
TEXTSIZE size
Size of the main text's font.
CAPTIONSIZE size
Size of the caption's font.
CLOSESIZE size
Size of the "Close" text's font.
WIDTH pixels
Sets the width of the box to some other size.
HEIGHT pixels
Sets the height of the box.
LEFT
Makes the popups go to the left of the mouse.
RIGHT
Makes the popups go to the right of the mouse.
CENTER
Makes the popups go to the center of the mouse.
ABOVE
Makes the popups go above the mouse.
Note: Only possible when HEIGHT has been set.
BELOW
Makes the popups go below the mouse.
BORDER pixels
Makes the border of the popups thicker or thinner.
OFFSETX x
How far away from the pointer the popup will show up, horizontally.
OFFSETY y
How far away from the pointer the popup will show up, vertically.
FGBACKGROUND picture
Defines a picture to use instead of color for the inside of the popup.
Note: You will most likely want to set FGCOLOR to '' or the color will show as well.
BGBACKGROUND picture
Defines a picture to use instead of color for the border of the popup.
Note: You will most likely want to set BGCOLOR to '' or the color will show as well.
Note: When having a Close link, Netscape will re-render the table cells, making things look bad.
CLOSETEXT text
Replaces the text "Close" with something else.
NOCLOSE
Doesn't display the text "Close" on stickies with caption.
STATUS text
Sets the text in the browsers status bar to text.
AUTOSTATUS
Sets the status bar's text to the popup's text.
Note: Overrides STATUS.
AUTOSTATUSCAP
Sets the status bar's text to the popup's caption.
Note: Overrides AUTOSTATUS and STATUS.
INARRAY id
Tells overLIB to read the text from the ol_texts array, located in overlib.js.
This parameter can be used instead of text.
Example: overlib(INARRAY, 1);
CAPARRAY id
Tells overLIB to read the caption from the ol_caps array.
CAPICON url
Displays a small icon before the popup caption.
SNAPX grid
Snaps the popup to an even position in a horizontal grid.
SNAPY grid
Snaps the popup to an even position in a vertical grid.
FIXX position
Locks the popups horizontal position.
Note: Overrides all other horizontal placement.
FIXY position
Locks the popups vertical position.
Note: Overrides all other vertical placement.
BACKGROUND picture
Instead of using the table box as background, your picture will be used.
PADX left right
Pads the background picture with horizontal whitespace for text placement.
Note: This is a two parameter command.
PADY top bottom
Pads the background picture with vertical whitespace for text placement.
Note: This is a two parameter command.
FULLHTML
Allows you to control the html over a BACKGROUND picture completely. The html code is expected in "text".
FRAME frame
Controls popups in a different frame. Make sure you have the <DIV> tag in the target frame as well. The frame parameter passed to this command should not be a text string.
Note: This feature, although working well, is considered experimental in 3.30.
Example: overlib('Text', FRAME, parent.below), assuming you have a frame called below.
TIMEOUT millisecs
Makes the popup go away after the requested delay.
FUNCTION functionname
Calls the specified function and takes the return value as the text that should be displayed in the popup.
DELAY millisecs
Makes that popup behave like a tooltip. It will popup only after a certain delay specified in millisecs.
HAUTO
Automatically determine if the popup should be to the left or right of the mouse.
Note: This command toggles the feature on or off.
VAUTO
Automatically determine if the popup should be to the above or below of the mouse.
Note: This command toggles the feature on or off.
Examples
Check out the features page for lots of examples
and code where these commands are used.
|
|
