1. Browsers and Compatability
- Does overLIB work in Netscape Navigator 4.x and later? It doesn't work for me!
Yes, overLIB works just as well in Netscape Navigator and Mozilla as Microsoft Internet Explorer. You probably have a problem in the way you implemented overLIB. Just view this page in the browser you are having trouble with to confirm that overLIB does work. Make sure you read the Documentation on where to place the overLIB code carefully.
- Does overLIB work on Apple Macintosh computers?
Yes, it should work on Macs running modern browsers (Netscape 4+, Mozilla, Microsoft Internet Explorer 5+ and Opera 7+). Note that I don't have one, and haven't done extensive testing with it. One known issue with Netscape and MacOS is problems with passing p tags to the overlib() function. Replace these with double <br> instead and it should work.
- Does overLIB work in Opera?
Yes, overLIB currently works in Opera v7.x or later, if you use v4.01 or later. This patch correctly works if Opera is reporting itself as Opera rather than as IE. However, it won't work in earlier versions since those versions don't support the DHTML required for overlib.
- What's the difference between overlib.js and overlib_mini.js?
For users and visitors to your web site? No difference other than the difference in file size. 2.x compatability features are removed as well. Overlib_mini.js is size optimized - all comments, indentions and alike have been removed. For developers it is very hard to work with the mini version. When releasing new versions the mini version is processed by a perl script to remove unnecessary whitespace and comments.
2. Implementation Problems
- How do I make overLIB show texts with quotes in them. I get JavaScript errors when I try to do it.
Browsers treat quotes as string delimiters, therefore you must place a backslash before a quote that you want overLIB to display. Example:
overlib('overLIB\'s homepage.');
However, any embedded double quotes must be replaced by the HTML entity ".
- Parentheses seem to break the script. How do I include '(' and ')' in the text and captions?
There are at least two ways to deal with this problem. Escape the parenthesis in the text (or caption) by placing a backslash if front of it (\) or use ( for ( and ) for ). Example:
overlib('This text has \(some\) parentheses in it')
- How do I place links in a popup like you've done on The Visual IRC Guide?
Simple, just pass the html code you would use to create a normal link to the function! Here is a small sample:
overlib('<a href=\'http://www.bosrup.com/\'>Link</a>', STICKY);
- I'm using Netscape 7.1, and I can't get BODY onload events to work correctly unless I comment out the link to the core module. However, when I do this, I get a message from the Crossframe Plugin that says "overLIB 4.00 or later is required for the Cross Frame Support Plugin." How can I correct this problem?
First of all, this warning message is to inform you that all plugins require that the new Core Module (v4.00 or later) also be used because it has that support built into its code. Previous versions of overlib don't support Plugins, so you can't mix Plugins and earlier versions of overlib together.
The reason that you've had to do this is because there is an error in the code for the v4.00 Core Module that will be fixed in v4.01, which should be released shortly. The purpose of this code was to prevent any overlib popups from being accessible until the core and all of the called plugins had been loaded. This was to avoid unnecessary Javascript errors from appearing in case a user moused over one of your overlib calls that used a command from one of plugins.
The fix for this error is relatively easy to make, if you're comfortable in modifying the code yourself, as it only involves a few minor changes. In line 230 of the full version of overlib, change the word true to false that appears in the function window.addEventListener(). In addition, in line 1079, add && e.eventPhase == 3 after the reference to window.removeEventListener in the if statement, and change true to false in the call to the function window.removeEventListener(). These two lines should look like (which are split here for easier formatting):
230 -- if(window.addEventListener)
window.addEventListener("load",OLonLoad_handler,false);
1079 -- if(window.removeEventListener && e.eventPhase == 3)
window.removeEventListener("load",OLonload_handler,false);
The above code is for Netscape 7.1 and Gecko based browsers. There are other concerns associated with IE 6.0 and Opera 7.x which were addressed in v4.02 or later.
- I've downloaded the most recent version of overlib from the Bosrup web site and can't get it to work with Opera if I set the browser to identify itself as Opera but it functions fine when I set the browser to identify itself as IE6.0. Is there any solution to this problem?
This problem has been corrected in the soon to be released version 4.01 of overlib. If you are comfortable making modifications to the code yourself, the steps needed to correct the code are:
1. At about line 200 in the core module, make sure that the line is
var olOp=(navigator.userAgent.toLowerCase().indexOf('opera') > -1 && document.createTextNode);
2. and at about line 216, set the code to
if (olIe4) {
var agent=navigator.userAgent;
if (/MSIE/.test(agent)) {
var versNum=parseFloat(agent.match(/MSIE (\d\.\d+)\.*/)[1]);
if (versNum >= 5){
olIe5=true;
olIe55=(versNum>=5.5&&!olOp) ? true : false;
if (olNs6) olNs6=false;
}
}
if (olNs6) olIe4=false;
}
With these changes, Opera should function properly regardless of how it is set to identify itself.
- I migrated from an older version of Overlib to the most recent version. In the earlier version, when I used
<a href="somedocument.htm" onClick="return overlib('etc etc');" onMouseOut="nd();">some link</a> only the tooltip was showing, the link did not open, which was what I wanted to achieve. With this new version however, the link is opening, which is defenitely not what I want. Is there any way to accomplish the old behavior (link not opening) without reverting to the old version?
Most likely this behavior results from the change in the return value that overlib is returning to the caller. In version 3.51, the main routine returned true if there was anything to be displayed in the status bar, otherwise it would return false. This behavior was changed in version 4.00 to handle Opera 7.x which did not display a "hand" cursor when mousing over the link with the old behavior. Accordingly, in v4.01, which should be released shortly, the main routine is coded to be compatible with v3.51, while allowing Opera to display the "hand" cursor during an onmouseover event.
Depending on overlib to work in this way is very dangerous because the same thing would have happened if you were displaying anything in the status bar. The correct way to do this is to ignore the return value from overlib and append a return false so that your call looks like <a href="somedocument.htm" onClick="overlib('etc etc'); return false;" onMouseOut="nd();">some link</a>. This way the link won't be followed since it is being aborted by appending return false.
- When i specify a DOCTYPE like
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
the overlib popup appears in the middle of the screen instead of the right side of the cursor! When i remove the doctype, it works correctly. Whats wrong? Incompatibility???
As far as is known, overlib functions properly with any type of DOCTYPE statement. More than likely this problem is associated with certain style rules that are contained in your stylesheet. In this case, the following rule caused the above problem to become manefested:
table { margin-left: auto; margin-right: auto; }
Don't forget that overlib popups use tables (at least two nested tables) to display its content. Consequently any global style rules applied to TABLE, TD, and TR will potently affect an overlib popup.
- I have an width error with my overLIB popups with firefox (much too wide) I test it with IE and all is good.
Thanks for your help
Again this is an example of a global style rule impacting the overLIB popup. The poster to this question, reported back that it was due to the following style rule that he had in his global style sheet:
table {width: 100%; margin: 5px; padding: 5px; font-size: small}
Again it must be emphasized that since overLIB popups are constructed from nested tables, any rules that are applied to TABLE, TR, and/or TD will also affect the overLIB popup. You need to be careful when doing this. If you must specify such rules, then it is suggested that you apply custom classes to your overLIB popups. These custom classes will have to reverse any global style rules that have been specified in a global style sheet and apply the settings that is desired for the popup.
- Using the simplest of calls, all of my windows pop up with the lower border extremely wide -- as though the border is 15-20 pixels wide at the bottom. It's almost like the caption box is misplaced but there's nothing in it. What could be going wrong?
This is another example where a global style rule for the TABLE element is affecting your overlib popups, namely the rule
p, ul, ol, table {
margin-top: 0;
margin-bottom: 17px;
... }
One way around this problem is to apply a custom class to BGCLASS and FGCLASS which have the colors you want for the background (bgcolor) and foreground (fgcolor) but also specifiy margin: 0 which will override your global style rule. Remember that overlib uses tables internally in it's markup so that any global style rules applied to table elements (i.e., table, tr, td, etc.) can also impact the popup.
- My site has frames and the popup gets cutoff where the other frame starts. Is it possible to make overLIB go above the frames or in a different frame?
Dynamic HTML cannot 'escape' a frameset. However, as of overLIB 3.10, you can make popups show up in different frames. Look at the FRAME command in the Command Reference.
- Can I make overLIB popups popup over imagemaps?
Yes, it's just as easy as normal popups. Just place the same onMouseOver and onMouseOut events in the imagemap code as you would have placed in an anchor tag.
- Can I use FrontPage 2000 and overLIB together?
I know people have done this and overLIB is covered in a FrontPage 2000 book so this shouldn't be a problem. I have not tested this (as I don't use such editors) and will not help you implement it either. Read as: I WILL NOT ANSWER ANY FRONTPAGE RELATED QUESTIONS.
- Why do form elements show up on top of the popups? They sort of bleed.
This is a browser issue that we can't do much about. The only work around would be to place the form elements themselves in layers and hide it while showing the popups. You can read more about this problem here. Fortunately, most modern browsers don't have this problem any longer. Only IE has problems with the SELECT element. Netscape 4.x, however, still has these problems though and you may want to think about switching to a newer version of Netscape.
- I don't get any "Close" link to click when I try using
<td class="blue_head" onmouseover="return overlib(' Select this column if you would like to <strong>Renew</strong> this Registration ',STICKY,CLOSECLICK);" onmouseout="return nd();">. What am I doing wrong?
The "Close" link doesn't show unless you also specify a CAPTION. If you insert that in your call, you'll see the link which can be clicked to close the popup.
- How can I style overlib popups using CSS?
There are two routes that one can take if they wish to use CSS to style their popups. First there are the CSSSTYLE commands Plugin - Cssstyle which provide styling via inline style rules. This approach works fine in all supported browsers except for Netscape 4.x which has difficulty rendering popups with these styles. The second option employs CSSCLASS commands whereby the user defines custom classes for the caption, close, body text and foreground and background appearances. These commands are now part of the core module Layer Generation Functions (LGF). The command, CSSCLASS, is no longer needed but has been retained for backward compatibility with earlier versions of overlib. Any item with no specified custom class will be styled according to default overlib settings. A class rule is a name that is preceeded by a decimal point as in
.textFontClass {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
color: #ffff00;
}
This would appear either in the HEAD section of the page between STYLE tags or in an external style sheet that is linked to the page.
An example of using CSSSTYLE commands is given in Command Reference under the "Cascading Style Sheets" section or in Plugin - Cssstyle. A CSSCLASS example can be found in the Command Reference under "Class Commands". The unofficial CSSW3C plugin Unofficial Plugins permits popup styling according to W3C standards. The previous reference has numerous examples of how to use its commands.
- I would like to use a graphic rather than the text "Close" for dismissing a popup. How would I go about doing that?
Depending on which browsers you would like to support, there are at least two ways to do this -- using either an image or by doing it totally via styling. The use of an image would also allow support for Netscape 4.x. In either case, make sure that there is a CAPTION and then just set CLOSETEXT to one of the following strings:
<img width="20" height="20" title="Click to close" src="x.gif" />
<span title="Click to close" style="background-color: #CCCCCC;
border:2px #333369 outset; padding: 2px; color: #000000; font-size: 9px;
font-weight: bold;">X</span>
You will have much better luck if you define javascript variables in the HEAD section of your page which are set to these strings rather than trying to put them in the overlib command line.
This page demonstrates examples using both approaches.
- I'm trying to use overlib in a frame environment but I can't get it to work correctly for me. What could I be doing wrong? Working with frames can indeed be confusing, especially if one isn't comfortable working with them. Most of the time, problems with overlib in this situation boil down to specifying a wrong reference for your target frame. Consider the frame setup shown in the figure below.

When working with frames it is helpful if each frame is given a name so that it can be referenced. Even if the frame isn't named, it can still be referenced, as will be shown in a minute. In the figure, each of these frames are part of the same frameset document, having the names given by the top lines in each. It is assumed that the document that is in the "main" frame will have several overlib calls on it and that one of these will make reference to a popup that is to be shown in the bottom right frame, "right-bottom". The frameset document which contains these frames is their "parent" so that the frames can also be referred to as parent.frames[0], parent.frames[1], and parent.frames[2]. (In Javascript array items normally have a trailing 's' on their names.) However, since they are also named, they can be referred to as parent.frames['main'] (or as some are accustomed to writing parent.main), parent.frames['right-top'], and parent.frames['right-bottom']. In order to show an overlib popup in the lower right frame, all that is absolutely neccessary is to include
<div id="overDiv" style="position: absolute; visibility: hidden;
z-index: 1000;"></div>
on the page that is loaded into that frame. The call which will show the popup in that frame would be something like overlib('Example text', CAPTION, 'Right-bottom', FRAME, parent.frames[2]) (any of the other equivalent frame references could also be used in the above call). Check the following page for a more complicated example which contains several levels of frame nesting.