Plugins
Home

The plugins site is currently in development.

We've been looking to provide a higher-quality, spam-free experience at the plugins site for some time, and a major error on our part forced us to shut down the current site before we could put the new one in place. We are developing a new site, and you can follow along with its development on GitHub. For more information about this transition, including steps you can take as a plugin author to prepare, please read our post about what's going on.

floating box


Flying / Floating boxes with easing and motion blur

Submitted by morcmarc on July 12, 2010 - 8:18am

The plugin itself is very lightweight, only a few rows of code. There are two major “functions” which make everything alive: the initialization part sets the timer of the JavaScript engine to a specified frame rate; you can change this value by passing the frameRate variable to the plugin at instantiation. In the next step the plugin binds the mouse movement event to the parent object. The naming may be a little misleading, but it’s trying to say to which object the floating box should be bound to. There is another variable I would like to clarify: the stage. Usually the parent and the stage are the same. But if you want your box float in a different “co-ordinate system” other than the parent’s you have the possibility to do so, just provide a new stage. Back to the mouse event. When the event occurs, the code checks the position of the mouse within the parent object (so NOT the absolute coordinates).

CentreIt

Submitted by James Studdart on February 25, 2010 - 7:02am

CenterIt is great for popup divs.

It takes into consideration margins, padding and the size of its child elements
no matter if it is an image or another div.
Unlike nearly all other plugins that help with this, when you resize, or scroll
down the page the popup will stay in the centre of the browser window (excluding IE6 due to insufficient CSS support).

Example

To display an element using CenterIt use the following:

$('#popup').CenterIt();

Implementation

CenterIt can be applied to any elements.

There are two properties, as below:

ignorechildren: if set to false it will look for the biggest VISIBLE child element and use that to help centralise the popup.
This is down so it is possible to use the popup to display a popup image rotator or gallery, you can then easily change the image shown and the other div wrapper with be able to resize itself to suit the current content shown.

jQuery Floatbox

Submitted by odranoel on December 28, 2008 - 10:59pm

This plugin creates by default a floating div in the center of the page using half of the user window size for its width(height is not limited), uses a black background div as well(with opacity), the content of the floating box is the only mandatory parameter, but all others parameter can be passed as well(such as the background and floating box css configuration), the floating box is fixed in the middle of the screen. A link with a class named "close-box" is added in the floating box, this link is responsable for closing(hiding) the floating box.

It supports simple ajax request(post and get) that inserts html content into the floatbox when using the ajax parameter in options.

Options properties:
bg: the background HTML id, default is "floatbox-background"
box: the floating box HTML id, default is "floatbox-box"
content: The floating box HTML content, no default value(mandatory)