<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Afif Fattouh - Web Specialist &#187; jquery</title>
	<atom:link href="http://www.afiffattouh.com/tag/jquery/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.afiffattouh.com</link>
	<description></description>
	<lastBuildDate>Thu, 05 Apr 2012 15:24:20 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</generator>
		<item>
		<title>38 Useful and Effective jQuery Plugins for Responsive Web Design</title>
		<link>http://www.afiffattouh.com/2012/04/05/38-effective-jquery-plugins-responsive-web-design/</link>
		<comments>http://www.afiffattouh.com/2012/04/05/38-effective-jquery-plugins-responsive-web-design/#comments</comments>
		<pubDate>Thu, 05 Apr 2012 15:15:37 +0000</pubDate>
		<dc:creator>Afif Fattouh</dc:creator>
				<category><![CDATA[Web Design]]></category>
		<category><![CDATA[jquery]]></category>
		<category><![CDATA[plugins]]></category>

		<guid isPermaLink="false">http://www.afiffattouh.com/?p=14247</guid>
		<description><![CDATA[<a href="http://www.afiffattouh.com/2012/04/05/38-effective-jquery-plugins-responsive-web-design/"><img align="left" hspace="5" width="150" src="http://designbeep.designbeep.netdna-cdn.com/wp-content/uploads/2012/03/1.responsive-jquery-plugin.jpg" class="alignleft wp-post-image tfe" alt="responsive jquery plugins" title="1.responsive jquery plugin" /></a>If you are familiar with web design for the last 12 months or more then you might just heard of responsive web design.Well,responsive web design or mobile friendly web design is basically the concept of building a website that allows the layout and elements adapt itself according to the device people are viewing. Elastislide Elastislide [...]]]></description>
			<content:encoded><![CDATA[<p>If you are familiar with web design for the last 12 months or more then you might just heard of responsive web design.Well,responsive web design or mobile friendly web design is basically the concept of building a website that allows the layout and elements adapt itself according to the device people are viewing.</p>
<h2>Elastislide</h2>
<p><img class="aligncenter size-full wp-image-22807" title="1.responsive jquery plugin" src="http://designbeep.designbeep.netdna-cdn.com/wp-content/uploads/2012/03/1.responsive-jquery-plugin.jpg" alt="responsive jquery plugins" width="500" height="272" /><br />
Elastislide uses the jQuery Touchwipe Plugin which allows you to obtain the wipe event on an iPhone, iPad or iPod Touch.<br />
<strong><a href="http://tympanus.net/codrops/2011/09/12/elastislide-responsive-carousel/" target="_blank">Plugin Source</a></strong></p>
<p>&nbsp;</p>
<h2>Flexible Slide-to-top Accordion</h2>
<p><img class="aligncenter size-full wp-image-22808" title="2.responsive jquery plugin" src="http://designbeep.designbeep.netdna-cdn.com/wp-content/uploads/2012/03/2.responsive-jquery-plugin.jpg" alt="responsive jquery plugins" width="500" height="272" /><br />
A simple responsive accordion that, when opened, will slide to the top of the viewport and reveal the content by fading it in.<br />
<strong><a href="http://tympanus.net/codrops/2011/10/12/flexible-slide-to-top-accordion/" target="_blank">Plugin Source</a></strong></p>
<p>&nbsp;</p>
<h2>Blueberry</h2>
<p><img class="aligncenter size-full wp-image-22809" title="3.responsive jquery plugin" src="http://designbeep.designbeep.netdna-cdn.com/wp-content/uploads/2012/03/3.responsive-jquery-plugin.jpg" alt="responsive jquery plugins" width="500" height="197" /><br />
Blueberry is an experimental opensource jQuery image slider plugin which has been written specifically to work with fluid/responsive web layouts.<br />
<strong><a href="http://marktyrrell.com/labs/blueberry/" target="_blank">Plugin Source</a></strong></p>
<p>&nbsp;</p>
<h2>FitText</h2>
<p><img class="aligncenter size-full wp-image-22810" title="4.responsive jquery plugin" src="http://designbeep.designbeep.netdna-cdn.com/wp-content/uploads/2012/03/4.responsive-jquery-plugin.jpg" alt="responsive jquery plugins" width="500" height="175" /><br />
FitText makes font-sizes flexible. Use this plugin on your fluid or responsive layout to achieve scalable headlines that fill the width of a parent element.<br />
<strong><a href="http://fittextjs.com/" target="_blank">Plugin Source</a></strong></p>
<p>&nbsp;</p>
<h2>Response JS</h2>
<p><img class="aligncenter size-full wp-image-22811" title="5.responsive jquery plugin" src="http://designbeep.designbeep.netdna-cdn.com/wp-content/uploads/2012/03/5.responsive-jquery-plugin.jpg" alt="responsive jquery plugins" width="500" height="233" /><br />
Response JS is a lightweight jQuery (or Zepto) plugin that gives web designers tools for building performance-optimized, mobile-first responsive websites. It provides semantic ways to dynamically swap code blocks based on breakpoints and serve images (or other media) progressively via HTML5 data attributes.<br />
<strong><a href="http://responsejs.com/" target="_blank">Plugin Source</a></strong></p>
<p>&nbsp;</p>
<h2>jQuery Masonry</h2>
<p><img class="aligncenter size-full wp-image-22812" title="6.responsive jquery plugin" src="http://designbeep.designbeep.netdna-cdn.com/wp-content/uploads/2012/03/6.responsive-jquery-plugin.jpg" alt="responsive jquery plugins" width="500" height="349" /><br />
Masonry is a dynamic grid layout plugin for jQuery<br />
<strong><a href="http://masonry.desandro.com/docs/intro.html" target="_blank">Plugin Source</a></strong></p>
<p>&nbsp;</p>
<h2>Isotope</h2>
<p><img class="aligncenter size-full wp-image-22813" title="7.responsive jquery plugin" src="http://designbeep.designbeep.netdna-cdn.com/wp-content/uploads/2012/03/7.responsive-jquery-plugin.jpg" alt="responsive jquery plugins" width="500" height="333" /><br />
An exquisite jQuery plugin for magical layouts. Enables filtering, sorting, and dynamic layouts.<br />
<strong><a href="http://isotope.metafizzy.co/index.html" target="_blank">Plugin Source</a></strong></p>
<p>&nbsp;</p>
<h2>ScrollDeck.js</h2>
<p><img class="aligncenter size-full wp-image-22814" title="8.responsive jquery plugin" src="http://designbeep.designbeep.netdna-cdn.com/wp-content/uploads/2012/03/8.responsive-jquery-plugin.jpg" alt="responsive jquery plugins" width="500" height="131" /><br />
A jQuery plugin for making scrolling presentation decks<br />
<strong><a href="http://johnpolacek.github.com/scrolldeck.js/" target="_blank">Plugin Source</a></strong></p>
<p>&nbsp;</p>
<h2>Responsive Image Gallery with Thumbnail Carousel</h2>
<p><img class="aligncenter size-full wp-image-22815" title="9.responsive jquery plugin" src="http://designbeep.designbeep.netdna-cdn.com/wp-content/uploads/2012/03/9.responsive-jquery-plugin.jpg" alt="responsive jquery plugins" width="500" height="272" /><br />
Learn how to create a responsive image gallery with a thumbnail carousel using Elastislide. Inspired by Twitter’s “user gallery” and upon a request to show an integration of Elastislide.<br />
<strong><a href="http://tympanus.net/codrops/2011/09/20/responsive-image-gallery/" target="_blank">Plugin Source</a></strong></p>
<p>&nbsp;</p>
<h2>Photo Swipe</h2>
<p><img class="aligncenter size-full wp-image-22816" title="10.responsive jquery plugin" src="http://designbeep.designbeep.netdna-cdn.com/wp-content/uploads/2012/03/10.responsive-jquery-plugin.jpg" alt="responsive jquery plugins" width="500" height="246" /><br />
PhotoSwipe is a FREE HTML/CSS/JavaScript based image gallery specifically targeting mobile devices.Compatible with lots of mobile devices and all popular JavaScript libraries and development frameworks.<br />
<strong><a href="http://www.photoswipe.com/" target="_blank">Plugin Source</a></strong></p>
<p>&nbsp;</p>
<h2>ResponsiveSlides.js v1.22</h2>
<p><img class="aligncenter size-full wp-image-22817" title="11.responsive jquery plugin" src="http://designbeep.designbeep.netdna-cdn.com/wp-content/uploads/2012/03/11.responsive-jquery-plugin.jpg" alt="responsive jquery plugins" width="500" height="310" /><br />
ResponsiveSlides.js is a tiny jQuery plugin that creates a responsive slideshow using images.It works with wide range of browsers including all IE versions from IE6 and up. It also adds css max-width support for IE6 and other browsers that don’t natively support it.<br />
<strong><a href="http://responsive-slides.viljamis.com/" target="_blank">Plugin Source</a></strong></p>
<p>&nbsp;</p>
<h2>Hoverizr</h2>
<p><img class="aligncenter size-full wp-image-22818" title="12.responsive jquery plugin" src="http://designbeep.designbeep.netdna-cdn.com/wp-content/uploads/2012/03/12.responsive-jquery-plugin.jpg" alt="responsive jquery plugins" width="500" height="271" /><br />
Hoverizr is a really small (2.5KB minified) responsive jQuery plugin that outputs manipulated images on top (or below) your targeted images.<br />
<strong><a href="http://www.iliasiovis.com/hoverizr/" target="_blank">Plugin Source</a></strong></p>
<p>&nbsp;</p>
<h2>Fitvid.js</h2>
<p><img class="aligncenter size-full wp-image-22819" title="13.responsive jquery plugin" src="http://designbeep.designbeep.netdna-cdn.com/wp-content/uploads/2012/03/13.responsive-jquery-plugin.jpg" alt="responsive jquery plugins" width="500" height="270" /><br />
A lightweight, easy-to-use jQuery plugin for fluid width video embeds.<br />
<strong><a href="http://fitvidsjs.com/" target="_blank">Plugin Source</a></strong></p>
<p>&nbsp;</p>
<h2>Responsly.js</h2>
<p><img class="aligncenter size-full wp-image-22820" title="14.responsive jquery plugin" src="http://designbeep.designbeep.netdna-cdn.com/wp-content/uploads/2012/03/14.responsive-jquery-plugin.jpg" alt="responsive jquery plugins" width="500" height="240" /><br />
Written using CSS3 transformations and available as a jQuery Plugin. Currently a sideshow and accordion are available.<br />
<strong><a href="http://dmmalam.github.com/Responsly.js/" target="_blank">Plugin Source</a></strong></p>
<p>&nbsp;</p>
<h2>wmuSlider</h2>
<p><img class="aligncenter size-full wp-image-22821" title="15.responsive jquery plugin" src="http://designbeep.designbeep.netdna-cdn.com/wp-content/uploads/2012/03/15.responsive-jquery-plugin.jpg" alt="responsive jquery plugins" width="500" height="281" /><br />
A jQuery responsive slider with touch support and AJAX image gallery.<br />
<strong><a href="http://brice.lechatellier.com/code-design/wmuslider/" target="_blank">Plugin Source</a></strong></p>
<p>&nbsp;</p>
<h2>rlightbox – a jQuery UI mediabox</h2>
<p><img class="aligncenter size-full wp-image-22822" title="16.responsive jquery plugin" src="http://designbeep.designbeep.netdna-cdn.com/wp-content/uploads/2012/03/16.responsive-jquery-plugin.jpg" alt="responsive jquery plugins" width="500" height="242" /><br />
rlightbox is a jQuery UI mediabox that can display many types of content such as images, YouTube and Vimeo videos.<br />
<strong><a href="http://ryrych.github.com/rlightbox2/" target="_blank">Plugin Source</a></strong></p>
<p>&nbsp;</p>
<h2>Responsive Images</h2>
<p><img class="aligncenter size-full wp-image-22823" title="17.responsive jquery plugin" src="http://designbeep.designbeep.netdna-cdn.com/wp-content/uploads/2012/03/17.responsive-jquery-plugin.jpg" alt="responsive jquery plugins" width="500" height="309" /><br />
The goal of this technique is to deliver optimized, contextual image sizes in responsive layouts that utilize dramatically different image sizes at different resolutions.<br />
<strong><a href="https://github.com/filamentgroup/Responsive-Images" target="_blank">Plugin Source</a></strong></p>
<p>&nbsp;</p>
<h2>Pull Down for Navigation</h2>
<p><img class="aligncenter size-full wp-image-22824" title="18.responsive jquery plugin" src="http://designbeep.designbeep.netdna-cdn.com/wp-content/uploads/2012/03/18.responsive-jquery-plugin.jpg" alt="responsive jquery plugins" width="500" height="476" /><br />
A simple and effective way of removing a button from the interface and a great use of touch screen input. This technique has been widely adopted amongst a range of different apps.<br />
<strong><a href="http://inspectelement.com/tutorials/pull-down-for-navigation-a-responsive-solution/" target="_blank">Plugin Source</a></strong></p>
<p>&nbsp;</p>
<h2>Glisse.js</h2>
<p><img class="aligncenter size-full wp-image-22825" title="19.responsive jquery plugin" src="http://designbeep.designbeep.netdna-cdn.com/wp-content/uploads/2012/03/19.responsive-jquery-plugin.jpg" alt="responsive jquery plugins" width="500" height="240" /><br />
Glisse.js is a simple, responsive and fully customizable jQuery photo viewer. You’ll like the transitions between two pictures entirely assumed by CSS3.<br />
<strong><a href="http://glisse.victorcoulon.fr/" target="_blank">Plugin Source</a></strong></p>
<p>&nbsp;</p>
<h2>jQuery Anystretch</h2>
<p><img class="aligncenter size-full wp-image-22826" title="20.responsive jquery plugin" src="http://designbeep.designbeep.netdna-cdn.com/wp-content/uploads/2012/03/20.responsive-jquery-plugin.jpg" alt="responsive jquery plugins" width="500" height="639" /><br />
Anystretch is a jQuery plugin that allows you to add a dynamically-resized background image to any page or block level element. The image will stretch to fit the page/element, and will automatically resize as the window size changes<br />
<strong><a href="https://github.com/danmillar/jquery-anystretch" target="_blank">Plugin Source</a></strong></p>
<p>&nbsp;</p>
<h2>slabText</h2>
<p><img class="aligncenter size-full wp-image-22827" title="21.responsive jquery plugin" src="http://designbeep.designbeep.netdna-cdn.com/wp-content/uploads/2012/03/21.responsive-jquery-plugin.jpg" alt="responsive jquery plugins" width="500" height="344" /><br />
a jQuery plugin for producing big, bold &amp; responsive headlines.<br />
<strong><a href="http://www.frequency-decoder.com/demo/slabText/" target="_blank">Plugin Source</a></strong></p>
<p>&nbsp;</p>
<h2>Responsive Thumbnail Gallery</h2>
<p><img class="aligncenter size-full wp-image-22828" title="22.responsive jquery plugin" src="http://designbeep.designbeep.netdna-cdn.com/wp-content/uploads/2012/03/22.responsive-jquery-plugin.jpg" alt="responsive jquery plugins" width="500" height="331" /><br />
jQuery Plugin for creating image galleries that scale to fit their container.<br />
<strong><a href="http://johnpolacek.github.com/ResponsiveThumbnailGallery/" target="_blank">Plugin Source</a></strong></p>
<p>&nbsp;</p>
<h2>Flexslider</h2>
<p><img class="aligncenter size-full wp-image-22829" title="23.responsive jquery plugin" src="http://designbeep.designbeep.netdna-cdn.com/wp-content/uploads/2012/03/23.responsive-jquery-plugin.jpg" alt="responsive jquery plugins" width="500" height="358" /><br />
FlexSlider has been verified in Safari 4+, Chrome 4+, Firefox 3.6+, Opera 10+, and IE7+. iOS and Android devices are supported as well. jQuery versions 1.3+ are supported<br />
<strong><a href="http://www.woothemes.com/flexslider/" target="_blank">Plugin Source</a></strong></p>
<p>&nbsp;</p>
<h2>TinyNav.js</h2>
<p><img class="aligncenter size-full wp-image-22830" title="24.responsive jquery plugin" src="http://designbeep.designbeep.netdna-cdn.com/wp-content/uploads/2012/03/24.responsive-jquery-plugin.jpg" alt="responsive jquery plugins" width="500" height="175" /><br />
TinyNav.js is a tiny jQuery plugin (362 bytes minified and gzipped) that converts dropdowns for small screen. It also automatically selects the current page.<br />
<strong><a href="http://tinynav.viljamis.com/" target="_blank">Plugin Source</a></strong></p>
<p>&nbsp;</p>
<h2>Simple Responsive Menu</h2>
<p><img class="aligncenter size-full wp-image-22831" title="25.responsive jquery plugin" src="http://designbeep.designbeep.netdna-cdn.com/wp-content/uploads/2012/03/25.responsive-jquery-plugin.jpg" alt="responsive jquery plugins" width="500" height="205" /><br />
If you’re on a mobile phone or if you narrow the browser window you’ll see a menu button appear which upon pressing displays the considerably unexciting menu and pressing it again retracts it.<br />
<strong><a href="http://danny-t.co.uk/index.php/2012/03/02/really-simple-responsive-menu/" target="_blank">Plugin Source</a></strong></p>
<p>&nbsp;</p>
<h2>Backstretch</h2>
<p><img class="aligncenter size-full wp-image-22832" title="26.responsive jquery plugin" src="http://designbeep.designbeep.netdna-cdn.com/wp-content/uploads/2012/03/26.responsive-jquery-plugin.jpg" alt="responsive jquery plugins" width="500" height="170" /><br />
A simple jQuery plugin that allows you to add a dynamically-resized background image to any page.<br />
<strong><a href="http://srobbin.com/jquery-plugins/backstretch/" target="_blank">Plugin Source</a></strong></p>
<p>&nbsp;</p>
<h2>Doubletake</h2>
<p><img class="aligncenter size-full wp-image-22833" title="27.responsive jquery plugin" src="http://designbeep.designbeep.netdna-cdn.com/wp-content/uploads/2012/03/27.responsive-jquery-plugin.jpg" alt="responsive jquery plugins" width="500" height="454" /><br />
Doubletake dynamically updates the src of your images based on the browser width. Start with a small, mobile-friendly image in your HTML. Doubletake will use a defined set of breakpoints to update image SRCs when necessary.<br />
<strong><a href="http://www.grahambird.co.uk/lab/doubletake/" target="_blank">Plugin Source</a></strong></p>
<p>&nbsp;</p>
<h2>jQuery.carouFredSel</h2>
<p><img class="aligncenter size-full wp-image-22834" title="28.responsive jquery plugin" src="http://designbeep.designbeep.netdna-cdn.com/wp-content/uploads/2012/03/28.responsive-jquery-plugin.jpg" alt="responsive jquery plugins" width="500" height="197" /><br />
jQuery.carouFredSel is a plugin that turns any kind of HTML element into a carousel. It can scroll one or multiple items simultaneously, horizontal or vertical, infinite and circular, automatically or by user interaction.<br />
<strong><a href="http://caroufredsel.frebsite.nl/" target="_blank">Plugin Source</a></strong></p>
<p>&nbsp;</p>
<h2>Automatic Image Montage with jQuery</h2>
<p><img class="aligncenter size-full wp-image-22835" title="29.responsive jquery plugin" src="http://designbeep.designbeep.netdna-cdn.com/wp-content/uploads/2012/03/29.responsive-jquery-plugin.jpg" alt="responsive jquery plugins" width="500" height="272" /><br />
With the following script you can automatically create a montage, either for a liquid container or a fixed size container (including fullscreen), with the option to fill all the gaps.<br />
<strong><a href="http://tympanus.net/codrops/2011/08/30/automatic-image-montage/" target="_blank">Plugin Source</a></strong></p>
<p>&nbsp;</p>
<h2>fancyBox</h2>
<p><img class="aligncenter size-full wp-image-22836" title="30.responsive jquery plugin" src="http://designbeep.designbeep.netdna-cdn.com/wp-content/uploads/2012/03/30.responsive-jquery-plugin.jpg" alt="responsive jquery plugins" width="500" height="332" /><br />
fancyBox is a tool that offers a nice and elegant way to add zooming functionality for images, html content and multi-media on your webpages. It is built at the top of the popular JavaScript framework jQuery and is both easy to implement and a snap to customize.<br />
<strong><a href="http://fancyapps.com/fancybox/" target="_blank">Plugin Source</a></strong></p>
<p>&nbsp;</p>
<h2>Breakpoints.js</h2>
<p><img class="aligncenter size-full wp-image-22837" title="31.responsive jquery plugin" src="http://designbeep.designbeep.netdna-cdn.com/wp-content/uploads/2012/03/31.responsive-jquery-plugin.jpg" alt="responsive jquery plugins" width="500" height="239" /><br />
Define breakpoints for your responsive design, and Breakpoints.js will fire custom events when the browser enters and/or exits that breakpoint.<br />
<strong><a href="http://xoxco.com/projects/code/breakpoints/" target="_blank">Plugin Source</a></strong></p>
<p>&nbsp;</p>
<h2>Camera</h2>
<p><img class="aligncenter size-full wp-image-22838" title="32.responsive jquery plugin" src="http://designbeep.designbeep.netdna-cdn.com/wp-content/uploads/2012/03/32.responsive-jquery-plugin.jpg" alt="responsive jquery plugins" width="500" height="342" /><br />
Camera is a responsive slideshow based on Diapo slideshow but improved a lot.<br />
<strong><a href="http://www.pixedelic.com/plugins/camera/" target="_blank">Plugin Source</a></strong></p>
<p>&nbsp;</p>
<h2>bgStretcher</h2>
<p><img class="aligncenter size-full wp-image-22839" title="33.responsive jquery plugin" src="http://designbeep.designbeep.netdna-cdn.com/wp-content/uploads/2012/03/33.responsive-jquery-plugin.jpg" alt="responsive jquery plugins" width="500" height="220" /><br />
bgStretcher is a jQuery plug-in which allows you to add a large image (or a set of images) to the background of your web page and will proportionally resize the image(s) to fill the entire window area. The plug-in will work as a slideshow if multiple images mode is used (the speed and duration for the slideshow is configurable).<br />
<strong><a href="http://www.ajaxblender.com/bgstretcher-2-jquery-stretch-background-plugin-updated.html" target="_blank">Plugin Source</a></strong></p>
<p>&nbsp;</p>
<h2>jQSlider</h2>
<p><img class="aligncenter size-full wp-image-22840" title="34.responsive jquery plugin" src="http://designbeep.designbeep.netdna-cdn.com/wp-content/uploads/2012/03/34.responsive-jquery-plugin.jpg" alt="responsive jquery plugins" width="500" height="274" /><br />
jQSlider follows a new approach in sliding content. Where most slider-plugins are moving the whole list of slides when animating, jQSlider animates only the list with two visible slides at the time. But the most important difference is, that it is not cloning the first (respectively last) slides to realize a circular movement.<br />
<strong><a href="http://marcellodisimone.github.com/jquery.jqslider/" target="_blank">Plugin Source</a></strong></p>
<p>&nbsp;</p>
<h2>jQuery Flex Vertical Center</h2>
<p><img class="aligncenter size-full wp-image-22841" title="35.responsive jquery plugin" src="http://designbeep.designbeep.netdna-cdn.com/wp-content/uploads/2012/03/35.responsive-jquery-plugin.jpg" alt="responsive jquery plugins" width="500" height="267" /><br />
This jQuery plugin provides an easy way to vertically center an element in its parent. Even if the parents height changes after resizing the browser window, in a fluid or responsive layout for example.<br />
<strong><a href="https://github.com/PaulSpr/jQuery-Flex-Vertical-Center" target="_blank">Plugin Source</a></strong></p>
<p>&nbsp;</p>
<h2>Dialog</h2>
<p><img class="aligncenter size-full wp-image-22842" title="36.responsive jquery plugin" src="http://designbeep.designbeep.netdna-cdn.com/wp-content/uploads/2012/03/36.responsive-jquery-plugin.jpg" alt="responsive jquery plugins" width="500" height="196" /><br />
A responsive, accessible dialog jQuery plugin for presenting information and prompting for user action.<br />
<strong><a href="http://tornqvist.github.com/dialog/" target="_blank">Plugin Source</a></strong></p>
<p>&nbsp;</p>
<h2>SelectNav.js</h2>
<p><img class="aligncenter size-full wp-image-22843" title="37.responsive jquery plugin" src="http://designbeep.designbeep.netdna-cdn.com/wp-content/uploads/2012/03/37.responsive-jquery-plugin.jpg" alt="responsive jquery plugins" width="500" height="218" /><br />
Responsive drop-down navigation for mobiles and small screen devices.<br />
<strong><a href="http://lukaszfiszer.github.com/selectnav.js/" target="_blank">Plugin Source</a></strong></p>
<p>&nbsp;</p>
<h2>Refine Slide</h2>
<p><img class="aligncenter size-full wp-image-22844" title="38.responsive jquery plugin" src="http://designbeep.designbeep.netdna-cdn.com/wp-content/uploads/2012/03/38.responsive-jquery-plugin.jpg" alt="responsive jquery plugins" width="500" height="318" /><br />
RefineSlide is a 3D transform/CSS transition-enabled jQuery plugin for displaying responsive, image-based content.<br />
<strong><a href="http://alexdunphy.github.com/refineslide/" target="_blank">Plugin Source</a></strong></p>
<p><img src="http://feeds.feedburner.com/~r/designbeep/GSai/~4/AQx6RnpFRp4" alt="" width="1" height="1" /></p>


<div class="shr-bookmarks shr-bookmarks-spaced shr-bookmarks-bg-caring-old">
<ul class="socials">
		<li class="shr-facebook">
			<a href="http://www.shareaholic.com/api/share/?title=38+Useful+and+Effective+jQuery+Plugins+for+Responsive+Web+Design&amp;link=http://www.afiffattouh.com/2012/04/05/38-effective-jquery-plugins-responsive-web-design/&amp;notes=If%20you%20are%20familiar%20with%20web%20design%20for%20the%20last%2012%20months%20or%20more%20then%20you%20might%20just%20heard%20of%20responsive%20web%20design.Well%2Cresponsive%20web%20design%20or%20mobile%20friendly%20web%20design%20is%20basically%20the%20concept%20of%20building%20a%20website%20that%20allows%20the%20layout%20and%20elements%20adapt%20itself%20according%20to%20the%20device%20peopl&amp;short_link=&amp;shortener=bitly&amp;shortener_key=afiffattouh|R_fc1b634bfa3a187f0081885b36f65e36&amp;v=1&amp;apitype=1&amp;apikey=8afa39428933be41f8afdb8ea21a495c&amp;source=Shareaholic&amp;template=&amp;service=5&amp;tags=&amp;ctype=" rel="nofollow" title="Share this on Facebook">Share this on Facebook</a>
		</li>
		<li class="shr-twitter">
			<a href="http://www.shareaholic.com/api/share/?title=38+Useful+and+Effective+jQuery+Plugins+for+Responsive+Web+Design&amp;link=http://www.afiffattouh.com/2012/04/05/38-effective-jquery-plugins-responsive-web-design/&amp;notes=If%20you%20are%20familiar%20with%20web%20design%20for%20the%20last%2012%20months%20or%20more%20then%20you%20might%20just%20heard%20of%20responsive%20web%20design.Well%2Cresponsive%20web%20design%20or%20mobile%20friendly%20web%20design%20is%20basically%20the%20concept%20of%20building%20a%20website%20that%20allows%20the%20layout%20and%20elements%20adapt%20itself%20according%20to%20the%20device%20peopl&amp;short_link=&amp;shortener=bitly&amp;shortener_key=afiffattouh|R_fc1b634bfa3a187f0081885b36f65e36&amp;v=1&amp;apitype=1&amp;apikey=8afa39428933be41f8afdb8ea21a495c&amp;source=Shareaholic&amp;template=%2524%257Btitle%257D%2B-%2B%2524%257Bshort_link%257D&amp;service=7&amp;tags=&amp;ctype=" rel="nofollow" class="external" title="Tweet This!">Tweet This!</a>
		</li>
		<li class="shr-linkedin">
			<a href="http://www.shareaholic.com/api/share/?title=38+Useful+and+Effective+jQuery+Plugins+for+Responsive+Web+Design&amp;link=http://www.afiffattouh.com/2012/04/05/38-effective-jquery-plugins-responsive-web-design/&amp;notes=If%20you%20are%20familiar%20with%20web%20design%20for%20the%20last%2012%20months%20or%20more%20then%20you%20might%20just%20heard%20of%20responsive%20web%20design.Well%2Cresponsive%20web%20design%20or%20mobile%20friendly%20web%20design%20is%20basically%20the%20concept%20of%20building%20a%20website%20that%20allows%20the%20layout%20and%20elements%20adapt%20itself%20according%20to%20the%20device%20peopl&amp;short_link=&amp;shortener=bitly&amp;shortener_key=afiffattouh|R_fc1b634bfa3a187f0081885b36f65e36&amp;v=1&amp;apitype=1&amp;apikey=8afa39428933be41f8afdb8ea21a495c&amp;source=Shareaholic&amp;template=&amp;service=88&amp;tags=&amp;ctype=" rel="nofollow" class="external" title="Share this on LinkedIn">Share this on LinkedIn</a>
		</li>
		<li class="shr-delicious">
			<a href="http://www.shareaholic.com/api/share/?title=38+Useful+and+Effective+jQuery+Plugins+for+Responsive+Web+Design&amp;link=http://www.afiffattouh.com/2012/04/05/38-effective-jquery-plugins-responsive-web-design/&amp;notes=If%20you%20are%20familiar%20with%20web%20design%20for%20the%20last%2012%20months%20or%20more%20then%20you%20might%20just%20heard%20of%20responsive%20web%20design.Well%2Cresponsive%20web%20design%20or%20mobile%20friendly%20web%20design%20is%20basically%20the%20concept%20of%20building%20a%20website%20that%20allows%20the%20layout%20and%20elements%20adapt%20itself%20according%20to%20the%20device%20peopl&amp;short_link=&amp;shortener=bitly&amp;shortener_key=afiffattouh|R_fc1b634bfa3a187f0081885b36f65e36&amp;v=1&amp;apitype=1&amp;apikey=8afa39428933be41f8afdb8ea21a495c&amp;source=Shareaholic&amp;template=&amp;service=2&amp;tags=&amp;ctype=" rel="nofollow" class="external" title="Share this on del.icio.us">Share this on del.icio.us</a>
		</li>
		<li class="shr-gmail">
			<a href="http://www.shareaholic.com/api/share/?title=38+Useful+and+Effective+jQuery+Plugins+for+Responsive+Web+Design&amp;link=http://www.afiffattouh.com/2012/04/05/38-effective-jquery-plugins-responsive-web-design/&amp;notes=If%20you%20are%20familiar%20with%20web%20design%20for%20the%20last%2012%20months%20or%20more%20then%20you%20might%20just%20heard%20of%20responsive%20web%20design.Well%2Cresponsive%20web%20design%20or%20mobile%20friendly%20web%20design%20is%20basically%20the%20concept%20of%20building%20a%20website%20that%20allows%20the%20layout%20and%20elements%20adapt%20itself%20according%20to%20the%20device%20peopl&amp;short_link=&amp;shortener=bitly&amp;shortener_key=afiffattouh|R_fc1b634bfa3a187f0081885b36f65e36&amp;v=1&amp;apitype=1&amp;apikey=8afa39428933be41f8afdb8ea21a495c&amp;source=Shareaholic&amp;template=&amp;service=52&amp;tags=&amp;ctype=" rel="nofollow" class="external" title="Email this via Gmail">Email this via Gmail</a>
		</li>
		<li class="shr-tumblr">
			<a href="http://www.shareaholic.com/api/share/?title=38+Useful+and+Effective+jQuery+Plugins+for+Responsive+Web+Design&amp;link=http%3A%2F%2Fwww.afiffattouh.com%2F2012%2F04%2F05%2F38-effective-jquery-plugins-responsive-web-design%2F&amp;notes=If%20you%20are%20familiar%20with%20web%20design%20for%20the%20last%2012%20months%20or%20more%20then%20you%20might%20just%20heard%20of%20responsive%20web%20design.Well%2Cresponsive%20web%20design%20or%20mobile%20friendly%20web%20design%20is%20basically%20the%20concept%20of%20building%20a%20website%20that%20allows%20the%20layout%20and%20elements%20adapt%20itself%20according%20to%20the%20device%20peopl&amp;short_link=&amp;shortener=bitly&amp;shortener_key=afiffattouh|R_fc1b634bfa3a187f0081885b36f65e36&amp;v=1&amp;apitype=1&amp;apikey=8afa39428933be41f8afdb8ea21a495c&amp;source=Shareaholic&amp;template=&amp;service=78&amp;tags=&amp;ctype=" rel="nofollow" class="external" title="Share this on Tumblr">Share this on Tumblr</a>
		</li>
		<li class="shr-printfriendly">
			<a href="http://www.shareaholic.com/api/share/?title=38+Useful+and+Effective+jQuery+Plugins+for+Responsive+Web+Design&amp;link=http://www.afiffattouh.com/2012/04/05/38-effective-jquery-plugins-responsive-web-design/&amp;notes=If%20you%20are%20familiar%20with%20web%20design%20for%20the%20last%2012%20months%20or%20more%20then%20you%20might%20just%20heard%20of%20responsive%20web%20design.Well%2Cresponsive%20web%20design%20or%20mobile%20friendly%20web%20design%20is%20basically%20the%20concept%20of%20building%20a%20website%20that%20allows%20the%20layout%20and%20elements%20adapt%20itself%20according%20to%20the%20device%20peopl&amp;short_link=&amp;shortener=bitly&amp;shortener_key=afiffattouh|R_fc1b634bfa3a187f0081885b36f65e36&amp;v=1&amp;apitype=1&amp;apikey=8afa39428933be41f8afdb8ea21a495c&amp;source=Shareaholic&amp;template=&amp;service=236&amp;tags=&amp;ctype=" rel="nofollow" class="external" title="Send this page to Print Friendly">Send this page to Print Friendly</a>
		</li>
</ul><div style="clear: both;"></div><div class="shr-getshr" style="visibility:hidden;font-size:10px !important"><a target="_blank" href="http://www.shareaholic.com/?src=pub">Get Shareaholic</a></div><div style="clear: both;"></div></div>

]]></content:encoded>
			<wfw:commentRss>http://www.afiffattouh.com/2012/04/05/38-effective-jquery-plugins-responsive-web-design/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>All About jQuery: Plugins, Tutorials and Resources</title>
		<link>http://www.afiffattouh.com/2010/10/18/all-about-jquery-plugins-tutorials-and-resources/</link>
		<comments>http://www.afiffattouh.com/2010/10/18/all-about-jquery-plugins-tutorials-and-resources/#comments</comments>
		<pubDate>Mon, 18 Oct 2010 10:40:14 +0000</pubDate>
		<dc:creator>Afif Fattouh</dc:creator>
				<category><![CDATA[Web Design]]></category>
		<category><![CDATA[jquery]]></category>
		<category><![CDATA[plugins]]></category>
		<category><![CDATA[resources]]></category>
		<category><![CDATA[tutorials]]></category>

		<guid isPermaLink="false">http://www.afiffattouh.com/?p=8994</guid>
		<description><![CDATA[<a href="http://www.afiffattouh.com/2010/10/18/all-about-jquery-plugins-tutorials-and-resources/"><img align="left" hspace="5" width="150" src="http://media.smashingmagazine.com/cdn_noupe/wp-content/uploads/2010/10/jqueryplugins26.jpg" class="alignleft wp-post-image tfe" alt="Jqueryplugins26 in All About jQuery: Plugins, Tutorials and Resources" title="" /></a>In this post, we are presenting a bunch of exciting and awesome jQuery plugins for your use. As we all know very well that jQuery is the most famous Javascript framework available out there which comes with many amazing features and is quite easy to be used. You can use these plugins to add beautiful [...]]]></description>
			<content:encoded><![CDATA[<p>In this post, we are presenting a bunch of exciting and awesome jQuery plugins for your use. As we all know very well that jQuery is the most famous Javascript framework available out there which comes with many amazing features and is quite easy to be used.</p>
<p>You can use these plugins to add beautiful effects and functionality in your next project. These plugins will also help you in completing your task easily.</p>
<p><span> </span></p>
<h3>jQuery Menu and Navigation</h3>
<p><a href="http://tympanus.net/codrops/2010/09/06/collapsing-site-navigation/">Collapsing Site Navigation with jQuery</a> ( <a href="http://tympanus.net/Tutorials/CollapsingSiteNavigation/">Demo </a> | <a href="http://tympanus.net/Tutorials/CollapsingSiteNavigation/CollapsingSiteNavigation.zip">Download</a> )<br />
Creating a collapsing menu that contains vertical navigation bars and a slide out content area. When hovering over a menu item, an image slides down from the top and a submenu slides up from the bottom.</p>
<p><a href="http://tympanus.net/codrops/2010/09/06/collapsing-site-navigation/"><img src="http://media.smashingmagazine.com/cdn_noupe/wp-content/uploads/2010/10/jqueryplugins26.jpg" alt="Jqueryplugins26 in All About jQuery: Plugins, Tutorials and Resources" width="520" height="282" /></a></p>
<p><a href="http://tympanus.net/codrops/2010/05/05/beautiful-background-image-navigation-with-jquery/">Beautiful Background Image Navigation with jQuery</a> ( <a href="http://tympanus.net/Tutorials/BeautifulBackgroundImageNavigation/">Demo </a> | <a href="http://tympanus.net/Tutorials/BeautifulBackgroundImageNavigation/BeautifulBackgroundImageNavigation.zip">Download</a> )<br />
A beautiful navigation that has a background image slide effect. The main idea is to have three list items that contain the same background image but with a different position. The background image for each item will be animated to slide into place in different times, creating a really nice effect.</p>
<p><a href="http://tympanus.net/codrops/2010/05/05/beautiful-background-image-navigation-with-jquery/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/10/jqueryplugins27.jpg" alt="Jqueryplugins27 in All About jQuery: Plugins, Tutorials and Resources" width="520" height="323" /></a></p>
<p><a href="http://css-tricks.com/downloads/">Slot Machine Tabs</a> ( <a href="http://css-tricks.com/examples/SlotMachineTabs/">Demo </a> | <a href="http://css-tricks.com/examples/SlotMachineTabs.zip">Download</a> )<br />
Three columns in each content box rotate like a slot machine to reveal the content in the next content box when a new tab is clicked.</p>
<p><a href="http://css-tricks.com/downloads/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/10/jqueryplugins404.jpg" alt="Jqueryplugins404 in All About jQuery: Plugins, Tutorials and Resources" width="520" height="293" /></a></p>
<p><a href="http://tutorialzine.com/2009/09/stylish-navigation-menu-jquery/">Stylish Navigation Men</a> ( <a href="http://demo.tutorialzine.com/2009/09/stylish-navigation-menu-jquery/">Demo </a> | <a href="http://demo.tutorialzine.com/2009/09/stylish-navigation-menu-jquery/demo.zip">Download</a> )<br />
A stylish CSS + XHTML navigation menu.</p>
<p><a href="http://tutorialzine.com/2009/09/stylish-navigation-menu-jquery/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/10/jqueryplugins22.jpg" alt="Jqueryplugins22 in All About jQuery: Plugins, Tutorials and Resources" width="520" height="325" /></a></p>
<p><a href="http://users.tpg.com.au/j_birch/plugins/superfish/#sample1x">SUPERFISH JQUERY MENU PLUGIN</a> ( <a href="http://users.tpg.com.au/j_birch/plugins/superfish/#sample1x">Demo </a> | <a href="http://users.tpg.com.au/j_birch/plugins/superfish/#download">Download</a> )<br />
Superfish is an enhanced Suckerfish-style menu jQuery plugin that takes an existing pure CSS drop-down menu.</p>
<p><a href="http://users.tpg.com.au/j_birch/plugins/superfish/#sample1x"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/10/jqueryplugins23.jpg" alt="Jqueryplugins23 in All About jQuery: Plugins, Tutorials and Resources" width="520" height="329" /></a></p>
<p><a href="http://www.gmarwaha.com/blog/2007/08/23/lavalamp-for-jquery-lovers/">LavaLamp for jQuery lovers!</a> ( <a href="http://www.gmarwaha.com/blog/2007/08/23/lavalamp-for-jquery-lovers/">Demo </a> | <a href="http://www.gmarwaha.com/blog/2007/08/23/lavalamp-for-jquery-lovers/">Download</a> )<br />
Lavalamp allows you to create a beautiful effect over your horizontal navigation bars.</p>
<p><a href="http://www.gmarwaha.com/blog/2007/08/23/lavalamp-for-jquery-lovers/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/10/jqueryplugins24.jpg" alt="Jqueryplugins24 in All About jQuery: Plugins, Tutorials and Resources" width="520" height="222" /></a></p>
<p><a href="http://www.noupe.com/tutorial/drop-down-menu-jquery-css.html">Sexy Drop Down Menu w/ jQuery &amp; CSS</a> ( <a href="http://www.sohtanaka.com/web-design/examples/drop-down-menu/">Demo </a> | <a href="http://www.noupe.com/tutorial/drop-down-menu-jquery-css.html">Download</a> )<br />
Create a sexy drop down menu that can also degrade gracefully.</p>
<p><a href="http://www.noupe.com/tutorial/drop-down-menu-jquery-css.html"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/10/jqueryplugins25.jpg" alt="Jqueryplugins25 in All About jQuery: Plugins, Tutorials and Resources" width="520" height="277" /></a></p>
<p><a href="http://plugins.jquery.com/projects/plugins?type=44">SLIDE A NAVIGATION TOOL IN YOUR PAGE</a> ( <a href="http://pupunzi.com/#mb.components/mb.extruder/extruder.html">Demo </a> | <a href="http://pupunzi.open-lab.com/mb-jquery-components/jquery-mb-extruder/">Download</a> )<br />
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.</p>
<p><a href="http://plugins.jquery.com/projects/plugins?type=44"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/10/jqueryplugins21.jpg" alt="Jqueryplugins21 in All About jQuery: Plugins, Tutorials and Resources" width="520" height="327" /></a></p>
<p><a href="http://www.1stwebdesigner.com/tutorials/create-stay-on-top-menu-css3-jquery/">Stay-On-Top Menu</a> ( <a href="http://www.1stwebdesigner.com/wp-content/uploads/2010/06/nagging-menu-with-css3-and-jquery/index.html">Demo </a> | <a href="http://www.1stwebdesigner.com/wp-content/uploads/2010/06/nagging-menu-with-css3-and-jquery.zip">Download</a> )</p>
<p><a href="http://www.1stwebdesigner.com/tutorials/create-stay-on-top-menu-css3-jquery/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/10/jqueryplugins28.jpg" alt="Jqueryplugins28 in All About jQuery: Plugins, Tutorials and Resources" width="520" height="261" /></a></p>
<p><a href="http://www.danwellman.co.uk/plugin-update-hoverfade-1-0-2/">HoverFade</a> ( <a href="http://www.danwellman.co.uk/plugin-update-hoverfade-1-0-2/">Demo </a> | <a href="http://www.danwellman.co.uk/plugin-update-hoverfade-1-0-2/">Download</a> )<br />
The plugin is designed to be used with navigation menus, where each menu item is made from an anchor element within a list-item element. You can apply the effect to different collections of elements by supplying new trigger and faderTemplate options.</p>
<p><a href="http://www.danwellman.co.uk/plugin-update-hoverfade-1-0-2/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/10/jqueryplugins29.jpg" alt="Jqueryplugins29 in All About jQuery: Plugins, Tutorials and Resources" width="520" height="296" /></a></p>
<p><a href="http://apycom.com/menus/1-dim-gray.html">jQuery Menu Style</a> ( <a href="http://apycom.com/menus/1-dim-gray.html">Demo </a> | <a href="http://apycom.com/menus/1-dim-gray.html">Download</a> )<br />
An Easy to setup and beautiful Menu Plugin.</p>
<p><a href="http://apycom.com/menus/1-dim-gray.html"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/10/jqueryplugins30.jpg" alt="Jqueryplugins30 in All About jQuery: Plugins, Tutorials and Resources" width="520" height="287" /></a></p>
<h3>jQuery Slideshow and Image Gallery</h3>
<p><a href="http://tympanus.net/codrops/2010/07/29/thumbnails-navigation-gallery/">Thumbnails Navigation Gallery with jQuery</a> ( <a href="http://tympanus.net/Tutorials/ThumbnailsNavigationGallery/">Demo </a> | <a href="http://tympanus.net/Tutorials/ThumbnailsNavigationGallery/ThumbnailsNavigationGallery.zip">Download</a> )<br />
An extraordinary gallery with scrollable thumbnails that slide out from a navigation. The main idea is to have a menu of albums where each item will reveal a horizontal bar with thumbnails when clicked. The thumbnails container will scroll automatically when the user moves the mouse to the left or right.</p>
<p><a href="http://tympanus.net/codrops/2010/07/29/thumbnails-navigation-gallery/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/10/jqueryplugins38.jpg" alt="Jqueryplugins38 in All About jQuery: Plugins, Tutorials and Resources" width="520" height="282" /></a></p>
<p><a href="http://tympanus.net/codrops/2010/07/05/minimalistic-slideshow-gallery/">Minimalistic Slideshow Gallery with jQuery</a> ( <a href="http://tympanus.net/Tutorials/MinimalisticSlideshowGallery/">Demo </a> | <a href="http://tympanus.net/Tutorials/MinimalisticSlideshowGallery/MinimalisticSlideshowGallery.zip">Download</a> )<br />
A simple and beautiful slideshow gallery that can be easily integrated in your web site. The idea is to have a container with our slideshow and the options to view a grid of thumbnails, pause the slideshow, and navigate through the pictures. The thumbnail grid will slide out from the top and allow the user to navigate through a set of thumbnails.</p>
<p><a href="http://tympanus.net/codrops/2010/07/05/minimalistic-slideshow-gallery/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/10/jqueryplugins40.jpg" alt="Jqueryplugins40 in All About jQuery: Plugins, Tutorials and Resources" width="520" height="437" /></a></p>
<p><a href="http://tutorialzine.com/2010/09/html5-canvas-slideshow-jquery/">HTML5 Slideshow w/ Canvas &amp; jQuery</a> ( <a href="http://demo.tutorialzine.com/2010/09/html5-canvas-slideshow-jquery/html5-slideshow.html">Demo </a> | <a href="http://demo.tutorialzine.com/2010/09/html5-canvas-slideshow-jquery/html5-slideshow.zip">Download</a> )<br />
You’ve probably heard a lot about the new HTML5 canvas element. As the name implies, this is a special element that allows us to create and modify graphics. In addition, we can also use it like any other element on the page – apply jQuery animations on it.</p>
<p><a href="http://tutorialzine.com/2010/09/html5-canvas-slideshow-jquery/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/10/jqueryplugins31.jpg" alt="Jqueryplugins31 in All About jQuery: Plugins, Tutorials and Resources" width="520" height="386" /></a></p>
<p><a href="http://tutorialzine.com/2009/10/slick-content-slider-jquery/">A Slick Content Slider</a> ( <a href="http://demo.tutorialzine.com/2009/10/slick-content-slider-jquery/demo.php">Demo </a> | <a href="http://demo.tutorialzine.com/2009/10/slick-content-slider-jquery/demo.zip">Download</a> )<br />
In this tutorial we are going to make a slick content slider for a computer shop, with the help of jQuery and the MopSlider plugin.</p>
<p><a href="http://tutorialzine.com/2009/10/slick-content-slider-jquery/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/10/jqueryplugins32.jpg" alt="Jqueryplugins32 in All About jQuery: Plugins, Tutorials and Resources" width="520" height="209" /></a></p>
<p><a href="http://tutorialzine.com/2009/10/google-wave-history-slider-jquery/">Google Wave History Slider</a> ( <a href="http://demo.tutorialzine.com/2009/10/google-wave-history-slider-jquery/demo.php">Demo </a> | <a href="http://demo.tutorialzine.com/2009/10/google-wave-history-slider-jquery/demo.zip">Download</a> )<br />
It shows you how to create a Google Wave-like history slider. Using it, we will enable our visitors to go back and forth in time to view the changes that take place on a comment thread.</p>
<p><a href="http://tutorialzine.com/2009/10/google-wave-history-slider-jquery/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/10/jqueryplugins33.jpg" alt="Jqueryplugins33 in All About jQuery: Plugins, Tutorials and Resources" width="520" height="393" /></a></p>
<p><a href="http://tutorialzine.com/2009/09/cool-jquery-gallery/">Cool jQuery Gallery</a> ( <a href="http://demo.tutorialzine.com/2009/09/cool-jquery-gallery/demo.php">Demo </a> | <a href="http://demo.tutorialzine.com/2009/09/cool-jquery-gallery/demo.zip">Download</a> )<br />
A custom gallery that scans a folder of images and outputs a slick gallery, utilizing PHP, CSS, jQuery and the jQuery Lightbox plug-in.</p>
<p><a href="http://tutorialzine.com/2009/09/cool-jquery-gallery/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/10/jqueryplugins34.jpg" alt="Jqueryplugins34 in All About jQuery: Plugins, Tutorials and Resources" width="520" height="342" /></a></p>
<p><a href="http://workshop.rs/projects/jqfancytransitions/">jqFancyTransitions</a> ( <a href="http://workshop.rs/projects/jqfancytransitions/">Demo </a> | <a href="http://workshop.rs/projects/jqfancytransitions/">Download</a> )<br />
jqFancyTransitions is easy-to-use jQuery plugin for displaying your photos as slideshow with fancy transition effects.</p>
<p><a href="http://workshop.rs/projects/jqfancytransitions/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/10/jqueryplugins36.jpg" alt="Jqueryplugins36 in All About jQuery: Plugins, Tutorials and Resources" width="520" height="375" /></a></p>
<p><a href="http://www.yoxigen.com/yoxview/">YoxView – jQuer Image Viewer Plugin</a> ( <a href="http://www.yoxigen.com/yoxview/">Demo </a> | <a href="http://www.yoxigen.com/yoxview/">Download</a> )<br />
YoxView is a free Lightbox-type media and image viewer jQuery plugin. It’s easy to use and feature-rich.</p>
<p><a href="http://www.yoxigen.com/yoxview/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/10/jqueryplugins37.jpg" alt="Jqueryplugins37 in All About jQuery: Plugins, Tutorials and Resources" width="520" height="466" /></a></p>
<p><a href="http://tympanus.net/codrops/2010/06/27/beautiful-photo-stack-gallery-with-jquery-and-css3/">Beautiful Photo Stack Gallery with jQuery and CSS3</a> ( <a href="http://tympanus.net/Tutorials/PhotoStack/">Demo </a> | <a href="http://tympanus.net/Tutorials/PhotoStack/PhotoStack.zip">Download</a> )<br />
A Beautiful and fresh image gallery. The idea is to show the albums as a slider, and when an album is chosen, we show the images of that album as a beautiful photo stack. In the photo stack view, we can browse through the images by putting the top most image behind all the stack with a slick animation.</p>
<p><a href="http://tympanus.net/codrops/2010/06/27/beautiful-photo-stack-gallery-with-jquery-and-css3/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/10/jqueryplugins39.jpg" alt="Jqueryplugins39 in All About jQuery: Plugins, Tutorials and Resources" width="520" height="282" /></a></p>
<p><a href="http://tympanus.net/codrops/2010/05/23/fresh-sliding-thumbnails-gallery-with-jquery-php/">Fresh Sliding Thumbnails Gallery with jQuery and PHP</a> ( <a href="http://tympanus.net/Tutorials/FreshSlidingThumbnailsGallery/">Demo </a> | <a href="http://tympanus.net/Tutorials/FreshSlidingThumbnailsGallery/FreshSlidingThumbnailsGallery.zip">Download</a> )<br />
A full page image gallery with a nice thumbnail area that scrolls automatically when moving the mouse. The idea is to allow the user to slightly zoom into the picture by clicking on it. The thumbnails bar slides down and the image resizes according to the screen size.</p>
<p><a href="http://tympanus.net/codrops/2010/05/23/fresh-sliding-thumbnails-gallery-with-jquery-php/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/10/jqueryplugins401.jpg" alt="Jqueryplugins401 in All About jQuery: Plugins, Tutorials and Resources" width="520" height="282" /></a></p>
<p><a href="http://css-tricks.com/downloads/">Auto-Playing Featured Content Slider</a> ( <a href="http://css-tricks.com/examples/FeaturedContentSlider/">Demo </a> | <a href="http://css-tricks.com/examples/FeaturedContentSlider.zip">Download</a> )<br />
This is an alteration based on the jQuery “Coda Slider” plugin. Each “slide” can be any kind of html content whatsoever, or be a full-size image with an overlay.</p>
<p><a href="http://css-tricks.com/downloads/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/10/jqueryplugins402.jpg" alt="Jqueryplugins402 in All About jQuery: Plugins, Tutorials and Resources" width="520" height="417" /></a></p>
<p><a href="http://www.slidedeck.com/">Slide Deck</a> ( <a href="http://www.slidedeck.com/wp-admin/admin-ajax.php?action=usdd_show&amp;url=http%3A%2F%2Frss1.smashingmagazine.com%2Ffeed%2F&amp;_wpnonce=fecc532c17">Demo </a> | <a href="http://www.slidedeck.com/pricing">Download</a> )<br />
SlideDeck is a powerful slider plugin made for web designers. With SlideDeck, you can organize any type of web content into a beautiful and user-friendly slider.</p>
<p><a href="http://www.slidedeck.com/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/10/jqueryplugins403.jpg" alt="Jqueryplugins403 in All About jQuery: Plugins, Tutorials and Resources" width="520" height="249" /></a></p>
<h3>jQuery Table Manipulation</h3>
<p><a href="http://www.datatables.net/">DataTables</a> ( <a href="http://www.datatables.net/">Demo </a> | <a href="http://www.datatables.net/download">Download</a> )<br />
DataTables is a plug-in for the jQuery Javascript library. It is a highly flexible tool, based upon the foundations of progressive enhancement, which will add advanced interaction controls to any HTML table.</p>
<p><a href="http://www.datatables.net/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/10/jqueryplugins41.jpg" alt="Jqueryplugins41 in All About jQuery: Plugins, Tutorials and Resources" width="520" height="235" /></a></p>
<p><a href="http://www.webtoolkit.info/scrollable-html-table-plugin-for-jquery.html">Scrollable HTML table</a> ( <a href="http://www.webtoolkit.info/demo/scrollable-html-table-plugin-for-jquery">Demo </a> | <a href="http://www.webtoolkit.info/scrollable-html-table-plugin-for-jquery.html">Download</a> )<br />
This JavaScript code can be used to convert tables in ordinary HTML into scrollable ones. No additional coding is necessary. All you need to do is put header rows (if you need them) in THEAD section, table body rows in TBODY section, footer rows (if you need them) in TFOOT section.</p>
<p><a href="http://www.webtoolkit.info/scrollable-html-table-plugin-for-jquery.html"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/10/jqueryplugins42.jpg" alt="Jqueryplugins42 in All About jQuery: Plugins, Tutorials and Resources" width="520" height="329" /></a></p>
<p><a href="http://www.hanpau.com/index.php?page=jqtreetable">JQTreeTable</a> ( <a href="http://www.hanpau.com/index.php?page=jqtreetable">Demo </a> | <a href="http://www.hanpau.com/index.php?page=jqtreetable">Download</a> )<br />
With JQTreeTable, you can have a treeview in your table. With this plugin, users still get the plain table even thought they disable Javascript.</p>
<p><a href="http://www.hanpau.com/index.php?page=jqtreetable"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/10/jqueryplugins43.jpg" alt="Jqueryplugins43 in All About jQuery: Plugins, Tutorials and Resources" width="520" height="243" /></a></p>
<p><a href="http://flexigrid.info/">Flexigrid</a> ( <a href="http://flexigrid.info/">Demo </a> | <a href="http://code.google.com/p/flexigrid/">Download</a> )<br />
Flexigrid is a lightweight but rich data grid with resizable columns and a scrolling data to match the headers, plus an ability to connect to an xml based data source using Ajax to load the content.</p>
<p><a href="http://flexigrid.info/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/10/jqueryplugins44.jpg" alt="Jqueryplugins44 in All About jQuery: Plugins, Tutorials and Resources" width="520" height="232" /></a></p>
<p><a href="http://tablesorter.com/docs/">Tablesorter</a> ( <a href="http://tablesorter.com/docs/#Demo">Demo </a> | <a href="http://tablesorter.com/docs/#Download">Download</a> )<br />
tablesorter is a jQuery plugin for turning a standard HTML table with THEAD and TBODY tags into a sortable table without page refreshes. tablesorter can successfully parse and sort many types of data including linked data in a cell. It has many useful feature.</p>
<p><a href="http://tablesorter.com/docs/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/10/jqueryplugins45.jpg" alt="Jqueryplugins45 in All About jQuery: Plugins, Tutorials and Resources" width="520" height="123" /></a></p>
<p><a href="http://reconstrukt.com/ingrid/">Ingrid</a> ( <a href="http://reconstrukt.com/ingrid/src/example3.html">Demo </a> | <a href="http://reconstrukt.com/ingrid/">Download</a> )<br />
Ingrid is an unobtrusive jQuery component that adds datagrid behaviors (column resizing, paging, sorting, row and column styling, and more)</p>
<p><a href="http://reconstrukt.com/ingrid/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/10/jqueryplugins46.jpg" alt="Jqueryplugins46 in All About jQuery: Plugins, Tutorials and Resources" width="520" height="370" /></a></p>
<p><a href="http://p.sohei.org/jquery-plugins/columnmanager/">jQuery ColumnManager plugin</a> ( <a href="http://p.sohei.org/stuff/jquery/columnmanager/demo/demo.html">Demo </a> | <a href="http://p.sohei.org/download-manager.php?id=54">Download</a> )<br />
A jQuery-plugin to toggle the visibility of table columns (collapsing and expanding them) and to save the state until the next visit.<br />
It’s supporting tables with colspans and rowspans, too!</p>
<p><a href="http://p.sohei.org/jquery-plugins/columnmanager/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/10/jqueryplugins47.jpg" alt="Jqueryplugins47 in All About jQuery: Plugins, Tutorials and Resources" width="520" height="219" /></a></p>
<p><a href="http://neoalchemy.org/tablePagination.html">Table Pagination</a> ( <a href="http://neoalchemy.org/tablePagination.html">Demo </a> | <a href="http://neoalchemy.org/js/jquery.tablePagination.0.2.min.js">Download</a> )<br />
This jquery plugin is used to create a pagination element under a table element. You can customize your pagination needs through various settings.</p>
<p><a href="http://neoalchemy.org/tablePagination.html"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/10/jqueryplugins48.jpg" alt="Jqueryplugins48 in All About jQuery: Plugins, Tutorials and Resources" width="520" /></a></p>
<p><a href="http://pure-essence.net/2008/02/26/jquery-plugin-tablerowcheckboxtoggle/">jQuery TableRowCheckboxToggle</a> ( <a href="http://pure-essence.net/stuff/webTips/jqueryTableRowCheckboxToggle.html">Demo </a> | <a href="http://pure-essence.net/stuff/webTips/jquery.tableRowCheckboxToggle.zip">Download</a> )<br />
This plugin can add toggle checkbox to any rows that can be specified through the CSS class names.</p>
<p><a href="http://pure-essence.net/2008/02/26/jquery-plugin-tablerowcheckboxtoggle/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/10/jqueryplugins49.jpg" alt="Jqueryplugins49 in All About jQuery: Plugins, Tutorials and Resources" width="520" height="161" /></a></p>
<p><a href="http://gregweber.info/projects/uitablefilter">uiTableFilter</a> ( <a href="http://gregweber.info/projects/demo/flavorzoom.html">Demo </a> | <a href="http://plugins.jquery.com/project/uiTableFilter">Download</a> )<br />
uiTableFilter is a jQuery plugin for filtering table rows.</p>
<p><a href="http://gregweber.info/projects/uitablefilter"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/10/jqueryplugins50.jpg" alt="Jqueryplugins50 in All About jQuery: Plugins, Tutorials and Resources" width="520" height="329" /></a></p>
<h3>jQuery Form Element Enhancing</h3>
<p><a href="http://net.tutsplus.com/tutorials/javascript-ajax/create-a-progress-bar-with-javascript/">Progress Bar</a> ( <a href="http://nettuts.s3.amazonaws.com/266_progressSlider/jQuery%20UI/regForm.html">Demo </a> | <a href="http://nettuts.s3.amazonaws.com/266_progressSlider/progressbar_sourceFiles.rar">Download</a> )<br />
It’s a very simple widget with a small API that exposes a limited number of properties and methods, but it can still be highly effective and is great for providing visual feedback to visitors on the percentage of a process is left before it is complete.</p>
<p><a href="http://net.tutsplus.com/tutorials/javascript-ajax/create-a-progress-bar-with-javascript/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/10/jqueryplugins98.jpg" alt="Jqueryplugins98 in All About jQuery: Plugins, Tutorials and Resources" width="520" height="402" /></a></p>
<p><a href="http://www.webdesignbeach.com/beachbar/ajax-fancy-captcha-jquery-plugin">Ajax Fancy Captcha</a> ( <a href="http://www.webdesignbeach.com/beachbar/ajax-fancy-captcha-jquery-plugin">Demo </a> | <a href="http://www.webdesignbeach.com/beachbar/ajax-fancy-captcha-jquery-plugin">Download</a> )<br />
Ajax Fancy Captcha is a jQuery plugin that helps you protect your web pages from bots and spammers.</p>
<p><a href="http://www.webdesignbeach.com/beachbar/ajax-fancy-captcha-jquery-plugin"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/10/jqueryplugins93.jpg" alt="Jqueryplugins93 in All About jQuery: Plugins, Tutorials and Resources" width="520" height="289" /></a></p>
<p><a href="http://www.unwrongest.com/projects/elastic/">Elastic – Make your textareas grow</a> ( <a href="http://www.unwrongest.com/projects/elastic/">Demo </a> | <a href="http://www.unwrongest.com/projects/elastic/">Download</a> )<br />
This Jquery plugin makes your textareas grow and shrink to fit it’s content. It was inspired by the auto growing textareas on Facebook. The major difference between Elastic and it’s competitors is it’s weight.</p>
<p><a href="http://www.unwrongest.com/projects/elastic/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/10/jqueryplugins91.jpg" alt="Jqueryplugins91 in All About jQuery: Plugins, Tutorials and Resources" width="520" height="190" /></a></p>
<p><a href="http://www.keyframesandcode.com/code/development/javascript/jquery-highlight-plugin/">jQuery “Highlight” Plugin</a> ( <a href="http://www.keyframesandcode.com/code/development/javascript/jquery-highlight-plugin/">Demo </a> | <a href="http://www.keyframesandcode.com/code/development/javascript/jquery-highlight-plugin/">Download</a> )</p>
<p><a href="http://www.keyframesandcode.com/code/development/javascript/jquery-highlight-plugin/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/10/jqueryplugins92.jpg" alt="Jqueryplugins92 in All About jQuery: Plugins, Tutorials and Resources" width="520" height="207" /></a></p>
<p><a href="http://www.jankoatwarpspeed.com/post/2009/09/28/webform-wizard-jquery.aspx">FormToWizard Plugin</a> ( <a href="http://www.jankoatwarpspeed.com/examples/webform_to_wizard/">Demo </a> | <a href="http://www.jankoatwarpspeed.com/file.axd?file=2009%2F9%2FFormToWizard.zip">Download</a> )<br />
The FormToWizard plugin help you to turn any webform into a powerful wizard with jQuery with “steps left” information.</p>
<p><a href="http://www.jankoatwarpspeed.com/post/2009/09/28/webform-wizard-jquery.aspx"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/10/jqueryplugins94.jpg" alt="Jqueryplugins94 in All About jQuery: Plugins, Tutorials and Resources" width="520" height="236" /></a></p>
<p><a href="http://www.appelsiini.net/projects/filestyle">File Style jQuery</a> ( <a href="http://www.appelsiini.net/projects/filestyle/demo.html">Demo </a> | <a href="http://www.appelsiini.net/projects/filestyle">Download</a> )<br />
Browsers do not let you style file inputs. File Style plugin fixes this problem. It enables you to use image as browse button. You can also style filename field as normal textfield using css. It is written using JavaScript and jQuery.</p>
<p><a href="http://www.appelsiini.net/projects/filestyle"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/10/jqueryplugins95.jpg" alt="Jqueryplugins95 in All About jQuery: Plugins, Tutorials and Resources" width="520" height="294" /></a></p>
<p><a href="http://www.uploadify.com/what-is-it/">Uploadify – a multiple file upload plugin for jQuery</a> ( <a href="http://www.uploadify.com/demo/">Demo </a> | <a href="http://www.uploadify.com/what-is-it/">Download</a> )<br />
Uploadify is a jQuery plugin that allows the easy integration of a multiple (or single) file uploads on your website.  It requires Flash and any backend development language.  An array of options allow for full customization for advanced users, but basic implementation is so easy that even coding novices can do it.</p>
<p><a href="http://www.uploadify.com/what-is-it/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/10/jqueryplugins97.jpg" alt="Jqueryplugins97 in All About jQuery: Plugins, Tutorials and Resources" width="520" height="317" /></a></p>
<p><a href="http://www.w3avenue.com/2010/02/09/jquery-form-wizard-plugin/">jQuery Form Wizard Plugin</a> ( <a href="http://thecodemine.org/">Demo </a> | <a href="http://www.w3avenue.com/2010/02/09/jquery-form-wizard-plugin/">Download</a> )<br />
The jQuery Form Wizard Plugin will convert your regular forms into step-by-step form wizard without having to reload the page when moving from one step to another. The plugin is unobtrusive and gives you the ability to set up flow of the different steps, by creating specific routes based on user input.</p>
<p><a href="http://www.w3avenue.com/2010/02/09/jquery-form-wizard-plugin/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/10/jqueryplugins80.jpg" alt="Jqueryplugins80 in All About jQuery: Plugins, Tutorials and Resources" width="520" height="260" /></a></p>
<p><a href="http://pixelmatrixdesign.com/uniform/">Uniform – Sexy forms with jQuery</a> ( <a href="http://pixelmatrixdesign.com/uniform/#example">Demo </a> | <a href="http://github.com/pixelmatrix/uniform/zipball/master">Download</a> )<br />
Uniform masks your standard form controls with custom themed controls. It works in sync with your real form elements to ensure accessibility and compatibility.</p>
<p><a href="http://pixelmatrixdesign.com/uniform/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/10/jqueryplugins99.jpg" alt="Jqueryplugins99 in All About jQuery: Plugins, Tutorials and Resources" width="520" height="251" /></a></p>
<p><a href="http://www.adamleder.com/sandbox/jquery.uiSelect.1.0/">jQuery.uiSelect</a> ( <a href="http://www.adamleder.com/sandbox/jquery.uiSelect.1.0/">Demo </a> | <a href="http://www.adamleder.com/sandbox/jquery.uiSelect.1.0/">Download</a> )</p>
<p><a href="http://www.adamleder.com/sandbox/jquery.uiSelect.1.0/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/10/jqueryplugins100.jpg" alt="Jqueryplugins100 in All About jQuery: Plugins, Tutorials and Resources" width="520" height="385" /></a></p>
<p><a href="http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/">Autocomplete</a> ( <a href="http://jquery.bassistance.de/autocomplete/demo/">Demo </a> | <a href="http://jquery.bassistance.de/autocomplete/jquery.autocomplete.zip">Download</a> )<br />
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.</p>
<p><a href="http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/10/jqueryplugins101.jpg" alt="Jqueryplugins101 in All About jQuery: Plugins, Tutorials and Resources" width="520" height="334" /></a></p>
<h3>jQuery Miscellaneous</h3>
<p><a href="http://razorjack.net/quicksand/">jQuery Quicksand</a> ( <a href="http://razorjack.net/quicksand/docs-and-demos.html">Demo </a> | <a href="http://razorjack.net/quicksand/quicksand.1.2.1.zip">Download</a> )<br />
Reorder and filter items with a nice shuffling animation.</p>
<p><a href="http://razorjack.net/quicksand/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/10/jqueryplugins79.jpg" alt="Jqueryplugins79 in All About jQuery: Plugins, Tutorials and Resources" width="520" height="374" /></a></p>
<p><a href="http://tutorialzine.com/2010/02/jquery-photoshoot-plugin/">jQuery PhotoShoot</a> ( <a href="http://demo.tutorialzine.com/2010/02/photo-shoot-css-jquery/demo.html">Demo </a> | <a href="http://demo.tutorialzine.com/2010/02/photo-shoot-css-jquery/photoShoot-1.0.zip">Download</a> )<br />
The jQuery PhotoShoot plugin gives you the ability to convert any div on your web page into a photo shooting effect, complete with a view finder.</p>
<p><a href="http://tutorialzine.com/2010/02/jquery-photoshoot-plugin/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/10/jqueryplugins35.jpg" alt="Jqueryplugins35 in All About jQuery: Plugins, Tutorials and Resources" width="520" height="323" /></a></p>
<p><a href="http://jonraasch.com/blog/quickflip-2-jquery-plugin">QuickFlip</a> ( <a href="http://jonraasch.com/blog/quickflip-2-jquery-plugin">Demo </a> | <a href="http://dev.jonraasch.com/quickflip/download">Download</a> )<br />
It flips any piece of HTML markup over like a card. The new version is faster and even easier to use—simply call the flip animation through a jQuery selector and the QuickFlip will flip the front panel to show its back.</p>
<p><a href="http://jonraasch.com/blog/quickflip-2-jquery-plugin"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/10/jqueryplugins71.jpg" alt="Jqueryplugins71 in All About jQuery: Plugins, Tutorials and Resources" width="520" height="251" /></a></p>
<p><a href="http://isthatclear.com/jquery/canimate/">Canimate</a> ( <a href="http://isthatclear.com/jquery/canimate/">Demo </a> | <a href="http://isthatclear.com/jquery/canimate/">Download</a> )<br />
If you’ve ever wanted to create an animation using a series of images for your website, but were forced to an alternative because you didn’t want to deal with the constraints of the GIF filetype, like color limit and difficult-to-deal-with FPS controls, then Canimate is the solution.</p>
<p><a href="http://isthatclear.com/jquery/canimate/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/10/jqueryplugins72.jpg" alt="Jqueryplugins72 in All About jQuery: Plugins, Tutorials and Resources" width="520" height="251" /></a></p>
<p><a href="http://tutorialzine.com/2010/07/colortips-jquery-tooltip-plugin/">Tooltip</a> ( <a href="http://demo.tutorialzine.com/2010/07/colortips-jquery-tooltip-plugin/colortips.html">Demo </a> | <a href="http://demo.tutorialzine.com/2010/07/colortips-jquery-tooltip-plugin/colortips.zip">Download</a> )<br />
In this tutorial we are going to write a simple jQuery tooltip plugin. It is going to convert the title attributes of elements withing your page, into a series of colorful tooltips. Six color themes are available, so you can easily match it with the rest of your design.</p>
<p><a href="http://tutorialzine.com/2010/07/colortips-jquery-tooltip-plugin/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/10/jqueryplugins73.jpg" alt="Jqueryplugins73 in All About jQuery: Plugins, Tutorials and Resources" width="520" height="251" /></a></p>
<p><a href="http://tutorialzine.com/2009/10/jquery-twitter-ticker/">jQuery Twitter Ticker</a> ( <a href="http://demo.tutorialzine.com/2009/10/jquery-twitter-ticker/demo.html">Demo </a> | <a href="http://demo.tutorialzine.com/2009/10/jquery-twitter-ticker/demo.zip">Download</a> )<br />
Create a pure jQuery &amp; CSS twitter ticker which utilizes Twitter’s Search API.</p>
<p><a href="http://tutorialzine.com/2009/10/jquery-twitter-ticker/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/10/jqueryplugins74.jpg" alt="Jqueryplugins74 in All About jQuery: Plugins, Tutorials and Resources" width="520" height="418" /></a></p>
<p><a href="http://tutorialzine.com/2009/09/fancy-contact-form/">A Fancy AJAX Contact Form</a> ( <a href="http://demo.tutorialzine.com/2009/09/fancy-contact-form/demo.php">Demo </a> | <a href="http://demo.tutorialzine.com/2009/09/fancy-contact-form/demo.zip">Download</a> )<br />
In this tutorial we are going to make an AJAX contact form which leverages modern web development techniques.<br />
We are using PHP, CSS and jQuery with the help of the formValidator plugin for form validation and the JQTransform plugin</p>
<p><a href="http://tutorialzine.com/2009/09/fancy-contact-form/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/10/jqueryplugins75.jpg" alt="Jqueryplugins75 in All About jQuery: Plugins, Tutorials and Resources" width="520" height="354" /></a></p>
<p><a href="http://jquery-notes.rydygel.de/index.php">jQuery-Notes 1.0.2</a> ( <a href="http://jquery-notes.rydygel.de/jQuery-Notes_1.0.8.rar">Demo </a> | <a href="http://jquery-notes.rydygel.de/jQuery-Notes_1.0.8.rar">Download</a> )<br />
jQuery-Notes is a simple and easy to use jQuery-Plugin that allows you to add notes to any image (even foreign ones) on your website or blog.</p>
<p><a href="http://jquery-notes.rydygel.de/index.php"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/10/jqueryplugins76.jpg" alt="Jqueryplugins76 in All About jQuery: Plugins, Tutorials and Resources" width="520" height="469" /></a></p>
<p><a href="http://fredhq.com/projects/roundabout/">jQuery Roundabout</a> ( <a href="http://fredhq.com/projects/roundabout/">Demo </a> | <a href="http://fredhq.com/projects/roundabout/">Download</a> )</p>
<p><a href="http://fredhq.com/projects/roundabout/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/10/jqueryplugins77.jpg" alt="Jqueryplugins77 in All About jQuery: Plugins, Tutorials and Resources" width="520" height="225" /></a></p>
<p><a href="http://www.moretechtips.net/2010/02/google-buzz-widget-jquery-plugin.html">Google Buzz Widget</a> ( <a href="http://google-buzz-widget.googlecode.com/svn/v1/demo1.htm">Demo </a> | <a href="http://www.moretechtips.net/2010/02/google-buzz-widget-jquery-plugin.html">Download</a> )</p>
<p><a href="http://www.moretechtips.net/2010/02/google-buzz-widget-jquery-plugin.html"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/10/jqueryplugins78.jpg" alt="Jqueryplugins78 in All About jQuery: Plugins, Tutorials and Resources" width="520" height="195" /></a></p>
<p><a href="http://premiumsoftware.net/cleditor/">CLEditor</a> ( <a href="http://premiumsoftware.net/cleditor/">Demo </a> | <a href="http://premiumsoftware.net/cleditor/">Download</a> )<br />
CLEditor is an open source jQuery plugin which provides a lightweight, full featured, cross browser, extensible, WYSIWYG HTML editor that can be easily added into any web site.</p>
<p><a href="http://premiumsoftware.net/cleditor/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/10/jqueryplugins81.jpg" alt="Jqueryplugins81 in All About jQuery: Plugins, Tutorials and Resources" width="520" height="214" /></a></p>
<p><a href="http://www.xarg.org/project/jquery-color-plugin-xcolor/">jQuery color plugin xcolor</a> ( <a href="http://www.xarg.org/project/jquery-color-plugin-xcolor/">Demo </a> | <a href="http://www.xarg.org/download/jquery.xcolor.js">Download</a> )</p>
<p><a href="http://www.xarg.org/project/jquery-color-plugin-xcolor/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/10/jqueryplugins82.jpg" alt="Jqueryplugins82 in All About jQuery: Plugins, Tutorials and Resources" width="520" height="260" /></a></p>
<p><a href="http://odyniec.net/projects/imgareaselect/">IdmgAreaSelect</a> ( <a href="http://odyniec.net/projects/imgareaselect/examples.html">Demo </a> | <a href="http://odyniec.net/projects/imgareaselect/jquery.imgareaselect-0.9.2.zip">Download</a> )<br />
imgAreaSelect is a jQuery plugin for selecting a rectangular area of an image. It allows web developers to easily implement image cropping functionality, as well as other user interface features.</p>
<p><a href="http://odyniec.net/projects/imgareaselect/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/10/jqueryplugins83.jpg" alt="Jqueryplugins83 in All About jQuery: Plugins, Tutorials and Resources" width="520" height="286" /></a></p>
<h3>Useful Resources</h3>
<ul>
<li><a href="http://www.smashingmagazine.com/2010/04/27/45-useful-jquery-techniques-and-plugins/">jQuery Techniques and Plugins</a><br />
40 useful but obscure jQuery plug-ins that will hopefully help you improve the user experience on your websites.</li>
<li><a href="http://www.noupe.com/jquery/35-useful-jquery-plugins-for-slideshows-graphs-and-text-effects.html">Useful jQuery Plugins for Slideshows, Graphs and Text Effects</a><br />
35 powerful and effective jQuery plugins and techniques for slideshows, graphs and text effects.</li>
<li><a href="http://www.smashingmagazine.com/2010/02/18/50-css-and-javascript-techniques-for-layouts-forms-and-visual-effects/">50 Useful Coding Techniques (CSS Layouts, Visual Effects and Forms)</a><br />
An overview of useful CSS/jQuery coding tips, tricks and techniques for visual effects, layouts and web form design to help you find solutions to the problems you are dealing with or will have to deal with in future.</li>
<li><a href="http://speckyboy.com/2010/03/01/25-amazing-and-fresh-jquery-plugins/">Amazing and Fresh jQuery Plugins</a><br />
25 of the best newly (or, pretty close to new) released jQuery plugins.</li>
<li><a href="http://sixrevisions.com/javascript/40-exceptional-jquery-interface-techniques-and-tutorials/">40 Exceptional jQuery Interface Techniques and Tutorials</a><br />
Explore the strengths of jQuery in letting web developers create impressive client-side-based user interface components.</li>
<li><a href="http://www.instantshift.com/2009/02/05/40-excellent-jquery-tutorials/">40+ Excellent jQuery Tutorials</a><br />
Various jQuery Tutorials for your source of inspiration.</li>
<li><a href="http://www.noupe.com/javascript/50-useful-javascript-and-jquery-techniques-and-plugins.html">50 Useful JavaScript and jQuery Techniques and Plugins</a><br />
Useful JavaScript and jQuery techniques, plugins and tools that may help you improve the user experience for your site.</li>
</ul>


<div class="shr-bookmarks shr-bookmarks-spaced shr-bookmarks-bg-caring-old">
<ul class="socials">
		<li class="shr-facebook">
			<a href="http://www.shareaholic.com/api/share/?title=All+About+jQuery%3A+Plugins%2C+Tutorials+and+Resources&amp;link=http://www.afiffattouh.com/2010/10/18/all-about-jquery-plugins-tutorials-and-resources/&amp;notes=In%20this%20post%2C%20we%20are%20presenting%20a%20bunch%20of%20exciting%20and%20awesome%20jQuery%20plugins%20for%20your%20use.%20As%20we%20all%20know%20very%20well%20that%20jQuery%20is%20the%20most%20famous%20Javascript%20framework%20available%20out%20there%20which%20comes%20with%20many%20amazing%20features%20and%20is%20quite%20easy%20to%20be%20used.%0D%0A%0D%0AYou%20can%20use%20these%20plugins%20to%20add%20beaut&amp;short_link=&amp;shortener=bitly&amp;shortener_key=afiffattouh|R_fc1b634bfa3a187f0081885b36f65e36&amp;v=1&amp;apitype=1&amp;apikey=8afa39428933be41f8afdb8ea21a495c&amp;source=Shareaholic&amp;template=&amp;service=5&amp;tags=&amp;ctype=" rel="nofollow" title="Share this on Facebook">Share this on Facebook</a>
		</li>
		<li class="shr-twitter">
			<a href="http://www.shareaholic.com/api/share/?title=All+About+jQuery%3A+Plugins%2C+Tutorials+and+Resources&amp;link=http://www.afiffattouh.com/2010/10/18/all-about-jquery-plugins-tutorials-and-resources/&amp;notes=In%20this%20post%2C%20we%20are%20presenting%20a%20bunch%20of%20exciting%20and%20awesome%20jQuery%20plugins%20for%20your%20use.%20As%20we%20all%20know%20very%20well%20that%20jQuery%20is%20the%20most%20famous%20Javascript%20framework%20available%20out%20there%20which%20comes%20with%20many%20amazing%20features%20and%20is%20quite%20easy%20to%20be%20used.%0D%0A%0D%0AYou%20can%20use%20these%20plugins%20to%20add%20beaut&amp;short_link=&amp;shortener=bitly&amp;shortener_key=afiffattouh|R_fc1b634bfa3a187f0081885b36f65e36&amp;v=1&amp;apitype=1&amp;apikey=8afa39428933be41f8afdb8ea21a495c&amp;source=Shareaholic&amp;template=%2524%257Btitle%257D%2B-%2B%2524%257Bshort_link%257D&amp;service=7&amp;tags=&amp;ctype=" rel="nofollow" class="external" title="Tweet This!">Tweet This!</a>
		</li>
		<li class="shr-linkedin">
			<a href="http://www.shareaholic.com/api/share/?title=All+About+jQuery%3A+Plugins%2C+Tutorials+and+Resources&amp;link=http://www.afiffattouh.com/2010/10/18/all-about-jquery-plugins-tutorials-and-resources/&amp;notes=In%20this%20post%2C%20we%20are%20presenting%20a%20bunch%20of%20exciting%20and%20awesome%20jQuery%20plugins%20for%20your%20use.%20As%20we%20all%20know%20very%20well%20that%20jQuery%20is%20the%20most%20famous%20Javascript%20framework%20available%20out%20there%20which%20comes%20with%20many%20amazing%20features%20and%20is%20quite%20easy%20to%20be%20used.%0D%0A%0D%0AYou%20can%20use%20these%20plugins%20to%20add%20beaut&amp;short_link=&amp;shortener=bitly&amp;shortener_key=afiffattouh|R_fc1b634bfa3a187f0081885b36f65e36&amp;v=1&amp;apitype=1&amp;apikey=8afa39428933be41f8afdb8ea21a495c&amp;source=Shareaholic&amp;template=&amp;service=88&amp;tags=&amp;ctype=" rel="nofollow" class="external" title="Share this on LinkedIn">Share this on LinkedIn</a>
		</li>
		<li class="shr-delicious">
			<a href="http://www.shareaholic.com/api/share/?title=All+About+jQuery%3A+Plugins%2C+Tutorials+and+Resources&amp;link=http://www.afiffattouh.com/2010/10/18/all-about-jquery-plugins-tutorials-and-resources/&amp;notes=In%20this%20post%2C%20we%20are%20presenting%20a%20bunch%20of%20exciting%20and%20awesome%20jQuery%20plugins%20for%20your%20use.%20As%20we%20all%20know%20very%20well%20that%20jQuery%20is%20the%20most%20famous%20Javascript%20framework%20available%20out%20there%20which%20comes%20with%20many%20amazing%20features%20and%20is%20quite%20easy%20to%20be%20used.%0D%0A%0D%0AYou%20can%20use%20these%20plugins%20to%20add%20beaut&amp;short_link=&amp;shortener=bitly&amp;shortener_key=afiffattouh|R_fc1b634bfa3a187f0081885b36f65e36&amp;v=1&amp;apitype=1&amp;apikey=8afa39428933be41f8afdb8ea21a495c&amp;source=Shareaholic&amp;template=&amp;service=2&amp;tags=&amp;ctype=" rel="nofollow" class="external" title="Share this on del.icio.us">Share this on del.icio.us</a>
		</li>
		<li class="shr-gmail">
			<a href="http://www.shareaholic.com/api/share/?title=All+About+jQuery%3A+Plugins%2C+Tutorials+and+Resources&amp;link=http://www.afiffattouh.com/2010/10/18/all-about-jquery-plugins-tutorials-and-resources/&amp;notes=In%20this%20post%2C%20we%20are%20presenting%20a%20bunch%20of%20exciting%20and%20awesome%20jQuery%20plugins%20for%20your%20use.%20As%20we%20all%20know%20very%20well%20that%20jQuery%20is%20the%20most%20famous%20Javascript%20framework%20available%20out%20there%20which%20comes%20with%20many%20amazing%20features%20and%20is%20quite%20easy%20to%20be%20used.%0D%0A%0D%0AYou%20can%20use%20these%20plugins%20to%20add%20beaut&amp;short_link=&amp;shortener=bitly&amp;shortener_key=afiffattouh|R_fc1b634bfa3a187f0081885b36f65e36&amp;v=1&amp;apitype=1&amp;apikey=8afa39428933be41f8afdb8ea21a495c&amp;source=Shareaholic&amp;template=&amp;service=52&amp;tags=&amp;ctype=" rel="nofollow" class="external" title="Email this via Gmail">Email this via Gmail</a>
		</li>
		<li class="shr-tumblr">
			<a href="http://www.shareaholic.com/api/share/?title=All+About+jQuery%3A+Plugins%2C+Tutorials+and+Resources&amp;link=http%3A%2F%2Fwww.afiffattouh.com%2F2010%2F10%2F18%2Fall-about-jquery-plugins-tutorials-and-resources%2F&amp;notes=In%20this%20post%2C%20we%20are%20presenting%20a%20bunch%20of%20exciting%20and%20awesome%20jQuery%20plugins%20for%20your%20use.%20As%20we%20all%20know%20very%20well%20that%20jQuery%20is%20the%20most%20famous%20Javascript%20framework%20available%20out%20there%20which%20comes%20with%20many%20amazing%20features%20and%20is%20quite%20easy%20to%20be%20used.%0D%0A%0D%0AYou%20can%20use%20these%20plugins%20to%20add%20beaut&amp;short_link=&amp;shortener=bitly&amp;shortener_key=afiffattouh|R_fc1b634bfa3a187f0081885b36f65e36&amp;v=1&amp;apitype=1&amp;apikey=8afa39428933be41f8afdb8ea21a495c&amp;source=Shareaholic&amp;template=&amp;service=78&amp;tags=&amp;ctype=" rel="nofollow" class="external" title="Share this on Tumblr">Share this on Tumblr</a>
		</li>
		<li class="shr-printfriendly">
			<a href="http://www.shareaholic.com/api/share/?title=All+About+jQuery%3A+Plugins%2C+Tutorials+and+Resources&amp;link=http://www.afiffattouh.com/2010/10/18/all-about-jquery-plugins-tutorials-and-resources/&amp;notes=In%20this%20post%2C%20we%20are%20presenting%20a%20bunch%20of%20exciting%20and%20awesome%20jQuery%20plugins%20for%20your%20use.%20As%20we%20all%20know%20very%20well%20that%20jQuery%20is%20the%20most%20famous%20Javascript%20framework%20available%20out%20there%20which%20comes%20with%20many%20amazing%20features%20and%20is%20quite%20easy%20to%20be%20used.%0D%0A%0D%0AYou%20can%20use%20these%20plugins%20to%20add%20beaut&amp;short_link=&amp;shortener=bitly&amp;shortener_key=afiffattouh|R_fc1b634bfa3a187f0081885b36f65e36&amp;v=1&amp;apitype=1&amp;apikey=8afa39428933be41f8afdb8ea21a495c&amp;source=Shareaholic&amp;template=&amp;service=236&amp;tags=&amp;ctype=" rel="nofollow" class="external" title="Send this page to Print Friendly">Send this page to Print Friendly</a>
		</li>
</ul><div style="clear: both;"></div><div class="shr-getshr" style="visibility:hidden;font-size:10px !important"><a target="_blank" href="http://www.shareaholic.com/?src=pub">Get Shareaholic</a></div><div style="clear: both;"></div></div>

]]></content:encoded>
			<wfw:commentRss>http://www.afiffattouh.com/2010/10/18/all-about-jquery-plugins-tutorials-and-resources/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

