Default Value

pauljamescampbell — Sat, 19 Apr 2008 10:25:12 -0700

A simple user enhancement for your HTML forms

Default value plug-in has been developed as a progressive enhancement for input and textfield elements. Allowing an initial value to appear within the form element, acting as a prompt for the user. This value is removed upon element focus and returned (on blur) if an alternate value has not been entered the user.

Although the plug-in does allow manipulation of multiple elements in one call, a basic application can be implemented within a simple one line command:

jQuery(function($) {
    $("#input-one").defaultvalue("Your text");
})

For full API information visit Campbells Digital Soup

Facelist

iantearle — Tue, 08 Jul 2008 12:02:09 -0700

Facelist is an input field capable of accepting multiple items from an autocomplete list similar to Facebook mail recipient field.
Facelist allows you to delete items, select, and post as an array.
Facelist needs some work, for example an extra hidden field is needed for ID's not just names of the array.
Please download and post back fixes if you can!

Download here: http://blog.iantearle.com/expanse/uploads/user_1215514908_facelist.zip

designMode

troxy — Sun, 30 Dec 2007 00:22:15 -0800

Cross-browser designMode

What is designMode?

Almost all major browsers offer a de facto support for rich text editing, which makes an entire DOM document editable. It was originally developed for Internet Explorer, however, later implementations by other browsers are proven to be surprisingly compatible and stable. The functions in this plugin can help you turn any frame, iframe or window into a cross-browser wysiwyg editor.

This technique can be referred to as designMode, because it's triggered by setting the designMode property of a DOM document to 'on' using JavaScript. The content can be modified by a set of commands using the execCommand() function. Mozilla provides a good specification of avalible commands.

What this plugin does

There are some browser differences related to designMode. This plugin handles such stuff in a cross-browser way, combined with the flexibility of jQuery.

Although complete wysiwyg editors require lots of work, this plugin provides the very basic functionality to be used as a part of something more advanced.

At least the following browsers have full or limited support for designMode:

Internet Explorer 6+
Firefox 1.5+
Safari 1.3+
Opera 9+

There are three jQuery functions to be used on any frame, iframe or window:

contentDocument() - access the DOM document of an element.
designMode() - set the designMode property. Chaining supported.
execCommand() - execute designMode commands. Chaining supported.

Examples

In these examples, #foo is either a frame, iframe or window (created by window.open for instance).

$(window).designMode('on') //Activate designMode of current page $('#foo').designMode(); //Mode is optional, defaults to 'on' $('#foo').execCommand('formatblock', '<p>'); //Execute command, with optional parameter $('#foo').designMode().execCommand('bold'); //Chaining: Activate + execute var doc = $('#foo').contentDocument(); //Access the DOM document

jQuery Horizon Menu Plugin

landerog — Fri, 25 Apr 2008 08:26:46 -0700

A little solution for menus and paging for jQuery.

Horizon Menu is a plugin for jQuery. In any place of our web proyect, when we have to put a horizontal menu limited by width with to many options, the solution could be this plugin. The plugin alows movements horinzontaly using mouse events like scroll, mouseover and mousedown.
View demo page here.

jQuery LinkedSelects

vision2 — Thu, 27 Sep 2007 00:28:24 -0700

jQuery LinkedSelects is a simple plugin to cascade multiple select drop down lists. Each successive select list is filled based on the value selected in the previous select.

Jquery xhtml() : jquery extension to get valid xhtml code with IE browser (innerHTML fix)

aladdin — Wed, 26 Dec 2007 13:17:25 -0800

Sometimes you need to use jquery html() methode to get the html code from an element to manipulate it as XML string.

the problem is that IE generate non valid xhtml (no attribute quotes, malformed lists ...etc) .

with this extension I tried to fix this using the minimum javascript code to make the function as efficient as possible.

no real xhtml validation is done, the html code is only modified when IE navigator is detected.

Downloads are available here

jQuery Animated Innerfade, an extension to Innerfade

Arnault — Thu, 01 Nov 2007 09:17:25 -0700

An animated slide show based on the work of Torsten Baldes : Innerfade, with additional functions :

