Widgets are always fun! jQuery helps craft cute and colorful plugins that come handy. I had stumbled upon various useful and attractive jQuery widgets. So here I am sharing a collection of colorful and handy jQuery widgets that range from sticky notes, galleries, text enhancers and much more.

1. TopUp jQuery Plugin

TopUp is an easy to use Javascript library for unobtrusively displaying images and webpages in a Web 2.0 approach of popups. The library is jQuery and jQuery UI
driven in order to maintain cross-browser compatibility and compactness.

2. Background Image Tweening With jQuery

A tiny and easy to use unobtrusive element background changer, that keeps your DOM clean and your transitions smooth.

3. Awesome Animated Portfolio Gallery with jQuery and CSS3

Learn how to showcase your potfolio in style with this tutorial. This tutorial walks through the creation of a gallery with ultimate animations, smooth transitions
and elegant navigation. The gallery will contain a scroller for thumbnails and a content area where we will display details about the portfolio item. The image can
be enlarged by clicking on it, making it appear as an overlay. The idea is to animate the content elements whenever a thumbnail is clicked. We will animate the
headin

4. jQuery Masonry

Masonry is a layout plugin for jQuery. Think of it as the flip side of CSS floats. Whereas floating arranges elements horizontally then vertically, Masonry arranges
elements vertically then horizontally according to a grid. The result minimizes vertical gaps between elements of varying height, just like a mason fitting stones in a
wall.

5. Sponsor Flip Wall With jQuery and CSS

An attractive plugin to showcase data in a grid. The thumbnails in theg rid flip over to reveal further infor on clicking them. Designing and coding a sponsors page
is part of the developers life (at least the lucky developer?s life, if it is about a personal site of theirs). It, however, follows different rules than those for the other
pages of the site. You have to find a way to fit a lot of information and organize it clearly, so that the emphasis is put on your sponsors, and not on other

6. ProtFlow jQuery Coverflow

ProtoFlow is a coverflow effect written in Javascript. It uses Prototype and Scriptaculous to do bulk of the work and it uses Reflection.js to do all the image
reflections stuff! It is simply amazing, just scroll over the images to see them flowing down.

7. Simpletip jQuery Tooltip

Enjoy the beauty of cool and sleek tooltips with colorful background with the Simpletip jQuery plugin. Simpletip is a plugin for the popular jQuery JavaScript
library. It allows you to create tooltips with ease on any element on the page using the power of jQuery selectors and event management. The tooltips can be static,
dynamic, or even loaded through AJAX with a variety of different visual effects. There are many other ways of using this tool than the demos provided here. It is
importan

8. jQuery panelGallery

panelGallery is a free jQuery plugin, distributed under the Creative Commons Attribution 2.5 License, which means that you are free to use and modify it for any
purpose.

9. Fly Off Page with jQuery

So, here is a new jQuery plugin, it is called Fly Off Page. It will take selected elements and make them fly (not literally) off the page in a random or pre-defined
direction. Customizable options include duration (of the animation), direction, tween (extend animation) and retainSpace which allows you to retain, disregard or
animate-out the space that the specified element once took up.

10. jQuery SpryMap

SpryMap is a super lightweight, dependency free Javascript widget that turns any HTML element into a Google Maps-like click and drag window. I have taken the
theory behind my jQuery click and drag map here and souped it up, making it better in every way.

11. AJAX-enabled Sticky Notes With PHP and jQuery

This is an AJAX-enabled Sticky Note management system. It will give visitors the ability to create notes with a live preview, and move them around on the screen.
Every movement is going to be sent to the back-end via AJAX and saved in the database. All the sticky notes will be saved on the server using AJAX.

12. YoxView

YoxView is a free Lightbox-type media and image viewer jQuery plugin. It is easy to use and feature-rich. This is a ultra cool image viewer. Displays images in a
clickable thumbnail grid and loads focused images in a stylish manner.

13. Colorful Sliders With jQuery and CSS3

In this tutorial we are using jQuery and the new transformation features brought by CSS3 to create a three dimensional dynamic slider effect. The techniques
presented here ? for creating sliders, and CSS dynamic resizable bars, can be used together or in part for powering all sorts of jQuery goodness.

14. Sliderman Js

Sliderman.js is a standalone javascript library for sliding images. The main feature of Sliderman.js is multiple unique effects which can be combined together.
Sliderman is a great plugin for showcasing your images in classical style. It is really a great joy to witness Sliderman. Indluge in the beauty of the varying
transitions, slides and magical image rollovers with Sliderman.

