audio.js – A JavaScript Library For Flexible HTML5 Audio Players

audio.js is a drop-in JavaScript library that provides a more flexible HTML5's tag usage.

It uses native where available and falls back to an invisible flash player to emulate it for other browsers.

The player can be completely styled with CSS to provide a consistent user interface.

audio.js can only play mp3 files and can be extended in any way like playing a single file or a list of songs.

Requirements: No Requirements

Compatibility: All Major Browsers

Website: http://kolber.github.com/audiojs/

Flexible Tooltips With jQuery Bubble Popup

jQuery Bubble Popup is a plugin for the popular JS framework that helps creating chic tooltips which can be controlled easily.

The tooltips are shown/hidden with fading animations and any HTML content can be displayed inside them.

They can be attached to any side of an element and it is possible to get the status of a tooltip (on/off, creation, last-modified or last-display date & time) to act accordingly.

A tooltip's design can easily be customized with the help of a template system and the plugin is very well-documented.

Requirements: jQuery
Compatibility: All Major Browsers
Website: http://www.vegabit.com/jquery_bubble_popup_v2/
Demo: http://www.vegabit.com/Examples/different-elements.html
Download: http://plugins.jquery.com/project/jqBubblePopup

HTML5 Video Player With Subtitle-Support – LeanBack Player

LeanBack Player is an open source HTML5 video player that doesn't rely on any JavaScript frameworks.

It has support for subtitles using HTML5 track element and language-selection by label attribute of track (yes, subtitles can be multilingual).

The player has built-in fullscreen mode, volume controls (mute on/off and volume bar) and can handle multiple videos in a single page.

Almost every action can be done via keyboard controls besides standard usage.

LeanBack Player works in all popular browsers and falls back to Flash if HTML5 video is not supported.

Requirements: No Requirements

Compatibility: All Major Browsers

Website: http://dev.mennerich.name/showroom/html5_video/

jQuery Slider With Hashtag Support: Hash Slider

Hash Slider is a jQuery slider plugin that can display any type of content.

It has a tiny footprint (~2.2kb) and converts an unordered list into a good-looking slider.

The plugin has support for hashtags which means any item inside the list can be linked directly (for ex: http://domain.com/slider.html#3 will show the 3rd slide).

Slides can be browsed with the help of auto-generated "number-navigation" or using the prev-next buttons. Also, it is possible to use mouse-wheels.

Hash Slider has a simple and clean HTML structure and it can be styled completely with CSS.

Requirements: jQuery

Compatibility: All Major Browsers

Website: http://mgoys.com/lab/hashslider/

Smart’n Fluid CSS/LESS Framework – Centage

Centage is a CSS framework that focuses on creating simple-to-advanced fluid layouts easily.

It is based on less.js, a JavaScript implementation of less css, and makes use of it's advanced features like mixins, variables and nesting.

Also, due to the nature of less language, it doesn't add any extra markup to the Xhtml documents and everything stays inside the CSS file.

The framework doesn't use any pixel values, everything expands and shrinks according to browser width, remaining in visual balance.

Besides these advantages, the major disadvantage is the requirement of JavaScript (there are solutions offered for that in the resource's website).

Centage is currently in alpha stage and, although works as expected in most modern browsers, have problems in Opera and not fully tested in IE.

Requirements: less.js

Compatibility: All Modern Browsers (Opera has issues)

Website: http://centage.peruste.net/

Demo: http://centage.peruste.net/testlab.html

Download: https://github.com/jokjus/centage

SpryMap – JavaScript Drag ‘n’ Drop Widget

SpryMap is a JavaScript widget for creating drag 'n' drop windows similar to Google Maps for easily navigating around big images.

It is a standalone script that doesn't require any JS frameworks and still lightweight (2.8kb).

The widget has the options to give you the full control including "the starting coordinates", "dragging to be stopped or not when an edge is reached" and more.

There is also an animation once the image is dropped that positions the image softly (optional as well).

Requirements: No Requirements

Compatibility: All Major Browsers

Website: http://candrews.net/blog/2010/10/introducing-sprymap/

Demo: http://candrews.net/sandbox/spryMap/

Charming Lettering With jQuery – Lettering.js

CSS3 boosted the use of custom fonts and styles in websites. However, it still doesn't offer a complete down-to-the-letter control.

Lettering.js, a lightweight and easy to use Javascript injector for radical web typography aims to fill this gap.

It simply divides any given element into pieces of s wrapping each letter with a custom class.

Requirements: jQuery
Website: http://letteringjs.com/
Download: http://github.com/davatron5000/Lettering.js