slide effect on large images
’prev’, ’pause’, ’next’ functions
an optional background frame
a title panel

Project Home page

jQuery Right Click Plugin

aksival — Wed, 14 May 2008 02:13:11 -0700

This plugin enables you to use jQuery to attach events triggered by the right mouse button. Three right-click events are supported: click, mouseup, and mousedown. There is also a built-in method to disable browser context menus.

Live Ajax Search

powerbuoy — Tue, 20 May 2008 10:56:48 -0700

Use this plug-in on an input[type="text"] and it will display search-results based on the input's contents on key-up.

Dylans Autocomplete

Dylan Verheul — Tue, 11 Sep 2007 10:07:12 -0700

A full featured autocompleter that's easy to use. It uses caching to produce lightning speeds and to limit server requests.

A brief history of autocomplete plugins:

I wrote an original autocomplete plugin.
Several people used it, modified it, fixed bugs, made it better. Notably Dan G. Switzer.
Jörn Zaffaerer did a complete rewrite, which depends on other jQuery plugins, and has a lot of added functionality.
I took Dan's version of my original and did some slight modifications of my own. This is the version we are talking about here.

layout helper plugin for text wrapping around image shapes

MSE-iT — Sun, 20 Jul 2008 08:46:30 -0700

Layout helpers plugin helps to create advanced layout in web design. Currently it provides a sandbag div technique for text wrapping around images.

I provide some demos on: http://www.maierhofer.de/LayoutHelpersDemo.htm

jQuery Countdown Plugin

Felix Ding — Fri, 14 Mar 2008 04:08:03 -0700

This is a simple countdown plugin which displays a countdown effect.
The usage could't be simpler, just one line. For example:

$('span.countdown').countdown({seconds: 30});

You can add an option called 'callback', like this:

$('span.countdown').countdown({seconds: 30, callback: 'hello_world()'});

Then the function 'hello_world()' will be excuted when time out.

jSize - a window slider/resizer wonder

ktan — Wed, 30 Apr 2008 02:19:48 -0700

Gone were the days of framesets during the late 90s. Usability studies then showed that frames (not iframe) are detremental. The Web 2.0 platform has made the frames concept emerge once again in another form to simulate interfaces that are found in desktop software. As a frequent Yahoo! mail or even Live mail user, you probably have noticed that you can resize reading panels by dragging the sliders/helpers. In this era, we are now talking about divs not frames and making them behave does take quite a bit of effort in your CSS and JavaScripting.

I am approaching this problem from a JavaScript perspective, the CSS to make it work is still daunting if you don't have a firm concept of it. Let's look at a illustration of what the example layout will be.

To make #v-slide and #h-slide work as a slider/resizer, just simply do this.

$("#v-slide").jSize({
type: 'left-right',
c1: '#left',
c2: '#right',
static: '#left'
});

$("#h-slide").jSize({
type: 'top-bottom',
c1: '#top',
c2: '#bottom',
static: '#top'
});

Let us look at the code above and see what it means.

type: (left-right | top-bottom) those are the two choices for your slider
c1: (jQuery css selectors) means the left container or the top container
c2: (jQuery css selectors) means the right container or the bottom container
static: (jQuery css selectors) the container that has min-width and max-width specified on their CSS (either c1 or c2).

Word of caution: min-width and max-width for your container plays an extremely important role to prevent the frames from breaking.

RTLTree

ehabinl — Mon, 02 Jun 2008 20:03:11 -0700

RTLTree is a jQuery plugin that construct a right to left tree for RTL languages like arabic

Reflect jQuery

personman — Sat, 11 Aug 2007 07:44:25 -0700

Based on reflection.js, but done in the jQuery style. Includes support for inline options for compatibility with reflection.js markup, but also handles options in the jQuery way.

Distill

gabor — Fri, 02 Nov 2007 02:38:38 -0700

If you need many event handlers there are several ways to accomplish this:
1. you can use $(node).click etc or attachEvent
2. you can use inline onclick= method
The first option can be really slow if you have a huge collection of buttons that need event handling, especially in IE, while the second option causes IE to leak and run out of memory. This is why we created JDistill, it's a small library that uses bubbling to attach event handlers to thousands of items in less than a millisecond. Distill is very easy to understand and use. It's a ultra light weight event dispatcher. To associate a node with an event, just put the object that handles the event for the node in the class attribute and prefix it with com_.

