RSS Feeds 
Feed Comment The jQuery BlockUI Plugin lets you simulate synchronous behavior when using AJAX, without locking the browser[1]. When activated, it will prevent user activity with the page (or part of the page) until it is deactivated. BlockUI adds elements to the DOM to give it both the appearance and behavior of blocking user interaction.
Usage is very simple; to block user activity for the page:
$.blockUI();Blocking with a custom message:
$.blockUI({ message: '<h1><img src="busy.gif" /> Just a moment...</h1>' });2. jQuery Accessibility Plugin
To use jQuery Accessibility Plugin – first you must have jQuery and the jQuery Cookie Plugin. This plugin has been tested with version 1.1.3 on FireFox2 on Ubuntu 7.04.
To initialise this, you need to include the JS files in your HTML header.
<script src="jquery.js"type="text/javascript"></script>
<script src="jquery.cookie.js"type="text/javascript"></script>
<script src="jquery.ability.js"type="text/javascript"></script>
This plugin creates an accordion menu. It works with nested lists, definition lists, or just nested divs. Options are available to specify the structure, if necessary, the active element (to display at first) and to customize animations. The navigation-option automatically activates a part of the accordion based on the current location (URL) of the page.
jQuery('#list1a').accordion();
jQuery('#list1b').accordion({
autoheight: false
});InnerFade is a small plugin for the jQuery-JavaScript-Library. It’s designed to fade you any element inside a container in and out.
These elements could be anything you want, e.g. images, list-items, divs. Simply produce your own slideshow for your portfolio or advertisings. Create a newsticker or do an animation.
$('ID or class of the element containing the fading objects').innerfade({
animationtype: Type of animation 'fade' or 'slide' (Default: 'fade'),
speed: Fadingspeed in milliseconds or keywords (slow, normal or fast)(Default: 'normal'),
timeout: Time between the fades in milliseconds (Default: '2000'),
type: Type of slideshow: 'sequence', 'random' or 'random_start' (Default: 'sequence'),
containerheight: Height of the containing element in any css-height-value (Default: 'auto')
runningclass: CSS-Class which the container get’s applied (Default: 'innerfade')
});
A list with images and links.
<ul id="portfolio">
<li>
<a href="http://medienfreunde.com/deutsch/referenzen/kreation/good_guy__bad_guy.html">
<img src="images/ggbg.gif" alt="Good Guy bad Guy" />
</a>
</li>
<li>
<a href="http://medienfreunde.com/deutsch/referenzen/kreation/whizzkids.html">
<img src="images/whizzkids.gif" alt="Whizzkids" />
</a>
</li>
<li>
<a href="http://medienfreunde.com/deutsch/referenzen/printdesign/koenigin_mutter.html">
<img src="images/km.jpg" alt="Königin Mutter" />
</a>
</li>
<li>
<a href="http://medienfreunde.com/deutsch/referenzen/webdesign/rt_reprotechnik_-_hybride_archivierung.html">
<img src="images/rt_arch.jpg" alt="RT Hybride Archivierung" />
</a>
</li>
<li>
<a href="http://medienfreunde.com/deutsch/referenzen/kommunikation/tuev_sued_gruppe.html">
<img src="images/tuev.jpg" alt="TÜV SÜD Gruppe" />
</a>
</li>
</ul>
On April 16th, 2007, Google announced the Google AJAX Feed API. This is a pretty cool thing as it facilitates feed mashups by providing the server component. This means that developers can easily mash feeds on the client by simply including Google’s new API script. And Google has provided a nice Developer’s Guide which shows how to get started.
To simplify this even more for jQuery developers, I’ve created a small plugin which performs the task of unobtrusively converting an element, such as an <a>, into a <div> element which holds feed content.
$(document).ready(function() {
// add a feed manually
$('#alistapart').gFeed({
url: 'http://www.alistapart.com/feed/rss.xml',
title: 'A List Apart Feed (Added by Brute Force)'
});
}); A jQuery plugin from GSGD to give advanced easing options.
$(element).slideUp(1000, method, callback});
$(element).slideUp({
duration: 1000,
easing: method,
complete: callback});Download
jquery.easing.compatibility.js
The jQuery Form Plugin allows you to easily and unobtrusively upgrade HTML forms to use AJAX. The main methods, ajaxForm and ajaxSubmit, gather information from the form element to determine how to manage the submit process. Both of these methods support numerous options which allows you to have full control over how the data is submitted. Submitting a form with AJAX doesn’t get any easier than this!
<form id="myForm" action="comment.php" method="post">
Name: <input type="text" name="name" />
Comment: <textarea name="comment"></textarea>
<input type="submit" value="Submit Comment" />
</form>8. hoverpulse
This article shows a little plugin called ‘hoverpulse’ which grows and then restores an element’s size in response to the mouse hovering over it.
$(document).ready(function() {
$('div.thumb img').hoverpulse();
});The jQuery Media Plugin supports unobtrusive conversion of standard markup into rich media content. It can be used to embed virtually any media type, including Flash, Quicktime, Windows Media Player, Real Player, MP3, Silverlight, PDF and more, into a web page. The plugin converts an element (usually an <a>) into a <div> which holds the object, embed or iframe tags neccessary to render the media content.
$('.media').media();10. jQuery Corner
Corner adorners are all the rage in web design these days. Designers say that plain old right-angle corners are so Web 1.0 now. However, some of the techniques to take the edge off corners use extra markup that is only there to support the decoration, which violates the separation of content and presentation. Now that’s really Web 1.0 so we don’t want to go there. Others use single-purpose rounded corner images or bulky Javascript code; that seems like a high price to pay for beauty.
$(this).corner("round 8px").parent().css('padding', '4px').corner("round 10px")The jQuery Taconite Plugin allows you to easily make multiple DOM updates using the results of a single AJAX call. It processes an XML command document that contain instructions for updating the DOM.
$('#status').append('Your order has shipped');12. jQuery jqGalView
The jQuery jqGalView Plugin allows you to take a grouping of images and turn it into an flash-like image/photo gallery. It allows you to style it how ever you want and add as many images at you want.
<ul id="example1" title="My Gallery">
<li><a href="PathToFullSizeImage"><img src="PathToFullThumbnailImage" alt="Some alt text" width="144" height="96" border="0"/></a></li>
<li><a href="PathToFullSizeImage"><img src="PathToFullThumbnailImage" alt="Some alt text" width="144" height="96" border="0"/></a></li>
<li><a href="PathToFullSizeImage"><img src="PathToFullThumbnailImage" alt="Some alt text" width="144" height="96" border="0"/></a></li>
</ul>Did you ever have the need to prevent users from entering certain characters into your form?
Looking at the plugins available at jQuery, I found a great plugin made by Sam Collet called Numeric.
But it was too limited, what if I’m asking the user to create a username? Or what if I need to enter a number with decimals or an IP Address? There is another great plugin called Masked Input by Josh Bush, which can also control user input by defining a mask. The problem however with that was the length of text to be inserted must be defined as well. Again, what if I needed to control input of a username? I can’t tell how many characters the user will be using, and I can’t force him to use just 8 characters ,so I created AlphaNumeric.
jQuery AlphaNumeric is a javascript control plugin that allows you to limit what characters a user can enter on textboxes or textareas. Have fun.
14. Easy Slider 1.5.
The Easiest jQuery Plugin For Sliding Images and Content. New version of my Easy Slider plugin for jQuery is here. This is one of the my rare scripts that make it to their second version. In this case version 1.5
All of the features here are result of your comments, so if you have more ideas, keep ‘em coming!
15. jqZoom Evolution
JQZoom is a javascript image magnifier built at the top of the popular jQuery javascript framework.jQzoom is a great and a really easy to use script to magnify what you want.
var options =
{
zoomWidth: 250,
zoomHeight: 250
}
$(".jqzoom").jqzoom(options);16. autocomplete
A jQuery autocompleter with caching options to limit server requests.
Please also look at the documentation (plain text, download or view).
Source Code:
jQuery.autocomplete = function(input, options) {
// Create a link to self
var me = this;
// Create jQuery object for input element
var $input = $(input).attr("autocomplete", "off");
// Apply inputClass if necessary
if (options.inputClass) {
$input.addClass(options.inputClass);
}
// Create results
var results = document.createElement("div");
// Create jQuery object for results
// var $results = $(results);
var $results = $(results).hide().addClass(options.resultsClass).css("position", "absolute");
if( options.width > 0 ) {
$results.css("width", options.width);
}
// Add to body element
$("body").append(results);
input.autocompleter = me;
var timeout = null;
var prev = "";
var active = -1;
var cache = {};
var keyb = false;
var hasFocus = false;
var lastKeyPressCode = null;
var mouseDownOnSelect = false;
var hidingResults = false;
// flush cache
function flushCache(){
cache = {};
cache.data = {};
cache.length = 0;
};
// flush cache
flushCache();
// if there is a data array supplied
if( options.data != null ){
var sFirstChar = "", stMatchSets = {}, row = [];
// no url was specified, we need to adjust the cache length to make sure it fits the local data store
if( typeof options.url != "string" ) {
options.cacheLength = 1;
}
// loop through the array and create a lookup structure
for( var i=0; i < options.data.length; i++ ){
// if row is a string, make an array otherwise just reference the array
row = ((typeof options.data[i] == "string") ? [options.data[i]] : options.data[i]);
// if the length is zero, don't add to list
if( row[0].length > 0 ){
// get the first character
sFirstChar = row[0].substring(0, 1).toLowerCase();
// if no lookup array for this character exists, look it up now
if( !stMatchSets[sFirstChar] ) stMatchSets[sFirstChar] = [];
// if the match is a string
stMatchSets[sFirstChar].push(row);
}
}
// add the data items to the cache
for( var k in stMatchSets ) {
// increase the cache size
options.cacheLength++;
// add to the cache
addToCache(k, stMatchSets[k]);
}
}
$input
.keydown(function(e) {
// track last key pressed
lastKeyPressCode = e.keyCode;
switch(e.keyCode) {
case 38: // up
e.preventDefault();
moveSelect(-1);
break;
case 40: // down
e.preventDefault();
moveSelect(1);
break;
case 9: // tab
case 13: // return
if( selectCurrent() ){
// make sure to blur off the current field
$input.get(0).blur();
e.preventDefault();
}
break;
default:
active = -1;
if (timeout) clearTimeout(timeout);
timeout = setTimeout(function(){onChange();}, options.delay);
break;
}
})
.focus(function(){
// track whether the field has focus, we shouldn't process any results if the field no longer has focus
hasFocus = true;
})
.blur(function() {
// track whether the field has focus
hasFocus = false;
if (!mouseDownOnSelect) {
hideResults();
}
});
hideResultsNow();
function onChange() {
// ignore if the following keys are pressed: [del] [shift] [capslock]
if( lastKeyPressCode == 46 || (lastKeyPressCode > 8 && lastKeyPressCode < 32) ) return $results.hide();
var v = $input.val();
if (v == prev) return;
prev = v;
if (v.length >= options.minChars) {
$input.addClass(options.loadingClass);
requestData(v);
} else {
$input.removeClass(options.loadingClass);
$results.hide();
}
};
function moveSelect(step) {
var lis = $("li", results);
if (!lis) return;
active += step;
if (active < 0) {
active = 0;
} else if (active >= lis.size()) {
active = lis.size() - 1;
}
lis.removeClass("ac_over");
$(lis[active]).addClass("ac_over");
// Weird behaviour in IE
// if (lis[active] && lis[active].scrollIntoView) {
// lis[active].scrollIntoView(false);
// }
};
function selectCurrent() {
var li = $("li.ac_over", results)[0];
if (!li) {
var $li = $("li", results);
if (options.selectOnly) {
if ($li.length == 1) li = $li[0];
} else if (options.selectFirst) {
li = $li[0];
}
}
if (li) {
selectItem(li);
return true;
} else {
return false;
}
};
function selectItem(li) {
if (!li) {
li = document.createElement("li");
li.extra = [];
li.selectValue = "";
}
var v = $.trim(li.selectValue ? li.selectValue : li.innerHTML);
input.lastSelected = v;
prev = v;
$results.html("");
$input.val(v);
hideResultsNow();
if (options.onItemSelect) {
setTimeout(function() { options.onItemSelect(li) }, 1);
}
};
// selects a portion of the input string
function createSelection(start, end){
// get a reference to the input element
var field = $input.get(0);
if( field.createTextRange ){
var selRange = field.createTextRange();
selRange.collapse(true);
selRange.moveStart("character", start);
selRange.moveEnd("character", end);
selRange.select();
} else if( field.setSelectionRange ){
field.setSelectionRange(start, end);
} else {
if( field.selectionStart ){
field.selectionStart = start;
field.selectionEnd = end;
}
}
field.focus();
};
// fills in the input box w/the first match (assumed to be the best match)
function autoFill(sValue){
// if the last user key pressed was backspace, don't autofill
if( lastKeyPressCode != 8 ){
// fill in the value (keep the case the user has typed)
$input.val($input.val() + sValue.substring(prev.length));
// select the portion of the value not typed by the user (so the next character will erase)
createSelection(prev.length, sValue.length);
}
};
function showResults() {
// get the position of the input field right now (in case the DOM is shifted)
var pos = findPos(input);
// either use the specified width, or autocalculate based on form element
var iWidth = (options.width > 0) ? options.width : $input.width();
// reposition
$results.css({
width: parseInt(iWidth) + "px",
top: (pos.y + input.offsetHeight) + "px",
left: pos.x + "px"
}).show();
};
function hideResults() {
if (timeout) clearTimeout(timeout);
timeout = setTimeout(hideResultsNow, 200);
};
function hideResultsNow() {
if (hidingResults) {
return;
}
hidingResults = true;
if (timeout) {
clearTimeout(timeout);
}
var v = $input.removeClass(options.loadingClass).val();
if ($results.is(":visible")) {
$results.hide();
}
if (options.mustMatch) {
if (!input.lastSelected || input.lastSelected != v) {
selectItem(null);
}
}
hidingResults = false;
};
function receiveData(q, data) {
if (data) {
$input.removeClass(options.loadingClass);
results.innerHTML = "";
// if the field no longer has focus or if there are no matches, do not display the drop down
if( !hasFocus || data.length == 0 ) return hideResultsNow();
if ($.browser.msie) {
// we put a styled iframe behind the calendar so HTML SELECT elements don't show through
$results.append(document.createElement('iframe'));
}
results.appendChild(dataToDom(data));
// autofill in the complete box w/the first match as long as the user hasn't entered in more data
if( options.autoFill && ($input.val().toLowerCase() == q.toLowerCase()) ) autoFill(data[0][0]);
showResults();
} else {
hideResultsNow();
}
};
function parseData(data) {
if (!data) return null;
var parsed = [];
var rows = data.split(options.lineSeparator);
for (var i=0; i < rows.length; i++) {
var row = $.trim(rows[i]);
if (row) {
parsed[parsed.length] = row.split(options.cellSeparator);
}
}
return parsed;
};
function dataToDom(data) {
var ul = document.createElement("ul");
var num = data.length;
// limited results to a max number
if( (options.maxItemsToShow > 0) && (options.maxItemsToShow < num) ) num = options.maxItemsToShow;
for (var i=0; i < num; i++) {
var row = data[i];
if (!row) continue;
var li = document.createElement("li");
if (options.formatItem) {
li.innerHTML = options.formatItem(row, i, num);
li.selectValue = row[0];
} else {
li.innerHTML = row[0];
li.selectValue = row[0];
}
var extra = null;
if (row.length > 1) {
extra = [];
for (var j=1; j < row.length; j++) {
extra[extra.length] = row[j];
}
}
li.extra = extra;
ul.appendChild(li);
$(li).hover(
function() { $("li", ul).removeClass("ac_over"); $(this).addClass("ac_over"); active = $("li", ul).indexOf($(this).get(0)); },
function() { $(this).removeClass("ac_over"); }
).click(function(e) {
e.preventDefault();
e.stopPropagation();
selectItem(this)
});
}
$(ul).mousedown(function() {
mouseDownOnSelect = true;
}).mouseup(function() {
mouseDownOnSelect = false;
});
return ul;
};
function requestData(q) {
if (!options.matchCase) q = q.toLowerCase();
var data = options.cacheLength ? loadFromCache(q) : null;
// recieve the cached data
if (data) {
receiveData(q, data);
// if an AJAX url has been supplied, try loading the data now
} else if( (typeof options.url == "string") && (options.url.length > 0) ){
$.get(makeUrl(q), function(data) {
data = parseData(data);
addToCache(q, data);
receiveData(q, data);
});
// if there's been no data found, remove the loading class
} else {
$input.removeClass(options.loadingClass);
}
};
function makeUrl(q) {
var sep = options.url.indexOf('?') == -1 ? '?' : '&';
var url = options.url + sep + "q=" + encodeURI(q);
for (var i in options.extraParams) {
url += "&" + i + "=" + encodeURI(options.extraParams[i]);
}
return url;
};
function loadFromCache(q) {
if (!q) return null;
if (cache.data[q]) return cache.data[q];
if (options.matchSubset) {
for (var i = q.length - 1; i >= options.minChars; i--) {
var qs = q.substr(0, i);
var c = cache.data[qs];
if (c) {
var csub = [];
for (var j = 0; j < c.length; j++) {
var x = c[j];
var x0 = x[0];
if (matchSubset(x0, q)) {
csub[csub.length] = x;
}
}
return csub;
}
}
}
return null;
};
function matchSubset(s, sub) {
if (!options.matchCase) s = s.toLowerCase();
var i = s.indexOf(sub);
if (i == -1) return false;
return i == 0 || options.matchContains;
};
this.flushCache = function() {
flushCache();
};
this.setExtraParams = function(p) {
options.extraParams = p;
};
this.findValue = function(){
var q = $input.val();
if (!options.matchCase) q = q.toLowerCase();
var data = options.cacheLength ? loadFromCache(q) : null;
if (data) {
findValueCallback(q, data);
} else if( (typeof options.url == "string") && (options.url.length > 0) ){
$.get(makeUrl(q), function(data) {
data = parseData(data)
addToCache(q, data);
findValueCallback(q, data);
});
} else {
// no matches
findValueCallback(q, null);
}
}
function findValueCallback(q, data){
if (data) $input.removeClass(options.loadingClass);
var num = (data) ? data.length : 0;
var li = null;
for (var i=0; i < num; i++) {
var row = data[i];
if( row[0].toLowerCase() == q.toLowerCase() ){
li = document.createElement("li");
if (options.formatItem) {
li.innerHTML = options.formatItem(row, i, num);
li.selectValue = row[0];
} else {
li.innerHTML = row[0];
li.selectValue = row[0];
}
var extra = null;
if( row.length > 1 ){
extra = [];
for (var j=1; j < row.length; j++) {
extra[extra.length] = row[j];
}
}
li.extra = extra;
}
}
if( options.onFindValue ) setTimeout(function() { options.onFindValue(li) }, 1);
}
function addToCache(q, data) {
if (!data || !q || !options.cacheLength) return;
if (!cache.length || cache.length > options.cacheLength) {
flushCache();
cache.length++;
} else if (!cache[q]) {
cache.length++;
}
cache.data[q] = data;
};
function findPos(obj) {
var curleft = obj.offsetLeft || 0;
var curtop = obj.offsetTop || 0;
while (obj = obj.offsetParent) {
curleft += obj.offsetLeft
curtop += obj.offsetTop
}
return {x:curleft,y:curtop};
}
}
jQuery.fn.autocomplete = function(url, options, data) {
// Make sure options exists
options = options || {};
// Set url as option
options.url = url;
// set some bulk local data
options.data = ((typeof data == "object") && (data.constructor == Array)) ? data : null;
// Set default values for required options
options = $.extend({
inputClass: "ac_input",
resultsClass: "ac_results",
lineSeparator: "\n",
cellSeparator: "|",
minChars: 1,
delay: 400,
matchCase: 0,
matchSubset: 1,
matchContains: 0,
cacheLength: 1,
mustMatch: 0,
extraParams: {},
loadingClass: "ac_loading",
selectFirst: false,
selectOnly: false,
maxItemsToShow: -1,
autoFill: false,
width: 0
}, options);
options.width = parseInt(options.width, 10);
this.each(function() {
var input = this;
new jQuery.autocomplete(input, options);
});
// Don't break the chain
return this;
}
jQuery.fn.autocompleteArray = function(data, options) {
return this.autocomplete(null, options, data);
}
jQuery.fn.indexOf = function(e){
for( var i=0; i<this.length; i++ ){
if( this[i] == e ) return i;
}
return -1;
};
17. jQuery quickSearch plug-in
For Search
$('table#table_example tbody tr').quicksearch({
position: 'before',
attached: 'table#table_example',
stripeRowClass: ['odd', 'even'],
labelText: 'Search the table'
});Autosave is designed to save the progress of forms by saving the fields to cookies so you won’t lose anything should anything go wrong
The plug-in saves the form fields at certain intervals (the default is every 10 seconds) and whenever you leave the page.
The plug-in was written with work-intensive forms in mind, such as a blog article writing form.
$('form *').autosave();The BogoFolders plugin provides a filemanager-like view of trees of items. It shows the user a selectable list of “folder” icons. Clicking an icon shows the content associated with it in a separate HTML element and (if the item has child elements) it “changes the directory” to that item, similarly to how a file manager works. It is believed to work as advertised with jQuery 1.1.3, 1.1.4, and 1.2.0.
A jQuery menu plugin. It’s a drop down menu, which behaves like an application menu (click to open, click to close, stays open even after hovering elsewhere). It supports menu creation through HTML markup or through JavaScript. The plugin tries to position its submenus inside the visible area when there is not enough space at the right or bottom border (dimensions plugin required).
var options = {minWidth: 120, arrowSrc: 'arrow_right.gif', onClick: function(e, menuItem){
alert('you clicked item "' + $(this).text() + '"');
}};
$('#menuone').menu(options);
For use in more than one pagers per page, takes a string. Default ‘nav’
$('#example1').pager('div');The clueTip plugin allows you to easily show a fancy tooltip when the user’s mouse hovers over (or, optionally, clicks on) any element you designate in your script. If the element includes a title attribute, its text becomes the heading of the clueTip.
$('a.title').cluetip({splitTitle: '|'});
Leave Your Comments Below