overLIB Demo

---

Ed Johnson
1252793335|%e %B %Y, %H:%M

---

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:

---

show Documentation Rough Draft

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 (" ").

---

Discuss

tsangk 1252841878|%e %b %Y, %H:%M %Z|agohover

Excellent Stuff! :)

EDIT: is there a way to implement this to a custom installation of Wikidot? I was trying to create my own modules and failed.

---

First Wikidot Wiki with a Chinese Domain! -> http://曾勁驊.info.tm/ or http://kenneth.wikidot.com

Out of your site limit? I've got 996 sites left. Ask me and I'll create one for you! Just PM me and let me know.^

^{^If you require an Iron Giant Template cloned site, please tell me that too!}

last edited on 1252841926|%e %b %Y, %H:%M %Z|agohover by tsangk + show more

Ed Johnson 1252873681|%e %b %Y, %H:%M %Z|agohover

My php skills are pretty basic. If we ask Gabrys really nicely, maybe he would write a tutorial on how to create a module for WDOS.

-Ed

---

Free Wikidot Applications · Your Shared Photo Gallery · Your Personal Blog

last edited on 1252880967|%e %b %Y, %H:%M %Z|agohover by Ed Johnson + show more

pieterh 1252851064|%e %b %Y, %H:%M %Z|agohover

A nice idea, Ed. Would you please create a wiki page on the design section of the blog, with your proposed documentation? Then I can move that to the design section and we can discuss it. That always helps a lot to turn ideas into actual code.

---

The Wikidot Blog | My other works

How are you doing this now?

leiger 1252922786|%e %b %Y, %H:%M %Z|agohover

My understanding is that you're asking for something to be implemented that you can (and have) easily added to this website inside a code block?

• Can you explain how to do this? :P This looks cool…
• What advantages are there of having it built-in as a module? Easier for new users I can think of… anything else? :/

---

— Shane | Blog | CycloDS Revolution | Compatibility List | Want me to manage your next wiki? | XBL: leiger40

Automatic code replacement — Rate it up!

Re: How are you doing this now?

Ed Johnson 1252932414|%e %b %Y, %H:%M %Z|agohover

Can you explain how to do this?

If you view source on this page and examine the code block, you'll see how I did it. I actually uploaded the overlib.js files on another page and referenced them inside the html code block.

What advantages are there of having it built-in as a module?

1. As you say, it's way easier for new users.
2. It's easier for all users.
3. You can make a popup work on the normal Wikidot syntax part of your page. Currently, it has to be used in an iframe only.
4. It's a hassle using code blocks and iframes.
5. If it works out, we could include Wikidot syntax inside the popup so something like this might actually work well.

-Ed

---

Free Wikidot Applications · Your Shared Photo Gallery · Your Personal Blog

Re: How are you doing this now?

leiger 1253110131|%e %b %Y, %H:%M %Z|agohover

If you view source on this page and examine the code block, you'll see how I did it.

Oops, should've thought of that :)

---

— Shane | Blog | CycloDS Revolution | Compatibility List | Want me to manage your next wiki? | XBL: leiger40

Automatic code replacement — Rate it up!