<button class='com_eventhandler'>click me</button>

The example node above can be connected to an event like this:

myhandlers.eventhandler.click = function(){...}

And it integrates perfectly with jQuery:

$.distill("click",myhandlers);

jQuery.Colors

Gilberto Saraiva — Fri, 09 May 2008 02:01:17 -0700

A easy way to handle HTML colors!

Create a color and manipulate then adding light or shadow, mixing it with other color, subtract o add a RGB value for it. You can do a lot of things.

Example:

  var Dark = $.tocolor("#ffa500");
  var Light = $.color(235, 235, 235);
  var GradLinkNormal = $.colorgrad(Light, Dark, 50);

With this code you create a gradient color array with 50 diferents colors.
My Projects page to see a good example (Look the background color):
http://slr.projects.pro.br/

More about the plugin at:
http://gsaraiva.projects.pro.br/?page_id=16

Actually you can access my site to see some results with jQuery and CSS manipulation.
http://gsaraiva.projects.pro.br/

Smart Lists

BenKeen — Tue, 25 Mar 2008 01:26:40 -0700

Smart Lists is a light-weight jQuery extension that lets you convert 'flat' HTML lists of information into categorized, paginated lists. In essence, it's a presentation layer for improving the readability of related information, without need of a database or server-side script.

The configurable options include:

Choice for the item hide/show effect (Blind, Fade/Appear, none)
Choice for changing page effect (Blind, Fade/Appear, none)
Control over speed at which effects occur
Number of items per page
Option to show/hide the number of items in each category
Complete control over CSS classes (to ensure compatibility with any webpage)
Downgrades gracefully (i.e. if JS not enabled)

jFade - color fader for jQuery

ktan — Tue, 01 Jul 2008 21:20:15 -0700

This plugin will easily allow you to do color transitions for text, background and borders for different events.

The API

trigger: the event that will fire color transition, uses the same events as bind in jQuery
property: can be 'background', 'borderColor' or 'color'
start: the starting color ie '336699'
end: the ending color ie '6699CC'
steps: the number of times to divide the color difference
duration: the transition speed

Default values

	$.fn.jFade.defaults = {
		trigger: "load",
		property: 'background',
		start: 'FFFFFF',
		end: '000000',
		steps: 5,
		duration: 30
	};

tableFilter

Daemach — Tue, 19 Jun 2007 15:08:59 -0700

Table filtering/sorting/paging on steroids. Multi-column sorting and filtering.

tableFilter allows you to do simple client-side pagination, as well as auto-filtering and auto-sorting on multiple columns simultaneously using ctrl-click. If jquery.cookies is present, it will remember custom settings automatically. tableFilter also supports plugins for added functionality such as automatic aggregation for columns of numeric data (sum/avg/min/max). All of this yours for the low, low price of $('table').tableFilter(); See site for details and demos.

Add To List

benrowe — Fri, 06 Jun 2008 11:11:04 -0700

Dynamically add a new option to a select list. A customised form (which you specific) is ajax submitted. A successful ajax return adds the new item to the select list.

Modalpreview

monc — Wed, 21 May 2008 09:20:59 -0700

Modalpreview is a lightweight jQuery script that makes it possible to preview the textarea content in a modal window before submitting the form.

Modalpreview automatically adds a preview button next to the submit button that brings up a modal window containing the textarea content, without reloading the entire page. It converts line breaks to
and removes the tag to prevent hacking. Modalpreview can also strip HTML before rendering the preview.

Tested in Safari 3, Firefox 2, MSIE 6, MSIE 7, Opera 9

Background-Position Animations

trixta — Sun, 07 Oct 2007 08:46:59 -0700

Adds the ability to do background-position animations to jQuery 1.2, and newer.

$('#background').animate({backgroundPosition: '(150px 250px)'});

beePolaroid

dlares — Sat, 26 Apr 2008 21:54:51 -0700

An Experiment using instant.js and jQuery.

All documentation is in Spanish.

ieFixButtons