15. Lettering JS

Letterings is a jQuery plugin for radical web typography. Web type is exploding all over the web but CSS currently does not offer complete down-to-the-letter
control. So we created a jQuery plugin to give you that control. Add a splash of colorful joy to your website with letterings.

16. jQuery Spritely

jQuery.spritely is a jQuery plugin created by Artlogic for creating dynamic character and background animation in pure HTML and JavaScript. It is a simple, light-weight plugin with a few simple methods for creating animated sprites such as the birds you see on this page, and dynamic scrolling backgrounds. You can use it on any html web page, and any part of the page can interact with a sprite.

Masonry is a layout plugin for jQuery. Think of it as the flip side of CSS floats. Whereas floating arranges elements horizontally then vertically, Masonry arranges
elements vertically then horizontally according to a grid. The result minimizes vertical gaps between elements of varying height, just like a mason fitting stones in a
wall.

Web Site
Demo
Download

An attractive plugin to showcase data in a grid. The thumbnails in theg rid flip over to reveal further infor on clicking them. Designing and coding a sponsors page
is part of the developers life (at least the lucky developer?s life, if it is about a personal site of theirs). It, however, follows different rules than those for the other
pages of the site. You have to find a way to fit a lot of information and organize it clearly, so that the emphasis is put on your sponsors, and not on other elements
of your design. We are using PHP, CSS and jQuery with the jQuery Flip plug-in, to do just that. The resulting code can be used to showcase your sponsors, clients
or portfolio projects as well.

Web Site
Demo
Download

This is an AJAX-enabled Sticky Note management system. It will give visitors the ability to create notes with a live preview, and move them around on the screen.
Every movement is going to be sent to the back-end via AJAX and saved in the database. All the sticky notes will be saved on the server using AJAX.

Web Site
Demo
Download

A 3d animated tag cloud generated from an array. You can easily customize it by tweaking the eide range of options provided by this plugin. You can see a small thumbnail when you hover over each tag in the tag cloud.

Web Site
Demo
Download

TagCanvas is a Javascript class which will draw and animate a HTML5 canvas based tag cloud. In general tag clouds use the font size of the tag links to highlight their frequency or popularity, so TagCanvas uses the size of the tag text to determine the weight of each tag. This plugin provides a lot of options to customize the look and feel.

Web Site
Demo
Download

This is a jQuery plugin to create a 3d tag cloud from an unordered list. Create tags that rotate with a 3d effect usig jQuery. This plugin provides a lot of options to customize the looks of the amazing jQuery 3d tag cloud.

Web Site
Demo
Download

A look at the creative use of jQuery to bring out attractively useful web applications. This is a handpicked collection of the best jQuery web applications that I havecome across. Add a style statement and great functionality combo with these amazing jQuery web apps.

1. Simplest jQuery Spotlight Effect Tutorial

This tutorial will guide you how to build a spotlight effect with caption. I have seen someone use this technique before, I think that is cool, so I decided to spice thing up a little bit by adding a caption into it.

2. BlogSlideShow jQuery Plugin

BlogSlideShow is a free open-code JQuery plugin that enhances your blog pages with fancy image viewer, which provides nice transition effects including CSS3 or HTML5-related ones. All what you need is to provide links on your images. Likely you already have images on blog pages linked. Just add rel attribute containing blogslideshow to them.

3. Fun With Canvas Create a Bar Graphing Plugin

In this two-part series, we will combine the versatile canvas element with the robust jQuery library to create a bar graphing plugin. In this first part, we are going to code the core logic of the plugin as a standalone version.

4. jQuery ptTimeSelect

ptTimeSelect is a jQuery plugin that provides a UI for a user to define and set a time on a user form.

5. Create Sliding Checkbox Actions Menu With jQuery

In this tutorial we will create an actions menu with jQuery that appears when checkboxes are selected. This can be a very helpful UI property since we do not force the user to scroll to the place where the actions are ? they just appear whenever the user needs them.

6. How To Build a Widget to Display your Buzzing

A couple months ago, Google released a new Twitter-like service, called Buzz. We can use this service to display our latest buzzes on any site. So, in this tutorial, I will guide you through the process of building your own Buzz widget.

7. Magic Scroller

A practical and easy to implement plugin, this vertical scroll show elements with an elegant style using slice effect, creating a diferent perspective.

8. Text Over Image With jQuery

