| You must use the OverLIB() tokens RELX and RELY
to get this result, REL* forces the left and top edge of the popup to a
position relative to the browser window. (The commands RELX/Y were introduced
in v4.00 and will position a popup relative to the boundaries of the browser
window. The plugin module overlib_centerpopup.js
will also center the popup within the window without requiring any need
to determine the window or popup's dimensions since they are determined
internally.)
1. Let's say the window is 800 pixels wide and the popup is 450 pixels
wide. The popup is centered, so there must be a margin of (800-450)/2=175
pixels on each side of the popup. We only care about the left side. (Vertical
centering is similar.)
- If the popup content is TEXT, then the WIDTH will be the OverLIB
default WIDTH=200, or you can force the WIDTH. Obviously, the WIDTH
value and the value in the centering calculation should be the same.
overlib( TEXT,......., WIDTH,450,RELX,(800-450)/2,....)
- If the popup content is an <img>, then the WIDTH of the
popup will AUTOMATICALLY expand to be the width of the image (if greater
than 200 pixels). In this case, we do not use the WIDTH token, but we
must anticipate the width of the popup by noting the size of the image.
overlib( '<img src=\'picture.jpg\' border=0>',......., RELX,(800-450)/2,....)
This elementary solution works FOR WINDOWS 800 PIXELS WIDE - ONLY. If somebody
has a 1024 pixel wide screen, then offsetting the popup by 175 pixels from
the left margin will NOT center it. You have to measure the user's screen
width before you call overlib(). ACTUALLY, you have to measure the WINDOW
width, since the user may be operating in a window that is smaller than
full-screen.
I should warn you that the example developed on this page has to do with
absolute centering (as can be seen by the formula (800-450)/2).
You can, of course, change the formula for some strategy other than centering.
2. To measure the size of the window, add this code in the <head>
of the page, after the code for overlib has been loaded. This is necessary
to have the value of docRoot defined.
<head>
<script type="text/javascript">
var ns4A = (document.layers)? true:false;
var ns6A = (document.getElementById)? true:false;
var ie4A = (document.all)? true:false;
var ie5A = false;
if (ie4A) {
if (navigator.userAgent.indexOf('MSIE 5')>0) {ie5A
= true;};
if (navigator.userAgent.indexOf('MSIE 6')>0) {ie5A
= true;};
if (ns6A) {ns6A = false;};
};
var WinWid=0, WinHt=0;
function setSizes(){
if (ie4A) { WinWid = eval('self.'+docRoot+'.clientWidth');
WinHt = eval('self.'+docRoot+'.clientHeight); };
if (ns4A||ns6A) { WinWid = self.innerWidth; WinHt
= self.innerHeight; };
</script>
</head>
3. Right after the <body> tag, add this line
<script type="text/javascript">setSizes();</script>
4. The boldface numbers in this paragraph are actual sizes for YOUR CURRENT
WINDOW, computed from the code in #2 above.
The size of the visible area in YOUR current window is
893 x 600.
The known size of the image in the sample
popup is 480 x 374 (Mouseover the yellow)
The left offset for this image in your current window is
206.5.
The top offset for this image in your current window is
113.
Resize your window, click Reload/Refresh, and see the numbers and positioning
change.
5. The complete command is
<a href=javascript:void(0)
onmouseover="return overlib('<img src=\'picture.jpg\'
border=0>',
RELX,(WinWid - 480)/2,RELY,(WinHt
- 374)/2 )"
onmouseout="nd()"
>sample
popup</a>
- The background of this page is a 50 x 50 pixel grid. You can use it
to count off the left and top offsets to convince yourself that it works.
- Note that the image probably will cover the anchor, and as soon as
you move the mouse, the popup will disappear. That's the way overLIB
works. There is a cure for this, but I have not documented it yet.
- Now, resize this window. You may have to hit Refresh/Reload. Notice
the centering arguments are different, based on the revised size of
your window.
- If the popup image is LARGER than the window, the calculation(s) would
result in a negative value. For that reason, the formulas we are actually
using in this demonstration include another function to prevent negative
values. This guarantees that the worst case is RELX,0,RELY,0 and that
the top left corner of the popup will always be visible.
6.The revised complete command is
<a href=javascript:void(0)
onmouseover="return overlib('<img src=\'picture.jpg\'
border=0>',
RELX,Math.max(0,(WinWid - 480)/2),RELY,Math.max(0,(WinHt
- 374)/2) )"
onmouseout="nd()"
>sample
popup</a>
7. All the discussion has assumed that the popup contains an <img ...
>. This implies that the popup will be the same size as the image, and
that size will be known in advance. If the popup contains TEXT, then the
WIDTH will be known. It will be the overlib default of 200 pixels, or the
input argument WIDTH. But the HEIGHT will vary based on the browser default
font size set by the user, and that will affect the number of characters
on a line, and therefore, the number of lines and the HEIGHT. You will have
to estimate a value for the vertical centering calculation.
8. NOW, on to the hard part. At the top of this page, I said:
REL* forces the left and top edge of the popup to a position relative
to the browser window.
- This demonstration always locates the popup relative to the VISIBLE
WINDOW. If you locate the popup at RELY,100, it will appear 100 pixels
down from the top of the VISIBLE WINDOW, regardless of how much scrolling
the user has done.
- This is one of a number of small positioning bugs that exist in OverLIB.
I have modified my OverLIB (the version that is used in this demo) to
correct these bugs. So, if you want your pages to behave like this demo,
you MUST ALSO USE the "Positioning Patch" (http://overlib.boughner.us/plugins/positionMod.js)
. You can add the patch to each page separately.
And then, you are finished. |