Javascript Guru

jqZoom is a jQuery plugin which enables images to be zoomed.
This is an easy-to-implement plugin which is very handy, specially, in e-commerce projects & galleries.

How it works?

This jQuery zoom plugin simply requires that "jqzoom" class to be added to images other that including the JS file and calling the main function once. And that’s it.
You can also configure it to mention the width-height of the zoom div and its position.


Requirements: jQuery
Compatibility: All Major Browsers
Website: http://www.mind-projects.it/blog/jqzoom_v10

Pixastic is an open source JavaScript image processing library.
It uses HTML5 Canvas element that enables accessing to raw pixel data.

Supported effects are:

• desaturation/greyscale
• invert
• flipping
• brightness/contrast adjustment
• hue/saturation
• emboss
• blur & more

There is an image editor built with it & the library is well-documented.

Requirements: No Requirements
Compatibility: All Major Browsers (IE requires ExCanvas)
Website: http://www.pixastic.com/
Download: http://www.pixastic.com/lib/download/

Niceforms, a script to beautify web forms, was very popular for creating beautiful forms. And now the 2nd version is out.
Niceforms 2.0 is a totally re-written version which is very easy to apply, handles more elements & has more customization options.

How to use it?

The script simply replaces the most commonly used form elements with custom designed ones.
Inserting the niceforms.js & the CSS file is enough to use it.
Besides the default theme, new themes can be developed with CSS editing.
Niceforms works in all modern browsers except IE6 (it gracefully degrades).

Requirements: No Requirements
Compatibility: All Major Browsers (except IE 6)
Website: http://www.emblematiq.com/projects/niceforms/
Demo: http://www.emblematiq.com/niceforms/v20/niceforms.html

JavaScript Table Sorter is a lighweight code (1.7kb) for transforming standard tables into a sortable grid.
It includes alternate row formatting, header class toggling, auto data type recognition and selective column sorting.


After inserting the JS file into the website, a simple function does the job:
var sorter=new table.sorter("sorter");
sorter.init("sorter",1);
It is possible to mention which column will be sorted by default & which columns won’t have a sort feature.


Requirements: No Requirements
Compatibility: All Major Browsers
Website: http://www.leigeber.com/2008/11/javascript-table-sor...
Demo: http://sandbox.leigeber.com/sorter/index.html

Galleria is an image gallery jQuery plugin.
It loads the images one by one from an unordered list and can present them:

• scaled
• unscaled
• centered
• cropped inside a fixed thumbnail box

The beauty of Galleria is behind the ease of creating a gallery. Simply create an unordered list, add some images and it will create a chic gallery.
Another nice feature is the support of browser history. You can use your browser’s back & forward buttons

Other features of this jQuery image gallery:

• Unobtrusive javascript
• Lightweight (4k packed)
• Displays the thumbnail when the actual image is loaded
• CSS powered - create your own gallery style
• Super fast image browsing since the images are preloaded one at a time in the background
• Stylable caption from image or anchor title
• jQuery plugin - takes one line to implement
• Can fire events so you can customize the images behaviour onLoad

 Requirements: No Requirements
Compatibility: All Major Browsers
Website: http://devkick.com/lab/galleria/
Demo: http://devkick.com/lab/galleria/demo_01.htm

ProtoForm is a "very easy to implement’, lightweight (4kb) & unobtrusive form validation & Ajaxed submit solution that depends on Prototype.

It can validate:

• e-mail
• date
• telephone number
• URL

Parameters are mentioned within the attributes like:

This makes it very easy to implement (a negative point can be requirement to define the ids in a specific way).
ProtoForm also sends data and shows response with Ajax, highlights the form field on focus and on error.

 Requirements: Prototype
Compatibility: All Major Browsers
Website: http://www.cssrevolt.com/upload/files/protoform/

This is another Coverflow script which uses canvas for the effects.
The script is very easy to implement & works smoothly.


