Javascript Guru

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

jQuery Sparklines is a plugin for creating sparklines on the fly.

What is a sparkline:

They are data-intense, design-simple, word-sized graphics that are commonly used in market, stock activity and can be implemented anywhere (via Wikipedia).

This plugin supports:

• Line graphs
• Bar charts
• And, tristate charts

jQuery Sparklines plugin can be used to create graphs from data inside the HTML or via JavaScript. Almost every variable of it can be customized including colors, size & chart type.

Requirements: jQuery
Compatibility: All Major Browsers
Website: http://omnipotent.net/jquery.sparkline

Progress bars are a great way visualizing events that may take some time like uploads, form submissions & more.

This is a MooTools animated progress bar which is highly customizable and easy to implement.

You can define the "start percentage" and "speed" of the progress bar besides other variables.

Usage is this easy:

pb = new dwProgressBar({
container: $(’put-bar-here’),
startPercentage: 25,
speed:1000,
boxID: ‘box’,
percentageID: ‘perc’
});

and you can set the progress bar to a new percentage with a simple command like: pb.set(55); .

To see a demo of this MooTools progress bar, click here.

Requirements: MooTools
Compatibility: All Major Browsers
Website: http://davidwalsh.name/progress-bar-animated-mootools
Demo: http://davidwalsh.name/dw-content/progress-bar.php

ToobPlayer is a lightweight (approx. 14-8 KB) FLV player component that comes in 5 flavors, provides a mechanism to play back YouTube videos, and can also display preview images.

Some features of this FLV player:

• Resizable, optional full-screen mode
• Several video resize mods
• Loading status feedback
• Mouse wheel support (seeking & volume)
• Auto-repeat, buffer time
• Customizable
• Extensive API

ToobPlayer YouTube integration is done with a simple PHP proxy script to automate acquaring videos & images.

The component requires Flash Player 8+ & AS2.

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-...