You need to upgrade your Flash Player to version 10 or newer.

Our Category: JQUERY

50 New And Crazy Cool jQuery Plugins From Year 2011

2011 | Coding | cool | JQUERY | JS & AJAX | plugins | tools | Web Design | webdesign 0 No Comments

With 2011 a little over half over it?s the right time to look at, and uncover, the current trends of web design and development. It?s sure been a helluva ride for jQuery and it?s growth just doesn?t stop. With more than 40% of websites using jQuery now it?s no longer possible to ignore this efficient, powerful and lightweight tool.

jQuery gives developers the chance to enrich websites with amazing elements without the need to write dozens of lines of code. This article presents 50 advanced, cutting-edge yet simple jQuery plugins that will enhance your web experience drastically.

1. jbar

Jbar-new-cool-jquery-plugins-2011

jbar is a jQuery plugin that transforms an unordered list <ul> into a toolbar with dropdown menus.

2. e24TabMenu

Tabmenu-new-cool-jquery-plugins-2011

e24TabMenu is a plugin written for scriptaculous. It is a tab menu that expands and collapses smoothly.

3. Simple jQuery Fluid Thumbnail Menu Bar

Fluid-thumbnail-new-cool-jquery-plugins-2011

The idea of a fluid thumbnail bar is simple: create a list of thumbnails within a space where the overflow can be flipped through page by page.

4. Accordion Multilevel Menu

Accordion-new-cool-jquery-plugins-2011

The plugin has a boolean initialization option accordion. If you set this value to ?true? the menu behaves as an accordion menu. The irrelevant menu items are closed while the relevant slides open.

5. DropKick

Dropkick-new-cool-jquery-plugins-2011

Creating custom dropdowns is usually a tedious process that requires a ton of extra setup time. Oftentimes lacking conveniences that native dropdowns have such as keyboard navigation. DropKick removes the tedium and lets you focus on making the menu look good.

6. jQuery Resize And Crop

Crop-resize-new-cool-jquery-plugins-2011

jQuery Resize And Crop (jrac) is a jQuery plugin that build a viewport around a given image permitting a person to visually resize an image and place a crop. Then it is
possible to use the coordinates data for any purpose.

7. Cloud Zoom

Cloud-zoom-new-cool-jquery-plugins-2011

Cloud Zoom is a jQuery image zoom plugin, a comparable alternative to products such as Magic Zoom. Compared to the popular jQZoom plugin, Cloud Zoom is smaller, has more features and more robust compatibility across browsers.

8. Simple jQuery Image Hover Effect

Image-hover-new-cool-jquery-plugins-2011

This is a simple technique to animate an image when hovering using jQuery?s animate() effect.

9. Easy Image Zoom

Image-zoom-new-cool-jquery-plugins-2011

Easy Image Zoom gives you the opportunity to see large details of the product while moving the cursor over a medium sized image.

10. ImageLens

Image-lens-new-cool-jquery-plugins-2011

Use this jQuery plug-in to add lens style zooming effect to an image,

11. ImageSelect

Image-select-new-cool-jquery-plugins-2011

ImageSelect is a jQuery plugin that allows the user to select an image by means of a nice looking dropdown.

12. jQuery Mapz

Maps-new-cool-jquery-plugins-2011

With Mapz you can easily create draggable image maps by just calling one function and by using some simple and clean HTML mark-up.

13. jQuery Image Gallery

Image-gallery-new-cool-jquery-plugins-2011

Image Gallery with Lightbox effect and slideshow functionality for jQuery UI.

14. JbhSlider

Jbhslider-new-cool-jquery-plugins-2011

JbhSlider is a fully customizable slider. You can add/remove navigation or pagination. You can set the effect, the duration and the functions after/before.

15. jQuery.slideBanjo

Slidebanjo-new-cool-jquery-plugins-2011

jQuery.slideBanjo is a plugin, that shows pretty slides on your site. Supports background loading of pictures, simple to customize, full documentation. Compatible with IE7 and higher.

16. Slides

Slides-new-cool-jquery-plugins-2011

Slides is a slideshow plugin for jQuery that is built with simplicity in mind. Packed with a useful set of features to help novice and advanced developers alike create elegant and user-friendly slideshows.

17. jShowOff

Jshowoff-new-cool-jquery-plugins-2011

jShowOff is a jQuery plugin for creating a rotating content module. It works by creating ?slides? from the child elements (eg. <li>) inside a specified wrapper element (eg. <ul>) on which .jshowoff() is invoked. It then rotates through the slides, with options for controls, links, and more.