Images can be browsed via scroll wheel or left-right keys besides the mouse clicks. And, it is tested with other javascript libraries like jQuery, MooTools, Dojo and Prototype.
For the canvas support in IE, checkout ExplorerCanvas.

Requirements: No Requirements
Compatibility: All Major Browsers (Explorer Canvas can be used for IE)
Website: http://radnan.public.iastate.edu/coverflow/
Via: http://ajaxian.com/archives/4331

mooSlide is an easy to use & configure slider class for MooTools.

It is a functional solution to present any content, even as a Lightbox replacement.

Within 1 line of code, you can set the:

• slider div
• slide in speed
• fade out speed
• remove on click yes / no
• final opacity
• height of the slider container
• type of effect used
• toggler element
• slide from position

And, multiple sliders can be used in 1 page.

Requirements: MooTools 1.1+
Compatibility: All Major Browsers
Website: http://www.artviper.net/test/mooSlide2/index.html

firefly is a totally different chat system which can power your websites.

By adding a line of JavaScript, your visitors can chat with each other in an overlayed screen.

Users can:

• See other users mouse movements,
• Choose avatars,
• See the chat history,
• Howmany people are already in the page.

As a developer, all I can ask for more is an API that enables integrating any userbase to the system for adding auto avatars, names to the users etc. Considering this is a fresh chat service, in the future, why not?

You should definitely give firefly a try & will probably be impressed.

Requirements: No Requirements
Website: http://firef.ly
Via: http://sharebrain.info/brainpicks/tools-brainpicks/f...

js-hotkeys is a jQuery plugin which enables you to create keyboard triggered events.

This is a very nice feature if you want to provide users more browsing flexibility. And also, it can be used in JavaScript testing environments like triggering a test function by clicking CTRL + t.

A simple usage of the plugin is:

$.hotkeys.add('Ctrl+a',function(){/*DO YOUR DUTY*/});
$.hotkeys.remove(’Ctrl+a’);

A demo of this jQuery keyboard control plugin can be found here.

Requirements: jQuery
Compatibility: All Major Browsers (some handicaps are mentioned at the product website)
Website: http://code.google.com/p/js-hotkeys/
Demo: http://jshotkeys.googlepages.com/test-static.html

woork presents a nice MooTools news ticker, which scrolls vertically, similar to the one in Newsvine.

Content is currently hard-coded inside the HTML within li elements. There is also an information provided for how to get the content dynamically from a database.

Speed & delay of the slide effect can be configured within the code.

Requirements: MooTools
Compatibility: All Major Browsers
Website: http://woork.blogspot.com/2008/07/fantastic-news-tic...
Demo: http://woork.bravehost.com/newsticker/index.html

jqPuzzle is a jQuery plugin which enables you to create sliding puzzles from any image.

The created JavaScript puzzle can have the shuffle & solution options besides the moves made & seconds played.

jqPuzzle is highly configurable as the options in the interface can be enabled/disabled, number of rows & columns of the puzzle to be created can be defined & more.

How to use?

After inserting the jquery.jqpuzzle.js & jquery.jqpuzzle.css files to your webpage, simply give the class="jqPuzzle" to any image. That’s all.

Requirements: jQuery 1.2.1+
Compatibility: All Major Browsers
Website: http://www.2meter3.de/jqPuzzle/
Download: http://www.2meter3.de/jqPuzzle/#download

This is a JavaScript solution which enables you to create custom HTML form elements (radio buttons, checkboxes, etc.)

The JavaScript simply:

• Hides form elements with class="styled"
• Sticks a span tag with a CSS class on it next to the element
• Adds mouse events to the span that handles the stages when it is clicked.
  
  Requirements: No Requirements
  Compatibility: All Major Browsers
  Website: http://ryanfait.com/resources/custom-checkboxes-and-...
  Demo: http://ryanfait.com/resources/custom-checkboxes-and-...
  Via: http://www.knowtebook.com/css-freedom-redesign-html-...