Uniform is a jQuery Plugin useful to style your checkboxes, drop down menus, radio buttons, and file upload inputs. With this script you can control the look and feel of your form inputs between all browsers. Uniform masks your standard form controls with custom themed controls. It works in synchronization with your HTML form elements to ensure accessibility and compatibility.

Theming is central to the philosophy of Uniform. If you don’t want to feel limited to just using the default style you can design your own theme with the theme kit and create most of the code you’ll need using the custom theme generator.

Plupload is an open source tool for uploading files using HTML5 Gears, Silverlight, Flash, BrowserPlus or normal forms. It provides some unique features such as upload progress, image resizing and chunked uploads. This highly usable upload handler is currently separated into a Core API and a jQuery upload queue widget. This way you can either use it out of the box or write your own custom implementation.

Features include:

• Open Source
• Powerful API
• Simple to use
• Flexible

Plupload makes multiple uploading easier than ever.

Back in the autumn of 2008, I have written a tutorial about how you can create a basic AJAX Contact Form that works with PHP Back-end. The post is one of the most popular here on BitRepository having over 8,000 monthly page views and over 440 comments so far.

Since many people asked me how they can do this and even hired me to offer them assistance with this application, I have decided to write a more advanced script with many features including CAPTCHA and Real-time Validation.

The script can be practically used to create any type of ajaxified, yet secure form that collects data and sends it to your email inbox including but not limited to:

Read more if you are interested in creating interactive web forms without page reload…

Inspired by the article ‘Make Your Mockup in Markup’ by Meagan Fisher, Sebastian Senf developed a plugin useful to style your markup right in your browser with a build-in element selector and CSS editor.

Just generate the CSS code of altered elements with one click and use it in your own stylesheet. Being annoyed by the process of designing the mockup with markup, Sebastian coded this plugin as an alternative to the classical ways of designing (e.g. change the CSS code and then check the results in your browser). He is one of the persons who can’t stand Photoshop to design every bit of a website in it.

JQuery styledButton Plugin is an attempt to recreate Google’s imageless buttons and prove “that it doesn’t take a whole team of engineers and an endless cycle of code revision and quality control (their own words) to pull this off.” These buttons automatically adapt to padding and other styling you wish to use. To customize them, you just need to change a few CSS lines. All the display critical CSS rules are hidden deep inside the plugin. The buttons were tested with SPANs, although they should be applicable on any element. In order to preserver the semantic structure of the documents, all markup needed to render the buttons is nested inside the main element.

jQuery Lint is a simple script, used with the JQuery library, that diligently reports errors and any incorrect usage of jQuery. To some extend, it also offers guidance on best practices and performance concerns. Unline JSLint, this plugin is a runtime reporter. To use it, you need to include it after JQuery in your document.

If you pass incorrect arguments to any method, jQuery Lint will let you know. It compares your arguments with the argument signatures in jQuery’s API. To see the errors reports, you can either use FireBug or you can quite easily plug-in your own console mechanism.

TipTip is a sweet and simple – JQuery powered – custom tooltip that behaves just like the browser tooltip. This completely CSS customizable plugin weights only 3.5kb (minified), and doesn’t use any images to display the tooltip. TipTip can be applied to any element, not just text links.

TipTip detects the edges of the browser window and makes the tooltip stay within the current window size. This way, the tooltip adjusts itself to be displayed above, below, to the left or to the right of the element with the plugin applied to it.

PS: Checkout the feature overview video for more information about this awesome plugin ;)

The Google Maps JQuery Plugin attempts to simply the process of adding maps to a page. Having less than 10KB of JavaScript, this plugin lets you simplify embed Google Maps using the Google Maps JavaScript API in your webpages. Since portions of the map (div container, info window) can be controlled through CSS, you can create your own style. The plugin’s options (latitude, longitude, depth, layer, controls, markers, polylines, pan) are interchangeable and can be used together.

Some of the features that can be used are:

• Custom Latitude & Longitude
• Custom Depth (Zoom Level)
• Polyline Load
• Pan Map
• Place layer data set on the map
• Place single or multiple markers (e.g. custom icons) on the maps
• Map control position
• Add/Hide control/controls

PS: To use the Google Maps JavaScript API, you need to sign up for an API key.

Some time ago, I have written a post about JQuery Tools, mentioning about a feature called “Expose”. This JavaScript tool exposes selected HTML elements from the page so that the surrounding elements gradually fade out.

JQuery Highlighter is a Plugin that makes use of the same expose feature. It is highly customizable, supports keyboard navigation, and also has support for ‘autoload’ and autoplay’ features when highlights elements.

Implementation is very easy. You just need to include the necessary files (the JQuery library and the plugin), call the script and set the .jhighlight class to the elements you need to apply the effect to.