Plugins

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.

Plugins


1 year 21 weeks ago

A good way to have extra content or a navigation tool in your page!

This jquery component let you easly build a sliding panel where to insert any kind of content; it has builtin all the functionalities for managing menu lines and sub panels with accordion effect. It can get the content via ajax and therefore you can dynamically build it by passing DATA via request using the metadata attribute settable on the extruder container.

demo page:
http://pupunzi.com/#mb.components/mb.extruder/extruder.html

download page:
http://pupunzi.open-lab.com/mb-jquery-components/jquery-mb-extruder/

Dependencies:

  • jquery.hoverIntent.js
  • jquery.metaData.js
  • jquery.mb.flipText.js (soon available as stand alone)
< < < < < < <
1 year 21 weeks ago

This is a powerful component to build easily a multilevel tree menu or a contextual menu (right click) in an intuitive way!

Dependencies:

none

here is the js call:

$(”.myMenu”).buildMenu(
{
  template:”menuVoices.jsp”,
  additionalData:”",
  menuWidth:200,
  openOnRight:false,
  menuSelector: “.menuContainer”,
  iconPath:”ico/”,
  hasImages:true,
  fadeInTime:200,
  fadeOutTime:100,
  adjustLeft:2,
  adjustTop:10,
  opacity:.95,
  shadow:true,
  closeOnMouseOut:true,
  closeAfter:500,
  minZindex:"auto", // or number
  hoverIntent:0, //if you use jquery.hoverIntent.js set this to time in milliseconds; 0= false;

});

or you can call it as contextual menu:


