jQuery Plugins and Tutorials
It is a handy jQuery plugin that allows converting an element’s content into a simple < canvas > mini pie, line or bar chart. It has custom chart types.
It works with browsers that support < canvas > only, like Chrome, Firefox, IE9, Opera, Safari.
This one gives you tooltips without the usual limits of north/east/south/west positioning. You have the ability of rotating the grumble around any given element at all 360 degrees. You can specify any distance and apply any CSS style. It has an auto-magic size adjustment with localised text and FX queues for animating multiple grumbles. It works on IE6+, and all modern browsers.
Creating custom dropdowns is an irksome and time consuming process that can become really hectic too. Conveniences that native dropdowns have like keyboard navigation are also often missing. DropKick can help you here as it makes this task really easy and helps you make it look good too. It also degrade back to SELECT list on unsupported browser. It works on IE7-9, firefox, safari and chrome.
As the name suggests, this one is a simple jQuery credit card validation plugin. It makes credit card format validation an easy task. It makes sure that a user entered valid credit card number before making actual transaction. It supports American Express, Master Card, Visa Card, Diners Club and Discover.
This is a great plugin for browser qrcode generation. It lets you add qrcode to your webpages with ease. It is standalone, not more than 4k after minify+gzip, no image download. It is simply based on a library that create qrcode in various language. jquery.qrcode.js wraps it to allow you to include in your own code.
Canvas Loader is different from other typical animated gif loading image with a canvas based loader of the same width and height. This thing proves to be really helpful when creating mobile apps that may be viewed on Android. It will also check if you have got canvas support before employing the replacement. It has got limited styles, and it only work in browser with Canvas Support.
It provides the experience of native photo-viewing apps to your mobile browser. Touch Gallery is a lightbox gallery with touch support. But it works a bit slow. It boasts fullscreen photo gallery for touch-devices and has been optimized for Mobile Safari on the IPad of iPhone 4. It works with Desktop Safari, Firefox 4, Opera and Chome and has limited support for IE (no transition).
This one is the best scrolling plugin for your mobile website. It is now smoother than ever and boasts some really amazing new features, such as, the pinch/zoom, pull down to refresh, snap to elements, improved speed and momentum and customizable scrollbars etc.
Well this tiny plugin detects swipe gesture. For instance, you have the ability of making a 400x400px div with swipe gesture (left or right) and carry out an event when the right gesture is detected.
It is a small, free and open source HTML5 video player which works with various platforms. It has the ability to degrade back to flash player if it finds an unsupported source. It is really easy to use and understand. It is library independent and has volume control. It also boasts a consistent look between browsers and has full screen and full window modes too.
MiniApps Shake, Touch and Slider Plugins
They are lightweight plugins that work on mobile web browsers utilizing device acceleromter and touch-cable devices. WKShake is an amazing implemetation that triggers an event when “shake” is detected. It behaves just like the undo feature in iDevices.
Extreme Makeover: jPaginator CSS3 Edition
It helps you ameliorate the user experience of long pagination lists by providing a slider to animate links left and right. This tutorial will teach you ow to skin jPaginator into something really pretty looking.
This is a cool tutorial that will help you make a jQuery bubble animation effect. This is a really amazing effect but keep in mind that it utilizes CSS3 so, it would not work very well with old IEs.
This one is quite a simple and to the point tutorial. It teaches you how to ppload File with AJAX. You won’t need to refresh the whole page and your files will be uploaded in the background. You will also be able to see the uploaded photos once they are uploaded.
This one is a unique content rotator tutorial. It is different from others as it has a cool thumbnail gallery built in. Really awesome!
Using jQuery to Create a Right Click Function to Save Website Logo
This tutorial will teach you how you can add context menu on your website logo. Cool, right?
This fab plugin boasts some really useful features such as pause-on-hover, auto-stop, auto-fit, before/after callbacks, click triggers and various transition effects.
It allows adding picture cropping ability to your web app. It combines ease of a jQuery plugin with a powerful cross-platform DHTML cropping engine!
This plugin can prove to be really useful, especially when you have a small area. Whenever you would mouse over a photo, a pop up comes up showing a zoomed in closer look. Quite amazing..
The equations of Robert Penner have been available for quite some years now and are also widely used. So this one is an experiment in which you have the ability of choosing between a couple of meshes and even get out of control if you want.
WebGL Solar System is an experiment that revolves around the N-body problem simulation. Utilizing a simplified version of Barnes-Hut algorithm, you will be able to find out the trajectories of thousands of massive bodies spinning around a larger one.
This is a great demo that utilizes the Marching Cubes algorithm to create metaballs. You also have the ability to customize the material effects and geometry.
Rendering the House of Cards dataset in WebGL. This is a bit eerie because of the human face and because of the fact that it bounces like your heartbeat.
This one is a cool jQuery plugin that allows picking colors from a Photoshop-like color picker. It has been attached to input fields and
can be activated easily by calling a single-line function.
ColorPicker allows you to pick a color in the same way you pick in Adobe Photoshop
This one is a jQuery color picker plugin that can be used to add a color picker into any webpage. The color picker is related to an existing element, for instance a text field, and updates the value of the element when a color is chosen.
This one provides you the ability of HSB and RGB options, uses Prototype and works with all major browsers.
As the name suggests, it is a handy and to the point color picker that has a predefined color palette.
jPicker is a quick, tiny and sophisticated jQuery plugin that lets you add an advanced color picker in your web projects. It has been carefully ported from John Dyers’ amazing work on his picker utilizing the Prototype framework.
This one is a simple jQuery color-picker plugin that shows a square grid of selectable colors.
As the name hints, Pacman, but from a little different perspective.
Almost everyone loves playing pong. So how about playing Pong in 3 Dimensions? Sounds awesome, right?
SandTrap is a web game. In this game your aim is to get as much sand as you can out of the box and into the pail. A simple but nice game.
This one is a very addictive game. You have to mouse to lasso glowing points of light before they explode. Quite fun!
You should also check out a plugin called jQuery Bacon which allows you to easily align text to a bezier curve. http://baconforme.com/
thanks nice one
Great collection of jQuery plugins. jQuery has saved me hours of development time and helps me develop much quicker, credit to all the contributors.
Open Source is the future!!
Nice collections of jQuery plugins thanks.
None of the scripts listed under experiments worked for me. Do I need to install something else to make them work? (I’m using Firefox 8.0)