Open Source Resources for Web Application Developers

We love Mac apps, especially for their attention to detail. CoreAnimation makes it so easy to create useful and eye-pleasing effects. Quicksand aims at providing a similar experience for users on the web. It can reorder and filter items with a nice shuffling animation.

At the very basic level, Quicksand replaces one collection of items with another. All you need to do is provide those two sets of items. Advanced demonstrations include custom jQuery code to achieve some of the goals, like sorting or making Ajax calls. This code can be copied and used freely, but it’s not part of the plugin.

Requirements: jQuery Framework
Demo: http://razorjack.net/quicksand/
License: MIT and GPL2 License

• 10 Comments

Plupload allows you to upload files using HTML5 Gears, Silverlight, Flash, BrowserPlus or normal forms, providing some unique features such as upload progress, image resizing and chunked uploads.

Plupload is currently separated into a Core API and a jQuery upload queue widget this enables you to either use it out of the box or write your own custom implementation. Drag/drop support of files is currently only available in Firefox 3.5+. Image resizing is only possible on Firefox 3.5+ and only at a fixed quality.

Requirements: jQuery Framework
Demo: http://www.plupload.com/example_queuewidget.php
License: GPL v2 License

• 6 Comments

jQuery MultiSelect Plugin was intended to re-factor Cory LaViska’s MultiSelect implementation, but it quickly turned into a complete re-write with a focus on speed and ThemeRoller support. This plugin turns an ordinary HTML select control into an elegant drop down list of checkboxes.

jQuery MultiSelect Plugin is compatible with jQuery 1.4.0+ and all themes from jQuery UI 1.7+. It is known to work in Firefox 2+, IE 6+, Chrome Beta/4, Safari 4 and Opera 10.

Requirements: jQuery Framework
Demo: http://www.erichynds.com/examples/jquery-multiselect…
License: MIT, GPL License

• 3 Comments

Brosho ‘Design in the Browser’ jQuery Plugin allows you to style your markup right in your browser with a build-in element selector and CSS editor. Generate the CSS code of altered elements with one click and use it in your own stylesheet.

You can stop switching between your Editor and the Browser and changes will occur immediately without reloading the page. Once you are done designing your mockup you can generate the CSS code, copy and paste it to your stylesheet and tweak it to your likings. Much faster and better!

Requirements: jQuery Framework
Demo: http://demos.usejquery.com/brosho-plugin/
License: MIT, GPL License

• 3 Comments

StyledButton jQuery plugin is an attempt to recreate Google’s imageless buttons and prove that it doesn’t take a whole team of engineers and an endless cycle of code revision and quality control (their own words) to pull this off.

The buttons automatically adapt to paddings and other styling you wish to use. They allow for a lot of stylistic customisation via a few lines of css while keeping all the display critical css rules hidden deep inside the plugin.

Requirements: jQuery Framework
Demo: http://swizec.com/code/styledButton/
License: MIT, GPL License

• 4 Comments

MediaCore is a free open source video, audio, and podcast publishing platform. It is built for organizations who wish to distribute media in a variety of formats on their website while maintaining the ability to control the user experience.

The purpose behind MediaCore was to make a central media library that could pull media from any source, track statistics, enable commenting, and provide a high degree of control over the presentation and administration.

Administrative Workflow is straight forward and is built based around moderating and approving user-submitted media. Media can be added through either the front-end or administrative back-end.

Requirements: -
Demo: http://getmediacore.com/
License: GPL License

• 0 Comments

TipTip is a very lightweight and intelligent custom tooltip jQuery plugin. It uses ZERO images and is completely customizable via CSS. TipTip detects the edges of the browser window and will make sure the tooltip stays within the current window size. As a result the tooltip will adjust itself to be displayed above, below, to the left or to the right of the element with TipTip applied to it, depending on what is necessary to stay within the browser window.

TipTip jQuery Plugin is dual licensed under the MIT and GPL licenses. It’s also only 3.5kb minified!

Requirements: jQuery Framework
Demo: http://code.drewwilson.com/entry/tiptip-jquery-plugin
License: GPL, MIT License

• 13 Comments

iJab is an Ajax-based web based instant messaging program for XMPP/Jabber. It is free software and users can run their own instant messaging without limitations or software cost, complimenting the XMPP philosophy of a distributed network. iJab is interpreted purely by the client webbrowser. It runs solely in a browser and does not require downloading or installation of additional software.

iJab also developed iJabBar, a Facebook styled web chat client. Do you need integrating IM into you website or hosting your own IM service? iJab might be suitable for you.

Requirements: -
Demo: http://www.ijab.im/demos/
License: GPL License

• 4 Comments

The Google Maps jQuery Plugin lets you simply embed Google Maps using The Google Maps JavaScript API in your web pages. While you can use the original Google Maps JavaScript API to do what you need. This plugin attempts to simplify the process to adding maps to a page. To use The Google Maps JavaScript API, you need to first sign up for an API key.

The Google Maps jQuery Plugin is less than 10KB of JavaScript. Portions of the Map (div container, info window) is controlled through CSS, so a user can create their own styles. It has been tested on Firefox 3, Internet Explorer 8, Safari 4.

Requirements: Firefox 3, Internet Explorer 8, Safari 4
Demo: http://www.mayzes.org/googlemaps.jquery.html
License: GPL License

• 16 Comments

AutoSuggest jQuery Plugin makes auto-completing extremely easy. AutoSuggest will turn any regular text input box into a rad auto-complete box. It will dynamically create all the HTML elements that it needs to function. You don’t need to add any extra HTML to work with AutoSuggest.

Also, AutoSuggest jQuery Plugin uses ZERO images! All styling is done 100% in the included CSS file. This means it is super easy to customize the look of everything! You only need to edit the included CSS file. You can even use images if you want, just add the appropriate lines of code into the CSS file. And also, AutoSuggest jQuery plugin is dramatically smaller in size with just 7kb minified.

Requirements: jQuery Framework
Demo: http://code.drewwilson.com/entry/autosuggest-jquery-plugin
License: MIT, GPL License

• 1 Comment