odyniec — Wed, 05 Dec 2007 05:00:04 -0800

Fixes the buggy behavior of the <button> element in Internet Explorer 6 and 7.

Animated Collapsible DIV

georgec — Mon, 26 May 2008 08:13:53 -0700

This script collapses any DIV on the page and lets users manually toggle its appearance via a smooth "Web 2.0 style" animation. Three distinguishing features of this script are:

Ability for the script to work on both DIVs that have an explicit CSS height attribute defined, and without.
Ability to "group" multiple collapsible content instances to act as a single unit, so opening one closes the others.
Persistence can be enabled on each collapsible content individually that will remember if the DIV has been expanded, and upon the user's return to the page within the same browser session, keep it expanded.
Individually toggle various attributes of each collapsible content, whether a fade effect should be applied, the duration of the animation, an explicit height, plus whether the content should be hidden via scripting by default when the page loads.

jHelperTip - The Multi-Use Tooltip for jQuery

ktan — Mon, 02 Jun 2008 21:06:33 -0700

jHelperTip is intended to be useful in many situations such as hovering tip and clickable tips. It can get data from a container, through Ajax or even the attributes of the current object.

The API and Default Values

$.fn.jHelperTip.defaults = {
trigger: "click",
topOff: 3,
leftOff: 10,
source: "container",
attrName: '',
ttC: "#jHelperTipContainer", /* tooltip Container*/
dC: "#jHelperTipDataContainer", /* data Container */
aC: "#jHelperTipAttrContainer", /* attr Container */
opacity: 1.0,
loadingImg: "ajax-loader.gif",
loadingText: "Loading...",
type: "GET", /* data can be inline or CSS selector */
//url: '',
//data: '',
autoClose: true
};

Explanation of the Options:

trigger: "click" or "hover" to trigger the tooltip

topOff: top offset from mouse pointer

leftOff: left offset from mouse pointer

source: can be "container", "ajax" or "attribute", container is an container in current page, ajax loads from another page, attribute will read the attribute of current object.

attrName: the attribute that you want to pass the data from (only works if your source is attribute)

ttC: tooltip container (define a container to position your tooltip and receive data from ajax), will create if container not found use "#container" and not "container"

dC: data container for same page container (only works if your source is container)

aC: attribute data container (only works if your source is attribute)

opacity: opacity of the tooltips

loadingImg: the loading image indicator in Ajax calls (only works if your source is ajax)

loadingText: the loading text indicator in Ajax calls (only works if your source is ajax)

type: "GET" or "POST" (only works if your source is ajax)

url: The address of the page that you are fetching from (only works if your source is ajax)

data: data passed to the ajax request (only works if your source is ajax)

autoClose: true or false, specify if explicit action is needed to close the tooltip
Examples

jQuery.noConflict();

jQuery(function($){
$("#test").jHelperTip({
trigger: "click",
dC:"#tip1",
autoClose: false,
opacity: 0.9
});

Matt is doing something dangerous

click here to close

adj.

1. Involving or filled with danger; perilous.

2. Being able or likely to do harm.

jCarouselLite2

chuckchange — Wed, 30 Apr 2008 02:21:44 -0700

Reworked version of jCarouselLite. Faster, more options. Please offer suggestions and I will add them.

Img Notes

tariquesani — Thu, 19 Jun 2008 06:35:29 -0700

A simple way to display notes over images when you roll your mouse over the image.

Call function on mouse click or Enter keypress

bryan — Sun, 30 Sep 2007 07:37:54 -0700

Typically useful on anchor elements for which following the link should produce javascript functionality instead of the default action (following the URL).

Function binds mouse click and enter keypress to a specified element, and calls the specified function. The default action (e.g. following the href for an anchor) is prevented.

Release 1.2+ supports binding to more than one element, because the callback function is aware of the target of the click / enter keypress.

Usage:

$.clickOrEnter(yourElement,yourFunction);

e.g.

$.clickOrEnter('a',popup);

This essentially replaces the style of

<a href="javascript:function();">Foo</a>
<a href="foo.html" onclick="function();" onkeypress="function();">Bar</a>

which are inaccessible / obtrusive.

Most Popular Plugins