$(document).buildContextualMenu(
{
template:”menuVoices.html”,
menuWidth:200,
overflow:2,
menuSelector: “.menuContainer”,
iconPath:”ico/”,
hasImages:false,
fadeInTime:200,
fadeOutTime:100,
adjustLeft:0,
adjustTop:0,

< < <
2 weeks 6 days ago

AJAX-ZOOM player is a powerful single image zoom & pan viewer with optional gallery extension. It features over 300 other options and can be easily integrated into any website, eCommerce solution or CMS.

AJAX-ZOOM uses image tiles to quickly generate a portion of the zoomed image (similar to Google Maps).

In a special 360° rotation mode it can also be used as object spinner.

Links
Examples
Magento (demo store)
xt:Commerce (xtcModified demo store)
VR Objects 360° (3D Spin & Zoom)
Oxid (demo store)

< < < < < < < < < < <
1 year 28 weeks ago

Amazon style image and title scroller with jQuery.

More script and css style: www.htmldrive.net

< < < < <
3 years 46 weeks ago

Step Carousel Viewer displays images or even rich HTML by side scrolling them left or right. Users can step to any specific content on demand, or browse the gallery sequentially by stepping through x number of contents each time. A smooth sliding animation is used to transition between steps. The contents for the Step Carousel Viewer can be defined either directly inline on the page, or via Ajax and extracted from an external file instead. In both cases, the contents are simply DIVs with a shared CSS class name that wrap around each individual content.

< < <
1 year 20 weeks ago

wdContextMenu is is very lightweight jquery plugin for right click menu.

  • Item specific. Context menu for specific area
  • Dynamical disabled menus/items
<
1 year 21 weeks ago

A Radial Menu, also known as a Pie Menu, is a circular contextual menu. The interface is a pretty cool and intuitive one and is now easy to implement on your site!

Radial menu's are powerful primarily because the location of the menu items can be easily memorized by novice users, as well as experienced ones. The interface effectively engages users in a way in which they are capable of placing directional and gestural associations with particular actions; think muscle memory.

< < <
1 year 22 weeks ago

A jQuery content rotator plugin (tested on 1.3 & 1.4)

Features:

  • Automatically (optional) adds navigation between images/content
  • HTML of the previous and next tags can be passed as parameters to the plugin
  • Automatically (optional) transitions between images/content
  • Duration of image/content display and transition speed can be passed as parameters to the plugin
  • Called on an element containing elements that will be rotated i.e. $('.containing_element).sideswap();
  • More documentation coming soon

< < < <
1 year 28 weeks ago

Display on a certain number of characters of text, and trigger the display of the full text with an automatically appended "Read More" link.

Customizable: number of characters, ... ellipses text, and "read more" link

< <
1 year 28 weeks ago

Disallows resubmission of ajax requests by disabling the submitting button and re-enabling upon response.

Customizable: Disabled class, attribute, and value

< < <
1 year 18 weeks ago

WiseJS - a wise tool for web developers

The components of WiseJS allow to embed any javascripts components in ASP.NET, including jQuery Plugins, jQuery UI, and more, includes powerful assistants to access different database, creation of events/actions on the server side and/or client side. Allows the simultaneous use of C # or VB and javascript.
Note: When viewing the full demo for the first time, be patient because the demo needs to load a set of full libraries; jQuery, jQuery UI, ExtJS, Dojo, DHTMLX ...

WiseJS´s components have two main goals:

A - The first scenario envisages the use of any component javascript. Allows it to be integrated into ASP.NET, using components from WiseJS specially created for this purpose.
These components contain a powerful assitant, which facilitates the integration, such as easy access to various databases, creation of events/actions to be processed on the server side, ...

< < < < < < < < <
2 years 1 week ago

jQuery Menu Style 1

jQuery Menu Features

  • Full cross-browser compatibility
  • Fully accessible even when javascript is turned off, as a pure css menu
  • Search engines optimized
  • Clear unordered list (LI and UL HTML tags) structure of jQuery menu
  • Easy to setup and update
  • Fantastic animation and transition effects
  • Multiple pre-desinded color schemes
  • Completely customizable styling with CSS
  • Powered by jQuery
  • Extremely small - 3kb uncompressed

Color Themes:
(White Smoke) jQuery Menu
(Dim Gray) jQuery Menu
(Black) jQuery Menu

< < < < <
2 years 4 weeks ago

Visual Lightbox is a jQuery plugin for lightbox-style photo galleries and slideshows.

Visual jQuery LightBox Features

  • Slideshow with autostart option
  • Thumbnail and code generator for Windows & MAC
  • XHTML compliant
  • Zoom effect with overlay shadow
  • Rounded corners of overlay window
  • Large images fit to browser window
  • Overlay floating - image floats on scroll staying always visiable
  • Smooth cross-fade transition & animation
  • Image preloading after the page is loaded
  • Keyboard navigation
  • Graceful degradation when javascript is not available
  • A lot of nice gallery themes
< < < < < < < < < <
1 year 21 weeks ago

This is my next jQuery plugin which can help you to create image viewing in your site more useful.
You can download this plugin only on 4coder.info

< < <
1 year 43 weeks ago

The "wTooltip" is a lightweight, flexible tooltip that is made to be easily customized. The default behavior is the conversion of the title attribute into the tooltip, which makes quick creation of multiple tooltips on any page a snap.

There are many more advanced options, including callBefore, and callAfter parameters, which allow custom code to be integrated easily with the standard behavior. It also has an easy interface to allow the tooltip to be completely styled at the user's discretion.

The complete documentation is available at http://wayfarerweb.com/wtooltip.php

< <
2 years 49 weeks ago

This plugin allows you to convert parts of the page into editable areas, just click on them and when you finish editing click outside. If you convert an inline element (h1...h5, p ) with this script, the line breaks will be disabled.

< < < < < <
1 year 35 weeks ago

This is a jquery special event implementation of a drag event model. It is intended for use by developers who don't need one bloated script full of idiot-proof logic and a million different options. For people who plan a drag interaction model and decide how to set up pages and position elements, and don't need a script to figure that out...

< < <
1 year 35 weeks ago

This plugin leverages the special event api, to add bind-able drop behavior events. This plugin is designed to work exclusively with $.event.special.drag, actually, it doesn't work without it.

< < <
3 years 24 weeks ago

A new and improved special event implementation Brian Cherne's "hoverIntent" plugin (http://plugins.jquery.com/project/hoverIntent).

< <
3 years 24 weeks ago

A smaller, simplified interpretation of Brandon Aaron's special event "Mouse Wheel Extension" (http://plugins.jquery.com/project/mousewheel).

< <
2 years 44 weeks ago

Download
Download from the Google Code page.

Description
Highlight is a simple Jquery plugin that highlights text phrases. It does so by wrapping one or multiple phrases of your choosing with a span with the class name highlight.

Usage

$('p').highlight('stockholm');

Works with
IE6,IE7,IE8
FF1,FF2,FF3
Safari3
Chrome1
Opera9

<
2 years 44 weeks ago

Download
Download from the Google Code page.

Description
Limit is a plugin for the javascript framework Jquery that limits the number of characters that can be entered in a textarea or input field. The plugin can also report the number of characters left before the user reaches the length limit.

Usage

You have <span id="charsLeft"></span> chars left.
<textarea id="myTextarea"></textarea>
$('#myTextarea').limit('140','#charsLeft');

Works with
IE6,IE7,IE8
FF1,FF2,FF3
Safari3
Chrome1
Opera9

<
2 years 27 weeks ago

Links which use the pound(#) symbol to anchor to another area of the page are generally used for navigating large blocks of text. This plugin creates a simple animation for anchor links by quickly scrolling the page to the area where the anchor is at rather than just jumping right to the anchor like normal.

http://www.ooeygui.net/

< < <
2 years 50 weeks ago

Download
Download from Google Code

Description
It is very easy to use Tabify. All you need to do is to create an ul-list, fill it with a couple of li-elements with containing links (tabs) and create a couple of matching content divs. In the example below notice how the href-attribute on the link elements corresponds to the content div IDs.

Usage

$('ul').tabify();

<ul id="menu">
<li class="active"><a href="#contentHome">Home</a></li>
<li><a href="#contentGuestbook">Guestbook</a></li>
<li><a href="#contentLinks">Links</a></li>
</ul>
<div id="contentHome">Content for Home</div>
<div id="contentGuestbook">My guestbook</div>
<div id="contentLinks">Links</div></pre>

// All divs but #contentHome will be hidden since the menu option 'Home' has the class name 'active.

< < <
2 years 19 weeks ago

This plugin for jQuery will allow you to associate an edit field with a pop-up list of matching items, which are updated as the user types. Matching data can be obtained by Ajax queries or by matches against a static in-memory array of data elements. Multiple options and events make this plugin adaptable to your needs.

<
3 years 3 weeks ago

This is a useful plug in to build full featured and full skinnable containers.
The container can be set to draggable, resizable, collapsable and minimizable.

dependencies:

ui.core.js
ui.draggable.js
ui.resizable.js

How does it work:

here is the js call:

$(function(){
$(".container").buildContainers();
});

here is the code for each container:

<div class="container stikynote draggable resizable" style="width:400px; top:270px;left:170px" buttons="i,m,c">
<table cellpadding="0" cellspacing="0" class="containerTable">
<tr class="top">
<td class="no"> </td>
<td class="n"><a href="">Stiky note</a></td>
<td class="ne">&nbsp;</td>
</tr>
<tr class="middle">
<td class="o"> </td>
<td class="c" >
[your content goes here...]
</td>
<td class="e"> </td>
</tr>
<tr class="bottom">
<td class="so"> </td>
<td class="s"></td>
<td class="se"> </td>
</tr>
</table>
</div>
< < <
1 year 22 weeks ago

Here it is!
Finally I realized the DIV box model of the (mb)Containers!

This is a useful plug in to build full featured and fully skinnable containers.
The container can be set to draggable, resizable, collapsable and minimizable.

demo and doc: http://pupunzi.wordpress.com/mb-jquery-components/mb-containerplus/

dependencies:

ui.core.js
ui.draggable.js
ui.resizable.js
optional: jQuery.metadata.js

How does it work:

here is the js call:

$(function(){
$(”.containerPlus”).buildContainers({
containment:”document”,
elementsPath:”elements/”
});
});

here is the code for each container:

Titolo container 1

< < < < < <
2 years 9 weeks ago

jquery.mb.flipText is a simple plug-in to turn your text vertically in both direction: top-bottom or bottom-top.Wasn't that something you would have done on your HTML pages?

< < < <
1 year 22 weeks ago

A full featured image gallery, with nav toolbar, thumbnails, autosize frame.

DEPENDENCIES:
none

HOW DOES IT WORK:

here is the js call:

$(function(){
$('#g1').mbGallery({
         maskBgnd:'#ccc',
         overlayOpacity:.9,
         startFrom: 5
      })
});

here is the code for each image:

<div  id="g1" class="galleryCont">
    <a class="imgThumb" href="gallery1/LR/01.jpg"></a>
    <a class="imgFull" href="gallery1/HR/01.jpg"></a>
    <div class="imgDesc">Description 01</div>
</div>

Params

* containment:“body”, (string) the containment element of the galery
* cssURL:“css/”, (string) the path to css
* skin:“white”, (string) the name of the css file to invoke
* overlayBackground:“#333”, (string) the exhadecimal value of the overlay color
* overlayOpacity:.5 (int) the opacity value of the overlay

< < < < <
2 years 18 weeks ago

Slide your images into a mask!

Build your own png mask and choose your images to slide inside!

Releases:

1.0 first release

dependencies:

jquery.js (1.2 -> 1.3.1)

How does it work:

here is the js call:

$(function(){
$("#g1").mbMaskGallery({
type:"normal",
galleryMask:"mask/monitor.png",
galleryColor:"black",
galleryLoader:"loader/loader_black.gif",
loaderOpacity:.3,
loader:false,
fadeTime: 200,
slideTimer: 6000
});
})

here is the code for each container:

<div id="g1" class="galleryCont" >
<img src="images/3.jpg">
<img src="images/2.jpg" url="mbMaskedGallery1.html">
<img src="images/5.jpg">
<img src="images/4.jpg">
<img src="images/6.jpg">
<img src="images/7.jpg">
<mg src="images/8.jpg">
</div>

Params:

type axcept random or normal;

< < < <