18. Tiny Carousel

Tiny-carousel-new-cool-jquery-plugins-2011

Tiny Carousel is a lightweight carousel for sliding html based content. It was built using the javascript jQuery library. Tiny Carousel was designed to be a dynamic lightweight utility that gives webdesigners a powerfull way of enhancing a websites user interface.

19. gSlider

Gslider-new-cool-jquery-plugins-2011

gSlider is an interactive image slider built on jQuery. It is versatile, lightweight and easy to implement in any website or web applications.

20. Craftyslide

Craftyslide-new-cool-jquery-plugins-2011

Craftyslide is a tiny (just 2kb) slideshow built on jQuery. Craftyslide aims to be different, by providing a simple, no-frills method of displaying images; packaged into a small, clean and efficient plugin.

21. JQuery Wysiwym

Wysiwym-new-cool-jquery-plugins-2011

JQuery-Wysiwym is a wysiwym (What You See Is What You Mean) editor. It is not meant to be used to output HTML, it simply helps with the desired markup syntax. Currently supported are Markdown, MediaWiki, and BBCode.

22. leanModal

Ieanmodal-new-cool-jquery-plugins-2011

A super simple modal window plugin that works with your CSS. Perfect for hidden page content. Uber light at just 780 bytes (minified). Flexible width & height, image free, supports multiple instances on one page. Great for login, sign up & alert panels, etc.

23. jQuery-preloader

Preloader-new-cool-jquery-plugins-2011

This jQuery plugin preloads CSS, JS, HTML and images with visual loader, fast and very small (~2Kb).

24. Zebra_Dialog

Zebra-dialog-new-cool-jquery-plugins-2011

Zebra_Dialog is a small (4KB minified), compact (one JS file, no dependencies other than jQuery 1.5.2+) and highly configurable dialog box plugin for jQuery, meant to replace JavaScript?s alert and confirmation dialog boxes and built using the jQuery Plugin Boilerplate.

25. Double Vision

Double-vision-new-cool-jquery-plugins-2011

A jQuery 1.6.1 plugin used for moving text from input?s to textarea.

26. Textarea Code Editor

Code-editor-new-cool-jquery-plugins-2011

This plugin transforms textareas into code editors with the following advantages: indentation with the Tab key, intelligent home key, auto indent on enter.

27. Easy Paginate

Easy-paginate-new-cool-jquery-plugins-2011

This plugin allows you to browse easily through the list of items with pagination controls. It is very easy to implement and very lightweight so it might come in handy to use in your own projects.

28. Activity Indicator

Activity-indicator-new-cool-jquery-plugins-2011

Activity Indicator is a resolution independent indicator that works in any browser.

29. jQuery File Upload

File-upload-new-cool-jquery-plugins-2011

jQuery File Upload is a jQuery based lightweight file uploader with multiple file upload and drag&drop support.

30. Color Animation

Color-animation-new-cool-jquery-plugins-2011

With jQuery?s animate function, you can animate all kinds of css-properties. What?s really missing from jQuery is animating colors. This plugin will add this feature.

31. jQuery Formwizard

Form-wizard-new-cool-jquery-plugins-2011

The form wizard plugin is a jQuery plugin which can be used to create wizard like page flows for forms without having to reload the page in between wizard steps.

32. jQuery Spinner Control

Spinner-control-new-cool-jquery-plugins-2011

Converts the text input to a spinner control. This plugin works fine with ASP.net for the post backs.

33. jEscape

Jescape-new-cool-jquery-plugins-2011

This extension captures all the keydown events faster and less time writing code, you?ll profit.

34. jPaginator

Paginator-new-cool-jquery-plugins-2011

A plugin for animated pagination, with auto-acceleration, a slider, and highly customizable.

35. Snippet

Snippet-new-cool-jquery-plugins-2011

Snippet is a jQuery syntax highlighting plugin built on top of the SHJS script found on SourceForge. Snippet provides a quick and easy way of highlighting source code passages in HTML documents.

36. HTML5 jQuery Music Player

Html5-music-player-new-cool-jquery-plugins-2011

A HTML5 music player that uses an awesome design created by Orman Clark and jPlayer.

37. jQuery Link Preview

Link-preview-new-cool-jquery-plugins-2011

jLinkPreview is a plug-in for jQuery Library which simply allows you to see a link?s preview image before you visit them by just hovering on it. Link preview will appear by your cursor when you hover.

38. My QR Code

Qr-code-new-cool-jquery-plugins-2011

