in Development

The Ultimate jQuery ToolBox

jQuery is a great and powerful tool, and every web developer should use it. One of the problems is that when you don’t know how to create something in jQuery, you start searching for solutions on the web and you’ll lose a lot of time doing it. The main advantage of a toolbox is that you have everything(uh, or almost) that you need in a single place, and with this thing in mind I have created this post. In this article you have almost every jQuery plugins that need when designing a web application. I hope you’ll like it.

Charts and Presentations

jQuery Sparklines

This jQuery plugin generates sparklines (small inline charts) directly in the browser using data supplied either inline in the HTML, or via javascript.

jqChart – HTML5 jQuery Chart Plugin

Draws charts and graphs with modern and minimal code. Cross-browser support – works with IE 6+, Firefox, Google Chrome, Opera, Safari.

Arbor

Arbor is a graph visualization library built with web workers and jQuery. Rather than trying to be an all-encompassing framework, arbor provides an efficient, force-directed layout algorithm plus abstractions for graph organization and screen refresh handling.

Wijmo jQuery UI Widgets

Wijmo is a complete kit of over 30 UI widgets with everything from interactive menus to rich charts. If you know jQuery, you know Wijmo. Complete with documentation and professional support, every widget is hand-crafted and includes premium themes.

Sliders and Accordions

Slider Kit

The purpose of Slider Kit is to gather common slideshow-like jQuery functionalities (such as news sliders, photos galleries/sliders, carousels, tabs menus) into one lightweight and flexible plugin combined with ready-to-use CSS skins.

Awkward Showcase


Awkward Showcase is a plugin for the JavaScript Framework jQuery. We call it a Content Slider. But it can do more then just slide the content. For example you can add tooltips, enable thumbnails, activate dynamic height and lots more.

Horinaja

Horinaja is a ready-to-use slide-show implementation, utilizing either scriptaculous/prototype or jQuery. Horinaja is innovative because it allows you to use a mousewheel for navigation. When the mouse is outside of the slide-show area, it scrolls. When hovering over the slide-show, the scrolling pauses.

Feature List

Simple and easy creation of an interactive “Featured Items” widget.

slideIO – A Simple In/Out Slideshow

This is a simple jQuery slideshow plugin based on one effect: sliding in and out (well, it also does a fade if you want).

Smooth Div Scroll

Smooth Div Scroll is a jQuery plugin that scrolls content horizontally left or right. Apart from many of the other scrolling plugins that have been written for jQuery, Smooth Div Scroll does not limit the scrolling to distinct steps. As the name of the plugin hints, scrolling is smooth. There are no visible controls (unless you want to) since the scrolling is done using hotspots within the scrollable area or via autoscrolling.

Alert Windows and Prompts

Apprise


An alert alternative for jQuery that looks good. Apprise is a very simple, fast, attractive, and unobtrusive way to communicate with your users. Also, this gives you complete control over style, content, position, and functionality. Apprise is, more or less, for the developer who wants an attractive alert or dialog box without having to download a massive UI framework.

jReject: jQuery Browser Rejection

Reject provides a simple, robjust, light-weight way to display rejections based on a the browser, specific browser version, specific platforms, or rendering engine. Provides full customization of the popup. Uses no CSS file (by default), and can easily be used on page load or during a specific page events. Also provides a flexible way to display custom browser alternatives in the popup.

jQuery MSG Plugin

Back in the old days we use‘alert(‘blah blah’);’ to show users a message or a warning.It is functionable but not pretty. So I used to use BlockUI instead.Later on I found out I don’t need all the features it has and I want it to beeasiler to customize. So I write my own simpler version called MSG.It can only block the whole window, it has theme suuport, afterBlock and beforeUnblockevent, … etc, and it’s only 4 kb uncompressed with code comments.

Subscriber Traffic Pop


Subscriber Traffic Pop is the hottest new way to gain newsletter, email list subscribers in high volume with no work. The revolutionary Traffic Pop idea has been extended into a whole new category with email subscriptions!

Color Pickers

Color Picker – jQuery Plugin

A simple component to select color in the same way you select color in Adobe Photoshop.

jQuery color plugin xcolor


