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.

Today’s Timetable is a lightweight script (5kb uncompressed) which enables you to create good-looking timetables with ease.

Events can be scrolled & they are added with a basic function like: Monday.addEvent("French", 8, 1.3);.

The html it generates is W3C valid.

Any HTML can be embedded into each event created and a function can be assigned to them.

P.S. The script does not require any JS frameworks.

This is an animated accordion built with JavaScript.

It is a lightweight script (1.3kb) which does not require any JS framework to run.

Note: It is an improved version of this script from the same author.

This JavaScript accordion can be easily customized via CSS.

It supports multiple instances & works in all major browsers.

Scroll Follow is a jQuery plugin that enables a DOM object to follow the page as the user scrolls.

It is specially very suitable for the popular scrolling banners & menus.

The scrolling object can have several settings like the speed, easing, offset (number of pixels the Scroll Follow object should remain from top of viewport), container & more.

It requires 3 other plugins to work:

- jQuery UI Core
- jQuery Easing plugin
- jQuery Cookie plugin

It is tested with all major browsers.

BigTarget.js is a jQuery plugin that increases the size of click targets and get more call-to-action conversions.

It has 2 options that can be customized:

• clickZone: By default the first <li> element is turned into a link but this can be changed with this option.
• targetClass: For mentioning the class for hover effect.

How to use it?

Adding BigTarget.js functionality to your site is straight forward. First include the plugin code in the head of your document, and then when the page is ready, attach the bigTarget function to the target anchor — bigTarget.js will do the rest.

$(document).ready(function(){
$("ol.bigTarget h4 a").bigTarget();
});

Ingrid is an unobtrusive jQuery component for creating very nice looking & effective datagrids.

It simply adds datagrid behaviors (column resizing, paging, sorting, row and column styling, and more) to your tables.

With every display event, Ingrid sends a query to a dynamic file (ASP, Asp.Net, PHP..), which must be created by you (a PHP example exists).

The query then simply returns the results in a table format "how Ingrid expects them to be". And, that’s all.

For a demo, click here.

For the last weeks, several JavaScript image crop resources are published at WebResourcesDepot. This is because, the increase in use of such interfaces as image-based applications are on the rise & many web applications offer their users to edit their avatars besides only uploading them. So, you may need one of them : ) .

Jcrop is a cross-browser jQuery image crop plugin.

Some features of Jcrop:

• Attaches simply to any image in your HTML page
• Supports aspect ratio locking
• Callbacks for selection done, or while moving
• Keyboard support for nudging selection
• Support for CSS styling
• Advanced API including animation support

An example of this plugin here & a sample PHP code to complete the server-side of the crop here.

P.S. Thanks to Kelly for the suggestion.

UvumiTools has 4 great & free MooTools plugins that can save your development time.

MooTools Crop

This is an easy to use cross-browser crop interface that has options like:

• Setting the minimum size
• Keeping the aspect ratio
• Live preview of the area to be cropped
• Supports HTML resizing

MooTools Image Gallery

This plugin enables you to create good-looking image galleries.

Users can click a thumbnail and watch the gallery transform into a slideshow, which is then navigated by clicking the left column or by scrolling with the mouse wheel. A click on the photo being displayed brings the user back to the contact sheet view.

MooTools Dock Menu

This dock menu, similar to a Mac interface, is passive under the screen & gets activated when an item is mouse-overed.

The menu is created from a valid unordered list & can be applied within minutes.

MooTools Dropdown Menu

A cross-browser, animated dropdown menu with unlimited levels support.

It is created from unordered lists & can be totally customized via CSS.

This is a beautiful jQuery plugin that automatically converts select boxes into accessible sliders.

jQuery UI’s slider component is used. Besides a standard slider, multiple select boxes can be used to generate 1 slider too for mentioning a data range.

Usage is terribly easy:

For such a select box:

<label for="speed">Select a Speed:</label>
<select name="speed" id="speed">
<option value="Slower">Slower</option>
<option value="Slow">Slow</option>
<option value="Med" selected="selected">Med</option>

Call the function & that’s all:

$('select#speed').accessibleUISlider();

The initial position of the slider can be mentined via the selected="selected" attribute to the option element you prefer.

FancyZoom, a Lightbox alternative which has a Mac-like zoom effect, is now ported to jQuery & Prototype. Best of all, now, they can present any HTML.

They also have some additions to the standard FancyBox like:

• The zoom will close when clicking outside the zoom box area.
• Hitting the esc key will close the zoom window.
• Passing an option of closeOnClick: true into the fancyZoom function will close the zoom when the contents are clicked as well. This works great for image galleries.

Click here for the jQuery version & here for the Prototype version.