Demo of Positioning Plugin
This page demonstrates a plugin which implements the positioning work that I did in OverLIB 3.33 which cleans up and rationalizes all the positioning issues that have been discussed in the overlib newsgroup. It is 100% compatable with the intent of the positioning commands as documented, but it makes their operation more reliable and predictable. This plugin requires a Core Module with a version number of 4.10 or later to work correctly.

This page demonstrates the improved Horizontal and Vertical Positioning commands, and follows with expanded User Documentation and Installation Instructions.

For a complete discussion of the plugin demonstrated here - including the evolution, before and after examples, credits, tooling instructions, and in-depth technical discussion of the modifications - see the related Technical Discussion page. I would like to thank Robert E Boughner for modifying my original patches to work with the new plugin version of overlib.
Some facts about this page and your browser.
The background image on this page is a 50 pixel by 50 pixel grid. Use it for counting.
Horizontal Positioning
The Yellow bar is an anchor for a popup handled by OverLIB 4.11 WITH THE PLUGIN positionMod.js.
Slide your mouse the length of each bar to see the behavior of the popup at different x-positions on the screen.
Default to right of mouse with automatic edge justification. (Default offset of 10px) overlib(... no positioning args)

To left of mouse with automatic edge justification. (Default offset of 10px) overlib(... LEFT)

Right OR left of mouse with automatic edge justification. (Default offset of 10px) overlib(... HAUTO)

Centered below mouse with automatic edge justification. (NO mid-point offset) overlib(... CENTER)

Right OR left of mouse and snapped to a 50px grid, with automatic edge justification. overlib(... HAUTO,SNAPX,50)

Centered below mouse but offset to the left by 75px. Using OFFSETX suppresses automatic edge justification. overlib(... CENTER,OFFSETX,-75)

Centered below mouse, offset to the left by 75px and snapped to a 30px grid. Using OFFSETX suppresses automatic edge justification. overlib(... CENTER,OFFSETX,-75,SNAPX,30)

RELX in a revised implementation. Always 15px from the left margin of the VISIBLE WINDOW. This overrides all other horizontal positioning commands, so it doesn't matter if we leave them in the arg list. They will be ignored. overlib(... RELX,15,CENTER,OFFSETX,-75,SNAPX,30)

RELX in a revised implementation. Always 450px from the left margin of the VISIBLE WINDOW. Watch out. This looks OK on a 1024px wide monitor, but it is horrid on an 800px monitor. This demonstrates why autopositioning is so important. Use RELX (with large values) with caution. overlib(... RELX,450)

RELX in a revised implementation. Always 100px from the right margin of the VISIBLE WINDOW. This adapts to screen resolution, window width and horizontal scrolling. overlib(... RELX,-100)
Vertical Positioning
  1. Default BELOW the mouse with automatic edge justification. (Default offset of 10px) overlib(... no positioning args)
  2. ABOVE the mouse with automatic edge justification. (Default offset of 10px) overlib(... ABOVE)
  3. ABOVE or BELOW the mouse with automatic edge justification. (Default offset of 10px) overlib(... VAUTO)
  4. ABOVE or BELOW the mouse and snapped to a 15px grid. (Default offset of 10px) overlib(... VAUTO,SNAPY,50)
  5. BELOW with forced offset of -80. (i.e. popup is "below" but forced 80px UP from the expected position.) Using OFFSETY suppresses automatic edge justification. overlib(... OFFSETY,-80)
  6. ABOVE with forced offset of -200. (i.e. popup is "above" but forced 200px DOWN from the expected position.) Using OFFSETY suppresses automatic edge justification. This looks almost the same as the previous, but ONLY because we know the exact height of the popup. Not a safe assumption generically. overlib(... ABOVE,OFFSETY, -200)
  7. ABOVE or BELOW with forced offset of +40. (i.e. popup is pushed 40 px away from the mouse.) Using OFFSETY suppresses automatic edge justification. This is not very practical or aesthetic, but it might be necessary if you have a large anchor that you don't want to cover with the popup. overlib(... VAUTO,OFFSETY,40)
  8. ABOVE or BELOW with forced offset of 40 and snapped to a 25 px grid. Using OFFSETY suppresses automatic edge justification. overlib(... VAUTO,OFFSETY,40,SNAPY,25)
  9. RELY in a revised implementation. Always 35 px below the top of the VISIBLE WINDOW. overlib(... RELY,35)
  10. RELY in a revised implementation. Always 100 px above the bottom of the VISIBLE WINDOW. This adapts to screen resolution, window height and vertical scrolling. overlib(... RELY,-100)
1. 2. 3. 4. 5. 6. 7. 8. 9. 10.
Revised User Documentation
RIGHT
(Default) Place the popup to the right of the mouse, but do not overrun the right margin of the window.

LEFT
Place the popup to the left of the mouse, but do not overrun the left margin of the window.

CENTER
Place the center of popup under (over) the mouse, but do not overrun either margin of the window.

HAUTO
If the mouse is right of the center of the browser payload area, place the popup LEFT (but do not overrun). If the mouse is left of the center, place the popup RIGHT.

