Force the Popup to an Absolute Position in the Window
Return to the Index
I want absolute control over the location of the popup - (i.e. centered in the window). Once the popup appears, I want it to stay in one place (centered) even if the mouse moves. Like this ..... ..... ..... ..... ..... ..... ..... ..... ..... ..... ..... ..... ..... ..... ..... ..... ..... ..... ..... ..... ..... ..... ..... ..... ..... ..... ..... ..... ..... ..... ..... ..... ..... ..... ..... ..... ..... ..... ..... ..... ..... ..... ..... ..... ..... ..... ..... ..... ..... ..... ..... ..... ..... ..... ..... ..... ..... ..... ..... ..... ..... ..... ..... ..... ..... ..... ..... ..... ..... ..... .....
You must use the OverLIB() tokens FIXX and FIXY to get this result, FIX* forces the left and top edge of the popup to an absolute position on the PAGE. (Note, I said PAGE. We will cover that later.)

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,FIXX,(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>',......., FIXX,(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.
    <head>

    <script language=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 = self.document.body.clientWidth; WinHt = self.document.body.clientHeight; };
        if (ns4A) { WinWid = self.innerWidth; WinHt = self.innerHeight; };
        if (ns6A) { WinWid = self.outerWidth; WinHt = self.outerHeight; };
    };
    </script>

    </head>

3. Right after the <body> tag, add this line
    <script language=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 .
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 .
The top offset for this image in your current window is .
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>',
           FIXX,(WinWid - 480)/2,FIXY,(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 FIXX,0,FIXY,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>',
           FIXX,Math.max(0,(WinWid - 480)/2),FIXY,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:

    FIX* forces the left and top edge of the popup to an absolute position on the PAGE.
  • The standard overLIB innocently located FIXY relative to the top of the PAGE. That means that if you locate the popup at FIXY,100, it will always appear 100 pixels down from the top of the PAGE. If you scroll a long page off the top of the screen, and mouseover for the popup, the popup will be positioned in the same place - 100 pixels from the top of the PAGE. You probably will not see it, because of the scrolling.
  • This demonstration always locates the popup relative to the VISIBLE WINDOW. If you locate the popup at FIXY,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 APPLY the "Positioning Patch". You can add the patch to each page separately, or you can install it in your copy of OverLIB.
  • The positioning patch is described on another page. Click here. That page contains samples, revised and precise Documentation, and Installation Instructions.
  • At this writing, the Patch is known to support OL3.33. I haven't begun to work with 3.50, but feel free to experiment.
And then, you are finished.
Comments, suggestions, feedback, success, failure? Let us know