This plugin generate QR code for mobile devices using Google Chart API with jQuery. By default, the plugin will generate the QR code for the URL of the page. You can also specify the text, encoding and size of the QR code.

39. jQuery TagBox

Tagbox-new-cool-jquery-plugins-2011

This is a jQuery plugin to help add tags like input in your forms.

40. jRumble

Rumble-new-cool-jquery-plugins-2011

jRumble is a jQuery plugin that rumbles, vibrates, shakes, and rotates any element you choose. It?s great to use as a hover effect or a way to direct attention to an element. You can control the X, Y, and rotation range, the speed, and event trigger for the rumble.

41. MobilyMap

Mobily-map-new-cool-jquery-plugins-2011

MobilyMap is a jQuery plugin (7KB) that can create a Google Maps-like, draggable interface from any image.

42. Grid Navigation

Grid-navigation-new-cool-jquery-plugins-2011

jQuery plugin for achieving some neat grid navigation effects.

43. Simple Overlay

Overlay-new-cool-jquery-plugins-2011

A jQuery Plugin for easily adding lightweight, flexible overlays to your projects.

44. diagonalFade

Diagonal-fade-new-cool-jquery-plugins-2011

diagonalFade is a jQuery plugin allowing you to easily specify direction, fade-in, fade-out, and a host of other options to a grouping of elements. All you have to do is import it, specify the container to which the group of items resides, and poof, you?re off and away.

45. Smart Spin

Smart-spin-new-cool-jquery-plugins-2011

Smart spin is a jQuery spin button plugin that mimics the very common windows spin button control. Smart spin allows you to select a value between minimum and maximum values using either mouse or keyboard. You can also enter a value via keyboard.

46. jQuery Credit Card Validation

Credit-card-new-cool-jquery-plugins-2011

Smart Validate is a jQuery credit card validation plugin, that makes credit card format validation a simple task. It ensures that user has entered valid credit card number before making actual transaction.

47. Ajax PayPal Cart

Ajax-paypal-new-cool-jquery-plugins-2011

AJAX PayPal Cart is a easy to use JQuery plugin for web developer to add a full function shopping cart in their website. The AJAX cart can included a cart widget which allow display of cart information easily. Support PayPal Website Payment Standard.

48. jQuery.folderPreview

Folder-preview-new-cool-jquery-plugins-2011

jQuery.folderPreview is a jQuery plugin that takes a series of images and positions them so that they appear within a folder graphic. This enhances the attractiveness of a browsing UI system, allowing the user to visualize the contents of the folder.

49. jQuery Lifestream

Lifestream-new-cool-jquery-plugins-2011

Show a stream of your online activity with jQuery

50. QuoVolver

Quovolver-new-cool-jquery-plugins-2011

Quovolver is a simple extension for jQuery that takes a group of quotes and displays them on your page in an elegant way.

15 Powerful jQuery Tips and Tricks for Developers

JQUERY Comments Off

In this article we will take a look at 15 jQuery techniques which will be useful for your effective use of the library. We will start with a few tips about performance and continue with short introductions to some of the library?s more obscure features.

1) Use the Latest Version of jQuery

With all the innovation taking place in the jQuery project, one of the easiest ways to improve the performance of your web site is to simply use the latest version of jQuery. Every release of the library introduces optimizations and bug fixes, and most of the time upgrading involves only changing a script tag.

You can even include jQuery directly from Google?s servers, which provide free CDN hosting for a number of JavaScript libraries.

<!-- Include a specific version of jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>

<!-- Include the latest version in the 1.6 branch -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>

The latter example will include the latest 1.6.x version automatically as it becomes available, but as pointed out on css-tricks, it is cached only for an hour, so you better not use it in production environments.

2) Keep Selectors Simple

Up until recently, retrieving DOM elements with jQuery was a finely choreographed combination of parsing selector strings, JavaScript loops and inbuilt APIs like getElementById(), getElementsByTagName() and getElementsByClassName(). But now, all major browsers support querySelectorAll(), which understands CSS query selectors and brings a significant performance gain.

However, you should still try to optimize the way you retrieve elements. Not to mention that a lot of users still use older browsers that force jQuery into traversing the DOM tree, which is slow.

$('li[data-selected="true"] a')	// Fancy, but slow
$('li.selected a')	// Better
$('#elem')	// Best

Selecting by id is the fastest. If you need to select by class name, prefix it with a tag ? $('li.selected'). These optimizations mainly affect older browsers and mobile devices.