OFFSETX,x
Place the popup x pixels left/right of the mouse. The OverLIB default is 10 pixels. IF THIS PARAMETER IS SPECIFIED (x!=10), all horizontal positioning (LEFT/CENTER/RIGHT/OFFSETX/SNAPX) is processed, BUT left/right edge-justification is DISABLED.

  • If OFFSETX is specified with RIGHT, it is used as requested. i.e. OFFSETX,25 moves (the nearest edge of) the popup 25 pixels right of the mouse and OFFSETX,-25 moves (the nearest edge of) the popup 25 pixels left the mouse.
  • If OFFSETX is specified with LEFT, it's sense is inverted. i.e. OFFSETX,25 moves (the nearest edge of) the popup 25 pixels left of the mouse and OFFSETX,-25 moves (the nearest edge of) the popup 25 pixels right of the mouse. This mirror imaging occurs automatically if HAUTO is specified. See bullet below. It is a nuisance to deal with it in the non-automatic case.
  • If OFFSETX is specified with HAUTO, |x| is used to push the popup away from the mouse.
  • If OFFSETX is specified with CENTER, it moves the center-alignment point left(-) or right(+) of the mouse. If OFFSETX is not specified, the default (10) is always ignored.

OFFSETX/OFFSETY - general comment - located after OFFSETY, below.

SNAPX,grid
Snaps the horizontal position of the popup to a position on a virtual grid. Useful to prevent minor jitter if the user moves his mouse a few pixels. The grid never extends beyond the left/right edge of the visible window (unless OFFSETX is specified).

RELX,x
Locks the popup's horizontal position. RELX overrides all other horizontal positioning. RELX,x locates the left edge of the popup relative to the left edge of the VISIBLE WINDOW, so the popup WILL NOT scroll out of sight on a wide page. RELX,-x locates the RIGHT edge of the popup relative to the right edge of the VISIBLE WINDOW.  

BELOW
(Default) Place the popup below the mouse, but do not overrun the bottom of the window.

ABOVE
Place the popup above the mouse, but do not overrun the top of the window. (HEIGHT not needed).

VAUTO
If the mouse is below the center of the browser payload area, place the popup ABOVE (but do not overrun). If the mouse is above the center, place the popup BELOW.

OFFSETY,y
Place the popup y pixels above/below the mouse. The OverLIB default is 10 pixels. IF THIS PARAMETER IS SPECIFIED (y!=10), all vertical positioning (ABOVE/BELOW/VAUTO/OFFSETY/SNAPY) is processed, BUT top/bottom edge-justification is DISABLED.

  • If OFFSETY is specified with BELOW, it is used as requested. i.e. OFFSETY,25 moves (the top edge of) the popup 25 pixels down from the mouse and OFFSETY,-25 moves (the top edge of) the popup 25 pixels up from the mouse.
  • If OFFSETY is specified with ABOVE, it's sense is inverted. i.e. OFFSETY,25 moves (the bottom edge of) the popup 25 pixels up from the mouse and OFFSETY,-25 moves (the bottom edge of) the popup 25 pixels down from the mouse. This mirror imaging occurs automatically if VAUTO is specified. See bullet below. It is a nuisance to deal with it in the non-automatic case.
  • If OFFSETY is specified with VAUTO, |y| is used to push the popup away from the mouse.

OFFSETX/OFFSETY - general comment
If you have a very large popup (say an image), and either its height or width is more than half the height/width of the window, you run the risk that the popup will cover the anchor if HAUTO and VAUTO are both used. It may be better to let the popup overhang one edge, and let the reader scroll the anchor to get a good view of the whole popup. For example, use HAUTO,OFFSETY,9 to automatically position the popup LEFT/RIGHT, but place it (by default) BELOW the anchor by 9 pixels. The popup will be cut off by the bottom of the window, unless the user scrolls the page up.

SNAPY,grid
Snaps the vertical position of the popup to a position on a virtual grid. Useful to prevent minor jitter if the user moves his mouse a few pixels. The grid never extends beyond the top/bottom of the visible window (unless OFFSETY is specified).

RELY,y
Locks the popup's vertical position. RELY overrides all other vertical positioning. RELY,y locates the top edge of the popup relative to the top of the VISIBLE WINDOW, so the popup WILL NOT scroll out of sight on a long page. RELY,-y locates the BOTTOM edge of the popup relative to the bottom of the VISIBLE WINDOW.  

WIDTH
Attempt to force the width of the TEXT area of the popup. This is a suggestion to the browser, which will make the popup wider if it wants to, in order to accommodate wide images or tables. The OverLIB default WIDTH is 200.

HEIGHT
Attempt to force the height of the TEXT area of the popup. This is a suggestion to the browser, which will make the popup as high as it needs to, in order to accommodate tall images or long tables. There is no defined default HEIGHT.

Installation Instructions
This plugin is written as an ADDITION to the OverLIB Core Module v4.11. In other words, the faint-of-heart do not have to edit their copy of OverLIB.
  • Obtain a copy of the plugin. In Windows, right click here, and "Save Link Target as ..." (use positionMod.js) [on a Macintosh, use Command + Click].
  • Upload positionMod.js to your server.
  • On your webpage, locate the line that loads OverLIB.
    <script type="text/javascript" src="YourPath/overlib.js"></script>>
  • Immediately BELOW that, add this line.
    <script type="text/javascript" src="YourPath/positionMod.js"></script>
Please let me know if you encounter problems.Modified by REB, May 11, 2004