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 28 weeks ago

Amazon style image and title scroller with jQuery.

More script and css style: www.htmldrive.net

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

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

A photogallery for extralarge images with navigator.
You can drag your extralarge image in the display by the navigator or the image itself.
Enjoy yourself into images!

dependencies:

jquery.js(1.3)
ui.core.js (1.6rc5)
ui.draggable.js(1.6rc5)

How does it work:

here is the js call:

$(function(){
   $("#navArea").imageNavigator( {
          areaWidth: 700,
          areaHeight:500,
          draggerStyle:"1px dotted red",
          navOpacity:.8
    })
})

here is the code for each image:

<div id="navArea">
<div imageUrl="DSC00844.JPG" navPosition="BR" navWidth="100" style="display:none;" class="imagesContainer">
<span class="title">zuccheriera</span>
<div class="description"><STRONG>description1</STRONG></div>
</div>
[...]
</div>

Params:

areaWidth and areaHeight are the width and the height of the display;

< < < < <
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;

< < < <
1 year 40 weeks ago

Do you want to show a movie from youtube, vimeo, flickr, livestream, ustream?
Or you want to have your audiopodcast (mp3 file) on your web page?
Nothing easier with mb.mediaEmbedder!

see the demo: http://pupunzi.com/#mb.components/mb.mediaEmbedder/mediaEmbedder.html

< <
2 years 16 weeks ago

Need to show many elements in constricted space?

1, 2, 3, 15...slide how many box you want with a simple and configurable navigation toolbar.

here is the js call:

$("#myScroll").mbScrollable({
   width:700,
   elementsInPage:1,
   elementMargin:2,
   shadow:"#999 2px 2px 2px",
   height:"auto",
   controls:"#controls",
   slideTimer:600,
   autoscroll:true,
   scrollTimer:4000
});

here is the code for the dom elements:

  <div id="myScroll">
    <div class="scrollEl" style="background-color:#9999ff">1</div>
    <div class="scrollEl" style="background-color:#cc9900">2</div>
    <div class="scrollEl" style="background-color:#660066">3</div>
  </div>

  <div id="controls">
    <div class="first">first</div><div class="prev">prev</div>
    <div class="next">next</div><div class="last">last</div>
    <div class="pageIndex"></div>
    <div class="start">start</div><div class="stop">stop</div>
  </div>

< < < <
1 year 34 weeks ago

Use this chromeless player to show your favourite Youtube movies on your page!
Or easily transform your Youtube movie into a HTML background!

This jquery component let you have a chromeless, customizable player for your favorite YT movies. It can be used as background of your HTML page.

< < < <
4 years 29 weeks ago

Accessible News Slider is a component for viewing news headlines and photos, which is built to be accessible according to WCAG 1.0.

< < < < <
2 years 51 weeks ago

Activebar2 is a crossbrowser information bar mimicking the look and feel of the widely spread bars used in modern browsers. It provides an easy and unobtrusive way of communicating all sorts of messages to your users. Or to provide help by displaying tips and usage informations.

< < < <
2 years 36 weeks ago

jQuery AddThis Plugin

This is a jQuery implementation of the AddThis widget that is available from AddThis. Being the first version, this just uses the basic options that allow you to put this on your site.

Usage:

HTML

<a class="addthis"></a>

JS

$.addthis();
-or-
$.addthis('username');
where username is your AddThis username. Useful for tracking statistics.

< <
4 years 29 weeks ago

Upload files via an individual file type of input element without uploading extra unwanted form fields

< < < <
2 years 31 weeks ago

ajaxPager is a jQuery UI widget plugin for building javascript pagers quickly and easily. Each page’s content can be from either a ajax request, a url (iframe), string, element inside the pager, or element outside the pager.

< < < <
2 years 11 weeks ago

Hi Dear,
Mohammad Ebrahim Amini Faravaghi
Thank You For Visit.
--Best Regards

< < < < < < < < < < < < < < < < < < < < <
3 years 19 weeks ago

anchorCheck is a lightweight checkbox replacement control that does not rely on an actual checkbox being rendered first. The control accepts any anchor tag and simply extends it with checkbox-like behavior. The download contains a test page which easily demonstrates implementing anchorCheck.

<
1 year 35 weeks ago

jQuery.splitter()

jQuery.splitter() plugin implements a two-pane resizable animated window, using existing DIV elements for layout.
For more details and demo visit: http://krikus.com/js/splitter

< < < <
1 year 43 weeks ago

Allows you to easily add and serialize annotations on a div though click handlers.

< <
4 years 30 weeks ago

This rudimentary color picker plugin was designed for use in small UIs. It does not use image files and does nothing fancy. It creates a number of small elements (normally SPANs) which, when clicked, activate a callback function, which is typically used to pass on the selected color to some other UI element(s) (e.g. to change a background, text, or border color). The list of colors it uses can of course be customized and the layout of the color list itself is somewhat configurable.

< <
1 year 42 weeks ago