Accessing the DOM will always be the slowest part of every JavaScript application, so minimizing it is beneficial. One of the ways to do this, is to cache the results that jQuery gives you. The variable you choose will hold a jQuery object, which you can access later in your script.

var buttons = $('#navigation a.button');

// Some prefer prefixing their jQuery variables with $:
var $buttons = $('#navigation a.button');

Another thing worth noting, is that jQuery gives you a large number of additional selectors for convenience, such as :visible, :hidden, :animated and more, which are not valid CSS3 selectors. The result is that if you use them the library cannot utilize querySelectorAll(). To remedy the situation, you can first select the elements you want to work with, and later filter them, like this:

$('a.button:animated');	// Does not use querySelectorAll()
$('a.button').filter(':animated');	// Uses it

The results of the above are the same, with the exception that the second example is faster.

3) jQuery Objects as Arrays

The result of running a selector is a jQuery object. However, the library makes it appear as if you are working with an array by defining index elements and a length.

// Selecting all the navigation buttons:
var buttons = $('#navigation a.button');

// We can loop though the collection:
for(var i=0;i<buttons.length;i++){
	console.log(buttons[i]);	// A DOM element, not a jQuery object
}

// We can even slice it:
var firstFour = buttons.slice(0,4);

If performance is what you are after, using a simple for (or a while) loop instead of $.each(), can make your code several times faster.

Checking the length is also the only way to determine whether your collection contains any elements.

if(buttons){	// This is always true
	// Do something
}

if(buttons.length){ // True only if buttons contains elements
	// Do something
}

4) The Selector Property

jQuery provides a property which contains the selector that was used to start the chain.

$('#container li:first-child').selector    // #container li:first-child
$('#container li').filter(':first-child').selector    // #container li.filter(:first-child)

Although the examples above target the same element, the selectors are quite different. The second one is actually invalid ? you can?t use it as the basis of a new jQuery object. It only shows that the filter method was used to narrow down the collection.

5) Create an Empty jQuery Object

Creating a new jQuery object can bring significant overhead. Sometimes, you might need to create an empty object, and fill it in with the add() method later.

var container = $([]);
container.add(another_element);

This is also the basis for the quickEach() method that you can use as a faster alternative to the default each().

6) Select a Random Element

As I mentioned above, jQuery adds its own selection filters. As with everything else in the library, you can also create your own. To do this simply add a new function to the $.expr[':'] object. One awesome use case was presented by Waldek Mastykarz on his blog: creating a selector for retrieving a random element. You can see a slightly modified version of his code below:

(function($){
    var random = 0;

    $.expr[':'].random = function(a, i, m, r) {
        if (i == 0) {
            random = Math.floor(Math.random() * r.length);
        }
        return i == random;
    };

})(jQuery);

// This is how you use it:
$('li:random').addClass('glow');

7) Use CSS Hooks

The CSS hooks API was introduced to give developers the ability to get and set particular CSS values. Using it, you can hide browser specific implementations and expose a unified interface for accessing particular properties.

$.cssHooks['borderRadius'] = {
        get: function(elem, computed, extra){
            // Depending on the browser, read the value of
            // -moz-border-radius, -webkit-border-radius or border-radius
        },
        set: function(elem, value){
            // Set the appropriate CSS3 property
        }
};

// Use it without worrying which property the browser actually understands:
$('#rect').css('borderRadius',5);

What is even better, is that people have already built a rich library of supported CSS hooks that you can use for free in your next project.

8) Use Custom Easing Functions

You have probably heard of the jQuery easing plugin by now ? it allows you to add effects to your animations. The only shortcoming is that this is another JavaScript file your visitors have to load. Luckily enough, you can simply copy the effect you need from the plugin file, and add it to the jQuery.easing object:

$.easing.easeInOutQuad = function (x, t, b, c, d) {
	if ((t/=d/2) < 1) return c/2*t*t + b;
	return -c/2 * ((--t)*(t-2) - 1) + b;
};

// To use it:
$('#elem').animate({width:200},'slow','easeInOutQuad');

9) The $.proxy()

One of the drawbacks to using callback functions in jQuery has always been that when they are executed by a method of the library, the context is set to a different element. For example, if you have this markup:

<div id="panel" style="display:none">
	<button>Close</button>
</div>

And you try to execute this code:

$('#panel').fadeIn(function(){
	// this points to #panel
	$('#panel button').click(function(){
		// this points to the button
		$(this).fadeOut();
	});
});

You will run into a problem ? the button will disappear, not the panel. With $.proxy, you can write it like this:

