overLIB javascript Library
nav_first.pngFirst: package:1
Wikidot per-site help
Edited: 08 Nov 2009 12:06 by: pieterh
Comments: 0
nav_prev.pngPrevious: package:25
List Members as Watchers
Edited: 30 Dec 2010 20:40 by: Steven Heynderickx
Comments: 0
Last: package:49
Advanced Search
Edited: 01 May 2012 12:30 by: tsangk
Comments: 68
Next: package:27
Vote :-)
Edited: 19 Mar 2010 18:00 by: Gabrys
Comments: 4

overLIB javascript Library
Package submitted by Ed Johnson
02 Mar 2010 18:42

rating: +2+x

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.


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]]
… your HTML code that uses overLIB …

This include page creates the top portion of the [[html]] block by importing the overLIB javascript libraries like so:

<!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">
<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>

You then create the second half of the [[html]] block starting with the <body> tag. For example:
<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>
<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>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>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>
<br /><br /><br /><br /><br />

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 Ed Johnson 02 Mar 2010 18:43

Comments: 0

Add a New Comment
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License