J.A.I (JavaScript Audio Interface) is the world’s first JavaScript interface for web <audio>. It doesn’t use any images for it’s player interface, all the graphics being rendered to a <canvas> element at run-time. The links from the click-able play-list area are CSS customizable. ‘Javascript Audio Interface’ is designed to provide juke-box functionality to <audio> enabled browsers that use the Ogg Vorbis audio codec.

This open-source web-application reads standard HTML5 <audio> tags from the HTML document. If the browser does not support HTML5 audio, anything between the start and the end of the audio tag gets rendered. Thus, it allows you to offer fall-back content to users with older browsers.

In order to hear the sound, your browser neeeds to be serving the correct MIME types. You can update your http.conf if you’re using Apache. If you do not have access to this file then you can add the line AddType application/ogg ogg to .htaccess.

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 ;)

dhtmlxGrid is an AJAX-driven JavaScript Grid Control that allows easy implementation of nice looking DHTML tables with rich-in-cell editing, fixed multi-line headers/footers, resizable, sortable and draggable columns, built-in searching, grouping and data validation capabilities.

The grid view component is easy to use and provides great flexibility due to its rich client-side API. This grid control is 100% client-side and loads data dinamically through AJAX calls. Thus, it can be integrated with any server side technology (PHP, ASP, Coldfusion, JSP, Ruby-on-rails etc.), providing the possibility to save and update data into the database in real time without page refresh.

Features include:

• Full control with JavaScript API
• Simple JavaScript or XML configuration
• Built-in filtering, searching, grouping
• Auto-calculated values in footer/header
• Support for including other grids as subgrids
• Drag-and-drop rows/columns within grid
• Different keyboard mappings
• Easy styling with CSS or predefined skins
• Detailed documentation

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.

JS-CodeEdit is a JavaScript editor that converts your HTML textareas into a code editor with realtime syntax highlighting. If added into a form, the content can be submitted e.g. to be written to a file. A nice thing is that you can add as many editors as you want within a HTML page.

Currently the code editor supports the following languages: PHP, JavaScript, HTML, CSS.

Read more from this entry…

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.

Feature List is a JQuery Plugin useful to create an interactive “Features Items” widget. This 2KB plugin can be styled with custom HTML/CSS, cycles items via slideslow, offers a slick effect (no Flash required) and can be reused on multiple containers.

This plugin is managed to implement quite quickly. The script requires two arrays of items – for tabs and output. When user clicks on one of tab the script finds corresponding output item by index and starts fading. A CSS class current is added to the current active tab.

Which options are configurable?

• start_item – Index of active tab by default (counting starts from 0; default is 0)
• pause_on_hover – If it is set to true (default), animation will pause when mouse hovers over the tabs.
• transition_interval – Length of time between transitions (default: 5000; 0 is for no automatic transitions)

It’s well known that the CSS floating arranges the elements horizontally then vertically. JQuery Masonry, a layout plugin, is like a flip side of CSS Floats. It arranges elements vertically then horizontally according to the grid. Thus, the vertical gaps between elements of varying height are minimized, just like a mason fitting stones in a wall.

Features include:

• Multi-column width support
• Appending elements and Infinite Scroll support
• Proper fluid resizing support
• Less obtrusive layout. No inserting additional markup.
• Automatically binds event to window resizing

TufteGraph is a JQuery Plugin that generates beautiful (stacked) bar charts. It works in conjunction with the JQuery enumerable plugin. The graphs can be styled via CSS. If you are looking for beautiful colors you want to use on the charts, you can find some at colourlovers.com.

Why is it different from other JavaScript charting libraries?

• Uses dynamic functions for configuration, allowing for a really compact API (very few options)
• Non-core layout is done via CSS rather than code