The Any+Time™ JavaScript Library includes a highly-customizable, jQuery-compatible datepicker/ timepicker (calendar/ clock widget) and a powerful Date/String parse/format utility. Use it to create a date/time picker with advanced features and options not found in other calendar/clock widgets:

DATE/TIME OPTIONS:

* 12-hour or 24-hour clock
* custom date/time format (countless possibilities, including JSON and XML)
* date-only, time-only, or specific fields!
* date/time range limits
* era-selection (BCE/CE, BC/AD, etc.)
* start week on any day (Sunday, Monday, etc.)
* custom base for 2-digit years (1900, 2000, etc.)
* UTC offsets/time zones

STYLING OPTIONS:

* custom labels/languages
* custom CSS styles
* jQuery UI Theming
* jQuery UI Theme Switcher
* jQuery ThemeRoller
* pop-up or always-present picker
* visible or hidden field

PROGRAMMER-FRIENDLY:

* easy to implement with only one statement
* easy AJAX validation
* easy Date/String conversion, including JSON and XML
* create multiple pickers at once
* easy removal
* easy to extend

USABILITY FEATURES:

* em-based relative-size
* single-click value selection
* WAI-ARIA 1.0 keyboard accessibility
* double-click select-and-dismiss

Use AnyTime.Converter to parse a String into a Date, or convert a Date to a String. Many format options are supported—in fact, most of the fields specified by the MySQL DATE_FORMAT() function!

<
2 years 27 weeks ago

AP Tags is a simple to use tagging component that adds the ability to quickly create tags using a single text box. This component is very similar to the tagging component used in WordPress, but is a completely custom component. Simply put, you have a text box, you type one or more words, press Enter, and the tag appears below, and in a hidden form field.

Here is a simple example:

<form name="frm" method="post">
   <input type="text" name="tagEntry" id="tagEntry" value="" />
   <input type="submit" name="btnSubmit" id="btnSubmit" value="Submit" />
</form>

<script language="javascript">
   $(document).ready(function() {
      $('#tagEntry').aptags();
   });
</script>

< <
3 years 30 weeks ago

A progressive enhancement to select multiple form elements. It provides a simpler alternative with the following advantages:

  • Easier for users to understand and interact with than regular select multiple form elements. Users know how to interact with it sans instruction.
  • Doesn't require user to Ctrl-Click or Shift-Click multiple elements. Instead users of your form can add or remove elements individually, without risk of losing those that have already been selected.
  • Selected elements are always visible (within the confines of your interface) while unselected elements are always hidden (within a regular select).
  • Unlike regular select multiple option elements, those on asmSelect are optionally sortable with drag and drop (this part requires jQuery UI).
  • asmSelect hides, maintains and updates the original select multiple so that no changes are required to existing code.
  • If a user does not have javascript, then of course the regular select multiple form element is used instead.
  • If the original select multiple form element is modified by some other jQuery or javascript code, the change will be reflected in the asmSelect as well.

Please see full information at http://code.google.com/p/jquery-asmselect/

Companion article at: http://www.ryancramer.com/journal/entries/select_multiple/

< < <
3 years 8 weeks ago

It converts it into the Aso language.

syousai -> yousai
mizou -> mizouyu
hinpan -> hanzatsu

<
2 years 25 weeks ago

Autocomplete an input field to enable users quickly finding and selecting some value, leveraging searching and filtering.

By giving an autocompleted field focus or entering something into it, the plugin starts searching for matching entries and displays a list of values to choose from. By entering more characters, the user can filter down the list to better matches.

This can be used to enter previous selected values, eg. for tags, to complete an address, eg. enter a city name and get the zip code, or maybe enter email addresses from an addressbook.

Both local and remote data can be used: Local is good for small datasets (like an addressbook with 50 entries), remote is necessary for big datasets, like a database with hundreds or millions of entries to select from.

Support

< < <
3 years 30 weeks ago

Easily build your own simple or complex autocomplete systems, or use standalone.

< < <
3 years 30 weeks ago

A tokenizing (tagging) autocompleter built with Autokit. Designed to resemble Facebook's own autocompleter.

< < <
2 years 31 weeks ago

Code snippets posted online are a great source of knowledge and a simple way to share experience and to reuse code. As developers we always look to see if there is a 'code example' which we can modify to our needs. As bloggers we find code snippets very useful to get our information out to the readers.

AutoSnippet automatically generates the code snippet from the source code (HTML, CSS and JavaScript). No more cumbersome repetitive tasks and no more inconsistencies between example and real code.

Here is how simple it is:

<!-- this is the source div - we write the src only here -->
       <div name="autosnippet:name_of_target_div:[yes/no -use Syntax Highlighter(default=no) ]">
            HTML and javascript goes here
       </div>
      
       <!-- this is the target div - the snippet is automatically generated here -->
       <div name="name_of_target_div"> &lt;/div>

Useful for Bloggers and code sites.

< < < < < <