The xcolor plugin is an easy-to-use jQuery extension to manipulate colors in all imaginable combinations. This plugin implements an extensiv color parser and a featureful set of color-manipulation methods. There is also an animate() extension to smooth CSS colors. Another useful method isReadable() completes the whole, by allowing you to check if a text is readable on a certain background. The color value can also be passed in different color models: RGB, HSV/HSB, HSL and their adequate alpha extensions.

HeatColor


HeatColor is a plugin that allows you to assign colors to elements, based on a value derived from that element.  The derived value is compared to a range of values, either determined automatically or passed in, and the element is assigned a “heat” color based on its derived value’s position within the range.

Drag and Drop

DragSoft

A lightweight javascript file that provides the ability to sort lists using drag and drop. Built on the jQuery framework.

easyDrag jQuery Plugin


EasyDrag is a plugin aimed to provide a simple way of adding drag-and-drop functionality to DOM elements. It features the ability to set functions to be called on drag and on drop events.

Form Validation

Credit Card Validation

Here’s an improved credit card validation extension for the jQuery Validation plugin. This lets you pass the credit card type into the validation routine, which allows it to do card type specific checks for prefix of the card number and number of digits. This extension includes the mod-10 check (based on the Luhn Algorithm) that is used in the core creditcard validation routine. As an extra bonus, it will ignore spaces and dashes in the card number. This code was ported from this credit card validation routine by John Gardner, with some minor tweaks and additions.

jFormer

jFormer is a form framework written on top of jQuery that allows you to quickly generate beautiful, standards compliant forms. Leveraging the latest techniques in web design, jFormer helps you create various web forms.

Ajax Fancy Captcha


Ajax Fancy Captcha is a jQuery plugin that helps you protect your web pages from bots and spammers. We are introducing you to a new, intuitive way of completing “verify humanity” tasks. In order to do that you are asked to drag and drop specified item into a circle.

jQuery slideLock Plugin


slideLock adds a jQuery UI slider along with labels and notes to any form you wish as an alternative to traditional CAPTCHA. The user simply slides the form to unlock the submit button and then both client side and server side validation techniques ensure secure submission of the form.

jQuery validVal

jQuery.validVal is a plugin designed to simplify form validation. It is highly customizable, very feature rich and can easily be dropped on any type of HTML-form (even AJAX- and HTML5-forms) with very little effort.

Inline Edit and Editors

CLEditor


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.

jQuery CodeExplorer Plugin

CodeExplorer is an enitrely unique code formatting plugin that will not only format the code with colors and spacing, but will also display it in an entire folder structure.

RapidEdit

The RapidEdit plugin makes it possible to edit any content on your website without reloading the page even once. The plugin provides a simple edit-link on elements marked with the class ‘editable’ (this is the default class, can be changed) which replace the content of the element with a textarea, where the content can be edited, when clicked. To make the plugin as customizable as possible, loads of settings are provided so you can change it to fit your needs and it also supports the MetaData plugin and the WYSIWYG-editor TinyMCE.

Rating Plugins

jRating


Rating is a very flexible jQuery plugin for quickly creating an Ajaxed star rating system. It is possible to configure every detail from” the number of the stars” to “if the stars can represent decimals or not”. There is also an option to display small or big stars and images can be changed with any other file easily.

jQuery Opineo Plugin


Opineo allows you to do all of this and much more without signing up for an account or hire an expert. This DIY tool enables you to listen to your customers’ voice easily and instantly. All you have to do is go online, design your widget and place it on your website.

Social Bookmarking

Twitter Friends Widget


There is a Facebook fans widget, Google friends widget, what about a Twitter friends widget?! Here is a jQuery plugin that you can embed anywhere to display pictures of your Twitter followers or friends (whom you follow) and their latest tweets if you like.

A jQuery Twitter Ticker


A pure jQuery & CSS twitter ticker which utilizes Twitter’s Search API. It will show your or your friends’ latest tweets, and will not require any server side code  or databases. As a result, the ticker will be easily included into any web page and easily modified to your likings.

jQuery LiveTwitter

LiveTwitter is a lightweight, realtime updating Twitter plugin for jQuery. You can use it to show a stream of tweets based on search queries, tweets from a specific user or a list. You can also filter the tweets by geographic location, language etc.

Sponsor Flip Wall With jQuery & CSS

Designing and coding a sponsors page is part of the developer’s 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.

Bogdan

Bogdan is the founder of Top Design Magazine. You can find him in Bucharest-Romania so next time you want to drink a beer there and talk about web and stuff, give him a message.