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.

float


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.

Floaty - Youtube Float embeder

Submitted by tohidgolkar on January 19, 2010 - 10:59am

Floaty

ver 1.0
Jan 2010

Just put the youtube videos links.

Features:

  • Display the thumbnail of video in 3 versions
  • Display the thumbnail of video in 2 size | Small and Big
  • Embed the videos in the Float box
  • Player close button
  • Customizable size and color of video player

jQuery Floating Message

Submitted by sideroad on December 30, 2009 - 9:54am

jQuery Floating Message Plugin is for display easy messages.

This plugin is provided under the following MIT license.

Requires jQuery , jQuery UI.

Supported Browser : IE 7.x , IE 8.x , Firefox 3.x , Google Chrome2.x

Bugs : Animation bug was occured when customize position. occur browsers are IE 7.x , IE 8.x , Google Chrome2.x

Masonry

Submitted by desandro on December 6, 2009 - 9:41pm

NOTE 19 May 2010 jQuery Plugins will no longer have the latest release of the Masonry plugin. Please refer to the jQuery Masonry homepage for latest documentation, releases, and demos. jQuery Masonry repository on GitHub.

Masonry is a layout plugin for jQuery. Think of it as the flip side of CSS floats. Whereas floating arranges elements horizontally then vertically, Masonry arranges elements vertically then horizontally according to a grid. The result minimizes vertical gaps between elements of varying height, just like a mason fitting stones in a wall.

Minimum recommended configuration

Configuring Masonry is fairly easy. Simply attach the .masonry() method to the wrapping container element in your jQuery script. Depending on the layout, you'll most likely need to specify one option.

jQSlickWrap

Submitted by jasonwyatt on November 20, 2009 - 2:54am

Why would I need this?

If you've ever felt the need to wrap stuff around an irregularly-shaped image using CSS's float, you may have been somewhat disappointed to find out that it's forced to wrap around the image's bounding box, rather than the actual contents of the image.

What's the best part?

It's really easy to use! Check out some of the examples for ideas...

Floating header plugin

Submitted by bysse on July 6, 2009 - 6:58am

This plugin makes sure the THEAD of a table always is visible. This is done by cloning the THEAD element and displaying it on top of the table when the original header is outside the viewport.

The plugin is tested on: FF, Chrome, Opera, IE 6, IE 7/8

Usage

Example usage of the plugin.

jQuery("#table").floatHeader(); 

Flattr.

CSS Float

Submitted by samaxes on March 1, 2009 - 10:39pm

The CSS Float plugin is capable of detecting floating errors and adding a border to elements which should be cleared - but aren't.

Number formatter

Submitted by hugo.hideki on January 29, 2009 - 11:56pm

jQuery plugin to format numbers using any number of precision digits, with thousands and decimal separators customizable.

  // Input
  <input type="text" class="numeric" value="" />
  // Brazilian currency format
  $(".numeric").number_format({precision: 2, decimal: ',', thousands: '.'});

  /* Results: number are formatted as they are typed
  123,45
  1.234,56*/

  // Changing precision to 5 decimal digits
  $(".numeric").number_format({precision: 5});

  /* Results: number are formatted as they are typed
  1,234.56789
  0.12345 */

  // Formatting any number
  $.number_format(12345, {precision: 2});

  /* Result: 123.45 */

  // Only positive numbers
  $.number_format(-789, {allow_negative: false});

  /* Result: 7.89 */

  // No precision digits
  $.number_format(123456, {precision: 0});

  /* Result: 123,456 */

fluwi

Submitted by qulys on November 25, 2008 - 7:40am

Small plugin that:
- takes a div(or any other element) and for specified element class resizes all elements so that they fit to container.
For example:
We have a variable width ul (eg:ul with id = mydiv)
and this ul has a lot of floating(eg:left) li's with a width of lets say 100px.
Normaly if the size of container is let's say 478px, on a row there will be 4 li's(4*100 = 400). It remains a space of 78 pixels width that is empty.
To fill that empty space just resize all li's to have a new width (eg: 478/4).

That's it.
Just include the plugin code in the page an call'it like this:

//The plugin code:

(function($){
$.fn.extend({
fluwi: function(opt){
var variate = ((opt.variate!= undefined)?opt.variate:0);
var contWidth = this.outerWidth();
var boxWidth = opt.minWidth;
var counted = Math.floor(contWidth/boxWidth);
var extra = contWidth-boxWidth*counted;
var eachOne = extra/counted;