This post will show you how much jQuery is helpful to give a trendy face of the presentation of your images. There are some developers who want only to put fixed text messages above the images. But there are others who like to add some spices to their images look. This plugin creates an animated text effect when the user hovers over an image and will disappear when the mouse is out of the image.

9. WriteMaps

WriteMaps is a free web-based tool that allows you to create, edit, and share sitemaps online. As a WriteMaps user, you and your team will be able to build and access your sitemaps from anywhere, without having to rely on proprietary desktop apps and static files.

10. Genfavicon

Genfavicon jQuery web application lets you create wonderful favicons for your websites in a jiffy.

11. How to Create a Theme-Switcher in 200 Seconds

Have you ever seen sites that offer some kind of color-switcher within the header section? Want to know how easy it is to replicate? I will show you in 200 seconds, using jQuery.

12. Simple Draggable Element Persistence with jQuery

At some point you may need to create a draggable element within your web application. This is great functionality, however you may want or find that you need the element to stay in place after being dragged around. In this tutorial I will show you how to easily drag an element and make it stick, even after a page reload, by grabbing and storing its X and Y coordinates.

13. Drag to Share

We have all seen the brilliant functionality on Mashable where news stories and interesting articles can be shared to social networking sites; the functionality is driven by the images accompanying the articles; you click and hold on an image and can then drag it into a toolbar to share it. It is brilliant and intuitive, and in this article I am going to show you how we can replicate this behavior with jQuery and jQuery UI.

14. How to Create a Simple iTunes-like Slider

When space is at a premium, making use of sliders is the optimal way to present information. Today, we will take a look at how to create a slider similar to the one used in the iTunes store.

15. Awesome Mobile Image Gallery Web App

With more and more users browsing the web with a mobile device, it is time to begin with mobile web development. In this tutorial we are going to develop a simple mobile image gallery using the amazing jQTouch jQuery plugin for mobile web development. jQTouch is a jQuery plugin with native animations, automatic navigation, and themes for mobile WebKit browsers like iPhone, iPod Touch, G1, and Pre. Our little application is going to show some albums in a list view which will reveal a wall of thum

16. How to Create a Drop-down Nav Menu with HTML5 CSS3 and jQuery

In this tutorial, we will take a look and see what we can achieve with HTML5 and CSS3 when it comes to the staple of current web sites: the humble drop-down navigation menu. We will also use jQuery to handle the effects and add the finishing touches for us.

17. Apple-like Retina Effect With jQuery

Apple has long applied a winning strategy in marketing ? create well designed products, have a dedicated fan base, and let the hype build up before every product release. This is also the case with the latest version of their iPhone. But what I found interesting is the term they coined ? Retina display and the promo image accompanying it. What made me wonder is if it was possible to turn this static image into a fully functional Retina effect with only jQuery and CSS. This is exactly what we are

18. Building a 5 Star Rating System with jQuery AJAX and PHP

In this tutorial, you will learn how to build a rating system with AJAX, PHP, and jQuery. Votes will be recorded and updated in real-time with the magic of AJAX, and we will also leverage the power of PHP so that you do not even need a database.

19. Beautiful Slide Out Navigation Revised

After I got a lot of feedback for the Beautiful Slide Out Navigation, I had some new ideas for a similar horizontal navigation. Thanks a lot to everyone! Like Stefan Matei pointed out, it might be quite cute but we don?t want the user to hover over all options first, in order to see what menu items exit. So, I thought about labeling the menu items and making them stick out, so the user can always see what the navigation entails. Being in a horizontal position makes everything readable and when

20. Creating a Rotating Billboard System with jQuery and CSS

Currently we are in the hey, lets do that flash thing in jQuery-mood and so we came up with another idea: a rotating billboard system. In this tutorial we will use some images, CSS and jQuery to create the effect of a rotating billboard with two ads. The idea is to make one set of image slices disappear while another one, the other ad appear. We will decrease the width of each disappearing slice and increase the width of each appearing slice. This will give the effect of rotating slices, just li

We have all seen the brilliant functionality on Mashable where news stories and interesting articles can be shared to social networking sites; the functionality is driven by the images accompanying the articles; you click and hold on an image and can then drag it into a toolbar to share it. It is brilliant and intuitive, and in this article I am going to show you how we can replicate this behavior with jQuery and jQuery UI.

Web Site
Demo
Download

This tutorial will guide you how to build a spotlight effect with caption. I have seen someone use this technique before, I think that is cool, so I decided to spice thing up a little bit by adding a caption into it.

Web Site
Demo
Download