overLIB javascript Library
overLIB is a free javascript library for creating pop-ups and tooltips and has many configurable options.
This package makes use of the newly implemented [[html]] ... [[/html]] feature for including HTML code in your Wikidot pages. I proposed a design sketch back in September of 2009 that would utilize the overLIB javascript library. Unless or until that design is implemented, this package will make it easier for you to use overLIB. You can read more about overLIB on their homepage: overLIB javascript library. The overLIB Command Reference lists all of the options and the proper syntax for using overLIB in your HTML code.
Instructions
To install this package in your site, create/edit these pages with the following content:
| This page | Contains this line |
|---|---|
| any-category:any-page | [[include :csi:include:overlib]] <body> … your HTML code that uses overLIB … </body> [[/html]] |
This include page creates the top portion of the [[html]] block by importing the overLIB javascript libraries like so:
[[html]]
<!DOCTYPE html PUBLIC "-W3CDTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="expires" content="0">
<script language="javascript" src="http://csi.wikidot.com/local--files/include:overlib/overlib.js"></script>
<script language="javascript" src="http://csi.wikidot.com/local--files/include:overlib/overlib_anchor.js"></script>
<script language="javascript" src="http://csi.wikidot.com/local--files/include:overlib/overlib_crossframe.js"></script>
<script language="javascript" src="http://csi.wikidot.com/local--files/include:overlib/overlib_cssstyle.js"></script>
<script language="javascript" src="http://csi.wikidot.com/local--files/include:overlib/overlib_exclusive.js"></script>
<script language="javascript" src="http://csi.wikidot.com/local--files/include:overlib/overlib_followscroll.js"></script>
<script language="javascript" src="http://csi.wikidot.com/local--files/include:overlib/overlib_hideform.js"></script>
<script language="javascript" src="http://csi.wikidot.com/local--files/include:overlib/overlib_shadow.js"></script>
<script language="javascript" src="http://csi.wikidot.com/local--files/include:overlib/overlib_centerpopup.js"></script>
</head>
You then create the second half of the [[html]] block starting with the <body> tag. For example:
<body> <div id="overDiv" style="position:absolute; visibility:hidden; z-index:1000;"></div> <p>There are two different types of pop-ups that you can make with overLIB. The first type is when the popup goes away after you move your mouse away from a link or other object. The other type 'sticks' around afterward. We call these "sticky" links. See the difference <a href="javascript:void(0);" onmouseover="return overlib('This is an ordinary popup.')" onmouseout="return nd();">here</a> and <a href="javascript:void(0);" onmouseover="return overlib('This is what we call a sticky, since I stick around (it goes away if you move the mouse OVER and then OFF the overLIB popup--or mouseover another overLIB).', STICKY, MOUSEOFF)" onmouseout="return nd();">here</a>.<p> <hr> <p>This link uses an onClick event: <a href="javascript:void(0);" onClick="return overlib('This is a sticky with a caption. And it is centered under the mouse!', STICKY, CAPTION, 'Sticky!', CENTER);" onMouseOut="nd();">Click here!</a> </p> <hr> <p>This link uses an onMouseOver event: <a href="http://www.wikidot.com" onMouseOver="overlib('Get your free wiki today!.', CAPTION, 'Wikidot')" onMouseOut="nd();"> Caption Example</a> </p> <hr> <p>Create menus!: <a href="javascript:void(0);" onMouseOver="overlib('<a href=\'http://blog.wikidot.com\' target=_blank>Blog</a><br><a href=\'http://irongiant.wikidot.com\' target=_blank>Iron Giant</a><br><a href=\'http://community.wikidot.com\' target=_blank>Community</a>', STICKY, CAPTION, 'Wikdot is COOL!', CENTER); return true;" onmouseout="nd(); return true;">Wikidot Links</a> </p> <br /><br /><br /><br /><br /> </body> [[/html]]
Note that your code must end with the closing [[/html]] markup. The opening [[html]] markup is part of the include file. Also note that in the example above, I added a few line breaks (<br />) at the end to create a bit of space so the popup in the last line is completely visible.
In Action
Here's an example using an image map
(hover over the stars on the image)
Include files
| overlib | By (user deleted) | 02 Mar 2010 18:43 |
Comments: 0
Add a New Comment
page revision: 11, last edited: 02 Mar 2010 20:00