Visual-Blast Magazine

jQuery Superbox! is a jQuery plugin which allows you display windows with the lightbox-like effect. The minified version of Superbox is only 2kb when using GZip compressing, 5.4kb otherwise.

Main reasons to create a new script of this kind:

• Accessibility – only the rel attribute is used to launch the script. The href attribute is therefore coherent: it targets the address of a picture, of a page, or an element identifier (anchor).
• Extensibility – Superbox doesn’t set any style, everything is easily and entirely CSS stylable.
• The MIT license – this license allows you to use, duplicate, modify, publish, distribute, merge, sell and even change the script license. Your only obligation is to keep the script’s author name.

jQuery Superbox! can display pictures, image galleries, external pages, a page element or even AJAX loaded content.

jQuery inline form validation – a versatile solution that works with every form.

The script creates a div and positions it in the top right corner of the input and displays validation message like a tooltip. This way you don’t have to worry about your HTML form structure.

The rounded corner and shadow are done with CSS3 and degrade well in non compliant browsers. There is no images needed. Validation rules are created inside the classes of every input.

jQuery Tools is a collection of the most important user-interface components for today’s websites. The library weighs only 5.72 Kb.

The library contains six of the most useful JavaScript tools: tabs, tooltip, scrollable, overlay, expose and  flashembed.

.

All of these tools can be used together, extended, configured and styled. Every feature in the library is very well documented with examples.

jqPlot – is a plotting and charting jQuery plugin. jqPlot can produce beautiful line, bar and pie charts. jqPlot is an open source project by Chris Leonello and is totally free.

jqPlot comes with many features like:

• Numerous chart style options.
• Date axes with customizable formatting.
• Up to 9 Y axes.
• Rotated axis text.
• Automatic trend line computation.
• Tooltips and data point highlighting.
• Sensible defaults for ease of use.

jqPlot has been tested on IE 6, IE 7, IE 8, Firefox, Safari, and Opera.

jsTree - is a javascript based, cross browser tree component. It is packaged as a jQuery plugin and is absolutely free – licensed under GPL and MIT licence.

With jsTree you can create the tree from the predefined HTML, JSON and XML data sources.

Some of the features:

• Supports AJAX loading
• Drag & drop support
• Highly configurable
• Theme support + included themes
• Numerous callbacks to attach to
• Optional keyboard navigation
• Maintain the same tree in many languages
• Inline editing
• Open/close optional animation
• and more …

Currently supported browsers are: Internet Explorer 6+, Mozilla Firefox 2+, Safari 3+, Opera 9+ and Google Chrome.

TinyBox is a lightweight (3.5kb) and standalone modal window script – does not depend on any JavaScript frameworks.

At only 3.5KB it doesn’t include any slideshow capabilities built-in but allows for any AJAX or HTML content. It can also be used for images and auto hiding alerts. The popups fade in/out and dynamically size based on the content if enabled. The styling is completely customizable through the simple CSS.

Click here for the TinyBox demo

Simple Page Peel Effect – tutorial on how to create page peel effect with jQuery and CSS, where you can peel a corner of a website and see a message underneath.

The concept is very simple and may come in handy one day.

View Example

Tokenizing Autocomplete Text Entry – a jQuery plugin to allow users to select multiple items from a predefined list, using autocompletion as they type to find each item.

Features:

• Layout is easily customisable and fully controlled in CSS
• Result caching reduces server load
• Smooth animations when results load
• Select items using the mouse or keyboard
• No images required, just the plugin’s .js file and some CSS

Live Demo

Create an Image Rotator with Description – a tutorial on how to create an image rotator with jQuery and CSS.

This tutorial will help you understand how the image rotator works and helps you create your own from scratch.

View Demo

Do keep in mind these jQuery driven image rotators do not degrade in the best fashion. When you disable JavaScript, each thumbnail must be clicked on to get the larger image.

s3Capcha jQuery plugin – inspired by Fancy Drag and Drop Captcha we mentioned here at V-B.

s3capcha is advanced captcha script that is based on choosing the right image instead of writing hardly readable letters and numbers.

It is very easy to use, just include the jQuery library then include the s3Capcha javascript in the head of the page(s). s3Capcha source files are available for download with 2 icon sets and s3Capcha example.

View Demo.