overLIB Demo
created: 1252793335|%e %B %Y, %H:%M
Ed Johnson
I propose Wikidot consider adding the free overLIB javascript library and creating a module to use it's features. overLIB is for creating popups and tooltips and has many, many, many configurable options.
I created a small demo and even wrote up a rough draft of the documentation:
The list below is pulled from the overLIB Command Reference. Some options were omitted since they wouldn't work well with Wikidot (i.e. embedding HTML in a popup).
Suggested Syntax
[[overlib options…]]popup link text…[[/overlib]]
Options:
- event="event-specifier"
- Event that triggers the popup. onMouseOver, onClick, etc.
- text="text-specifier"
- Text to display in popup
- caption="caption-specifier"
- Sets the caption of the popup. A string whose default is the null string (" ").
- sticky="sticky-specifier"
- Makes the popup stick around until closed. Default is not to be STICKY (0). This is a number, either 1 or 0.
- width="width-specifier"
- Sets the width of the box to some other size in pixels. This is a number whose default value is 200.
- height="height-specifier"
- Sets the height of the box in pixels. This is a number whose default value is -1.
- position="position-specifier"
- left - Makes the popups go to the left of the mouse.
- right - (default) Makes the popups go to the right of the mouse.
- center - Makes the popups to be centered about the mouse.
- above - Makes the popups go above the mouse. Note: Only possible when HEIGHT has been set.
- below - (default) Makes the popups go below the mouse.
- offsetx="offsetx-specifier"
- How far away (in pixels) from the pointer the popup will show up, horizontally. This is a number whose default value is 10 pixels. NOTE: Positive values move the popup towards the right edge of the window and negative values move it toward the left edge of the window.
- offsety="offsety-specifier"
- How far away (in pixels) from the pointer the popup will show up, vertically. This is a number whose default value is 10 pixels. NOTE: Positive values move the popup downward toward the bottom of the browser's window and negative values move it upward.
- autostatus="autostatus-specifier"
- Sets the status bar's text to the popup's text. Overrides STATUS. A number whose default value is 1.
- autostatuscap="autostatuscap-specifier"
- Sets the status bar's text to the popup's caption. Overrides AUTOSTATUS and STATUS. A number whose default value is 2.
- snapx="snapx-specifier"
- Snaps the popup to an even position in a horizontal grid. A number whose default value is 0.
- snapy="snapy-specifier"
- Snaps the popup to an even position in a vertical grid. A number whose default value is 0.
- fixx="fixx-specifier"
- Locks the popup's horizontal position relative to the HTML page's upperleft hand corner. This may cause the popup to become invisible if the page is scrolled. Overrides all other horizontal placements, except RELX which takes precedence. A number whose default value is -1.
- fixy="fixy-specifier"
- Locks the popups vertical position relative to the HTML page's upperleft hand corner. This may cause the popup to become invisible if the page is scrolled. Overrides all other vertical placements, except RELY which takes precedence. A number whose default value is -1.
- relx="relx-specifier"
- Positions popup a number of pixels, relative to the upper left hand corner of the browser window, in the horizontal direction. Overrides all other horizontal placements, including FIXX. Negative values will position the popup from the browser window's right hand edge. A number whose default value is not set (NULL).
- rely="rely-specifier"
- Positions popup a number of pixels, relative to the upper left hand corner of the browser window, in the vertical direction. Overrides all other vertical placements, including FIXY. Negative values will position the popup from the bottom edge of the browser window. A number whose default value is not set (NULL).
- timeout="timeout-specifier"
- Makes the popup go away after the requested delay after first being shown. A number whose default value is 0. A delay on closing is similar (e.g., onMouseOut="return nd(500)"), but it becomes actived when your cursor leaves the triggering link. It is probably not a good idea to include both on the same popup.
- delay="delay-specifier"
- Makes that popup behave like a tooltip. It will popup only after a certain delay specified in millisecs. A number whose default value is 0. If DELAY has been scheduled for a popup, then any delay on closing will be cancelled.
- hauto="hauto-specifier"
- Automatically determine if the popup should be to the left or right of the mouse. This command switches the default value of this command to its opposite state for this invocation only. A number whose default value is off (0).
- vauto="vauto-specifier"
- Automatically determine if the popup should be to the above or below of the mouse. This command switches the default value of this command to its opposite state for this invocation only. A number whose default value is off (0).
- closeclick="closeclick-specifier"
- Force users to click on "Close" to close sticky popups. This command switches the default value of this command to its opposite state for this invocation only. A number whose default value is off(0).
- fgcolor="fgcolor-specifier"
- Color of the inside of the popup box. A string value whose default is "#CCCCFF".
- bgcolor="bgcolor-specifier"
- Color of the border of the popup box. A string value whose default is "#333399".
- textcolor="textcolor-specifier"
- Sets the color of the text inside the box. A string value whose is black ("#000000").
- capcolor="capcolor-specifier"
- Sets the color of the box's caption. A string value whose default is white ("#FFFFFF).
- closecolor="closecolor-specifier"
- Sets the color of the close text. A string value whose default is "#9999FF".
- textfont="textfont-specifier"
- Sets the font to be used by the main text. A string value whose default is "Verdana,Arial,Helvetica".
- captionfont="captionfont-specifier"
- Sets the font of the caption. A string value whose default is "Verdana,Arial,Helvetica".
- closefont="closefont-specifier"
- Defines the font for the "Close" text. A string whose default is "Verdana,Arial,Helvetica".
- textsize="textsize-specifier"
- Size of the main text's font. It is a string value containing either an integer, as '1', or a number with a length specifier, like '10px'. Default value is '1'.
- captionsize="captionsize-specifier"
- Size of the caption's font. It is a string value containing either an integer, as '1', or a number with a length specifier, like '10px'. Default value is '1'.
- closesize="closesize-specifier"
- Size of the "Close" text's font. It is a string value containing either an integer, as '1', or a number with a length specifier, like '10px'. Default value is '1'.
- fgbackground="fgbackground-specifier"
- Defines a picture to use instead of color for the inside of the popup. You will most likely want to set FGCOLOR to nothing or the color will show as well. A string value whose default is the null string (" "). Can also include the absolute or relative path to the image.
- bgbackground="bgbackground-specifier"
- Defines a picture to use instead of color for the border of the popup. You will most likely want to set BGCOLOR to nothing or the color will show as well. A string value whose default is the null string (" "). Can also include the absolute or relative path to the image.
- capicon="capicon-specifier"
- Displays a small icon before the popup caption. A string value whose default is the null string (" ").
- border="border-specifier"
- Border width in pixels. Makes the border of the popups thicker or thinner. A number whose default is 1.
- background="background-specifier"
- Instead of using the table box as background, your picture will be used. A string value whose default is the null string (" ").
- padx="padx-specifier"
- left, right Pads the background picture with horizontal whitespace for text placement. Note that this is a two parameter command. Both parameters are numbers with default values of 1.
- pady="pady-specifier"
- top, bottom Pads the background picture with vertical whitespace for text placement. Note that this is a two parameter command. Both parameters are numbers with default values of 1.
- cellpad="cellpad-specifier"
- Padding, in pixels, for the main body text in a popup. A number whose default value is 2. There can be from one to four additional values following this command, separated by commas. If there is more than one value, then their interpretation will follow the rules of CSS.
- closetext="closetext-specifier"
- Replaces the text "Close" with something else. A string whose default is "Close".
- closetitle="closetitle-specifier"
- Sets the text string of the TITLE attribute on the close event if CLOSECLICK is 1. A string whose default value is "Click to Close". If you don't want any TITLE to show, then set this variable to an empty string.
- donothing="donothing-specifier"
- true / false As the name implies, this command does absolutely nothing at all. It was introduced because it was requested by an experienced user of overlib in order to make programming shell wrapper functions easier.
- followmouse="followmouse-specifier"
- Sets whether the popup should follow the cursor. A number whose default is on (or true) (1).
- noclose="noclose-specifier"
- Doesn't display the text "Close" on stickies with caption, and will set event handlers so that the popup can be closed by mousing over it and then off of it. This will also cancel any TIMEOUT that has been scheduled for the popup. A number whose default is off (0).
- status="status-specifier"
- Sets the text in the browsers status bar to text. A string whose default is the null string (" ").
