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.

div


Collapser

Submitted by vaakash on August 8, 2010 - 2:34am

Jquery collapser is a multi purpose collapser plugin made for expanding and collapsing elements. Can create a accordion, list collapser using this plugin.

Features

  • Very light-weight plugin, fast and simple.
  • Can collapse any element within an document.
  • Can add seperate classes for expanding and collapsing.
  • Customized targeting elements.
  • Callback functions.
  • Predetection of collapsed elements.
  • Can create accordion, list collapsers etc by adding a single additional line.
  • Cross browser supported.

leobox plugin 1.0

Submitted by lmajowka on July 18, 2010 - 2:21pm

Easy and simple div box absoluted centered on the screen with transparent gray background
cross-browser compatibility even for IE6

simple use:

$('selector').openBox();
$('selector').closeBox();

Efecto Nube de Imagen

Submitted by fstnando on June 14, 2010 - 3:26pm

Efecto de Nube sobre un div con imagen de fondo.

Ejemplo de uso:

<div id='elemento' style='position:absolute;width:100px;height:100px;top:200px;left:200px;background:url(/media/img/bestdjs.jpg)'></div>

<script>
    Nube.tam=10;
    nube=new Nube('elemento');
    nube.incradio=0.1;
    nube.incangulo=0.26;
</script>

Center Plugin 1.0 - Easy cross-browser centering a div!

Submitted by disputable on May 25, 2010 - 3:55am

Features

  • Easy centering a div horizontal and vertical
  • Works in FF, IE 6+, Safari, Chrome, ...
  • Supports position absolute, relative, static, fixed
  • Not much CSS required

Why this plugin?

There are two cross-browser compatible CSS methods at the moment:

Method one is to center the div using position:absolute, height:400px; top:50%; margin-top:-200px;
But try to scale the window to a size which is smaller than your div - you won't be able to see the whole content.

Method two is using a floater with height:50%; margin-bottom:-200px; etc.
I personally don't like this method, i hate "unused" html in my templates.

All other methods like using display:table-cell are not cross-browser compatible.
So that's the reason why i really like this plugin ;)

div slideshow

Submitted by kevinresol on May 21, 2010 - 5:06am

While most slideshow plugins on the web are for <img> only, divSlideShow provides a more flexible slideshow for <div>, you can embed anything inside a <div> and make it a slideshow, such as images, text, flash... anything that you normally include in a webpage, with only one line of javascript call.

dFrame

Submitted by Nijikokun on May 17, 2010 - 5:20pm

dFrame turns divs into usable iFrames complete with form submitting and refreshing.

Simple collapsible panel

Submitted by darreningram on April 8, 2010 - 10:23am

A simple plugin to transform a div into a sliding collapsible container.
It also works with jQuery UI themes - so if you already have a theme in your web site then the panels will pick up on this and will be styled appropriately.

Usage

Create a container div with a class of 'collapsibleContainer'. Give the div a title attribute. The plugin will turn the div into a collapsible container using the title attribute within it's heading area.

<div class="collapsibleContainer" title="Example Collapsible Panel">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.... (you get the idea!) </p>
</div>


To fire the plugin, simply select all the divs with class collapsibleContainer and call the collapsiblePanel function.

jQuery Center Elements

Submitted by molokoloco on February 13, 2010 - 1:05pm

Plugin to center an element into an other :

Wiki here : http://code.google.com/p/molokoloco-coding-project/wiki/MyJQueryPlugins

Usage :

$('#mainDiv').center();
$(window).bind('resize', function() {
    $('#mainDiv').center({transition:300});
});

jLoader - Preload your website.

Submitted by jsaade on February 12, 2010 - 5:18am

Used to preload any div(s), it displays an overlay until all the images and background images in the div are loaded. It can have optional arguments to display and customize a porogress bar and progress text.

This loader extends Gaya Design's QueryLoader? adds more functionality and control:

- supports custom arguments no need for external CSS

- can have several loaders/divs being loaded running at the same time not limited to only one

- if the div itself has a background-image or if it is an image it is now taken into consideration.

- resize when window is resized.

SingleEdit

Submitted by wbfsa@126.com on November 27, 2009 - 3:20pm

this is a open source editor base on Jquery plug-ins ,
Currently it support eight kinds of Editing mode,
and thirty-one kinds of Validation mode ,
perfect support for ajax,
all major browsers support.
example:

$(function() {
  $(".example").singleEdit({
        data: { textbox: "(click me please)"},
        main: [
              { id: "textbox", type: "textbox" }
                 ]
            });    
});

website: http://www.wbfsaworkstation.com.cn
download: http://code.google.com/p/singleedit