$('#panel').fadeIn(function(){
	// Using $.proxy to bind this:

	$('#panel button').click($.proxy(function(){
		// this points to #panel
		$(this).fadeOut();
	},this));
});

Which will do what you expect. The $.proxy function takes two arguments ? your original function, and a context. It returns a new function in which the value of this is always fixed to the context. You can read more about $.proxy in the docs.

10) Determine the Weight of Your Page

A simple fact: the more content your page has, the more time it takes your browser to render it. You can get a quick count of the number of DOM elements on your page by running this in your console:

console.log( $('*').length );

The smaller the number, the faster the website is rendered. You can optimize it by removing redundant markup and unnecessary wrapping elements.

11) Turn your Code into a jQuery Plugin

If you invest some time in writing a piece of jQuery code, consider turning it into a plugin. This promotes code reuse, limits dependencies and helps you organize your project?s code base. Most of the tutorials on Tutorialzine are organized as plugins, so that it is easy for people to simply drop them in their sites and use them.

Creating a jQuery plugin couldn?t be easier:

(function($){
	$.fn.yourPluginName = function(){
		// Your code goes here
		return this;
	};
})(jQuery);

Read a detailed tutorial on turning jQuery code into a plugin.

12) Set Global AJAX Defaults

When triggering AJAX requests in your application, you often need to display some kind of indication that a request is in progress. This can be done by displaying a loading animation, or using a dark overlay. Managing this indicator in every single $.get or $.post call can quickly become tedious.

The best solution is to set global AJAX defaults using one of jQuery?s methods.

// ajaxSetup is useful for setting general defaults:
$.ajaxSetup({
	url			: '/ajax/',
	dataType	: 'json'
});

$.ajaxStart(function(){
	showIndicator();
	disableButtons();
});

$.ajaxComplete(function(){
	hideIndicator();
	enableButtons();
});

/*
	// Additional methods you can use:
	$.ajaxStop();
	$.ajaxError();
	$.ajaxSuccess();
	$.ajaxSend();
*/

Read the docs about jQuery?s AJAX functionality.

13) Use delay() for Animations

Chaining animation effects is a powerful tool in every jQuery developer?s toolbox. One of the more overlooked features is that you can introduce delays between animations.

// This is wrong:
$('#elem').animate({width:200},function(){
	setTimeout(function(){
		$('#elem').animate({marginTop:100});
	},2000);
});

// Do it like this:
$('#elem').animate({width:200}).delay(2000).animate({marginTop:100});

To appreciate how much time jQuery?s animation() save us, just imagine if you had to manage everything yourself: you would need to set timeouts, parse property values, keep track of the animation progress, cancel when appropriate and update numerous variables on every step.

Read the docs about jQuery animations.

14) Make Use of HTML5 Data Attributes

HTML5 data attributes are a simple means to embed data in a webpage. It is useful for exchanging data between the server and the front end, something that used to require outputting <script> blocks or hidden markup.

With the recent updates to the jQuery data() method, HTML5 data attributes are pulled automatically and are available as entries, as you can see from the example below:

<div id="d1" data-role="page" data-last-value="43" data-hidden="true"
	data-options='{"name":"John"}'>
</div>

To access the data attributes of this div, you would use code like the one below:

$("#d1").data("role");			// "page"
$("#d1").data("lastValue");		// 43
$("#d1").data("hidden");		// true;
$("#d1").data("options").name;	// "John";

Read more about data() in the jQuery docs.

15) Local Storage and jQuery

Local storage is a dead simple API for storing information on the client side. Simply add your data as a property of the global localStorage object:

localStorage.someData = "This is going to be saved across page refreshes and browser restarts";

The bad news is that it is not supported in older browsers. This is where you can use one of the many jQuery plugins that provide different fallbacks if localStorage is not available, which makes client-side storage work almost everywhere.

Here is an example using the $.jStorage jQuery plugin:

// Check if "key" exists in the storage
var value = $.jStorage.get("key");
if(!value){
	// if not - load the data from the server
 	value = load_data_from_server();
 	// and save it
	$.jStorage.set("key",value);
}

// Use value

To Wrap it Up

The techniques presented here will give you a head start in effectively using the jQuery library. If you want something to be added to this list, or if you have any suggestions, use the comment section below.

Helpful jQuery Tutorials to Create Beautiful Tooltips

JQUERY | Web Design Comments Off

Here are, we have collected 15 helpful jQuery tooltips tutorials than can help you to applicate in your site. The tooltip can be very simple, or a complex that can preview image and latest tweet, hope it can helped you to find your needs.