Open Source Resources for Web Application Developers

JavaScript ColorPicker is a light weight all-rounder (only ~46k incl. all 16 files) that can display and let you choose the entire color palette (~16.78 mil. colors) in 6 different color modes (+3 extra modes in RGB).

This highly customizable and easy to install app comes in 4 different sizes (from 151 x 87 pixels to 405 x 302 pixels) and therefore different feature levels so you can use it for every supposable cause from ‘easy choice’ to ‘professional determination’. That’s probably all you’ll ever need to let your clients choose the right color.

You’ll also find a lot of extra helpers and smart features like contrast-meter, color-difference-meter, value-slider in input fields, web-smart and web-save button, color memories and much more that can help your clients make the right decision.

Requirements: Javascript Enabled
Demo: http://dematte.at/colorPicker/
License: GPL License

• 1 Comment

Broken links and 404 Errors are a problem that have plagued almost all websites since the dawn of the internet. There’s nothing attractive about clicking a link hoping that it’ll take you to your destination only to find out that the page doesn’t exist.

Addy Osmani has written a new jQuery Plugin called Catch404. Through the magic of jQuery we are going to catch 404 errors without your users even having to leave the page and then suggest some other options they have got using an inline jQuery Modal window. The benefit of Catch404 is that you can offer your users a better experience when errors are encountered on your site.

Requirements: jQuery Framework
Demo: http://www.addyosmani.com/resources/catch404/catch404.html
License: GPL License

• 4 Comments

Slippy is a HTML Presentation library written with jQuery, it takes a html file in and plays it in any browser. It is optimal for programming-related talks since it includes a syntax highlighter and is very easy to use since it’s just standard html markup with a few classes to enable specific functions.

If you are making a talk about Javascript, Slippy can even execute your code samples live and displays alert() boxes nicely instead of using the ugly browser dialog, which -I tried it today- works quite well to prove your point interactively.

Requirements: jQuery Framework
Demo: http://slides.seld.be/?file=2010-05-30+Example.html
License: GPL License

• 1 Comment

Sencha Touch allows your web apps to look and feel like native apps. Beautiful user interface components and rich data management, all powered by the latest HTML5 and CSS3 web standards and ready for Android and Apple iOS devices. Keep them web-based or wrap them for distribution on mobile app stores.

You can easily shift theme coloring, add style, and use our pre-included icons to deliver a phenomenal visual experience. Animate between views using one of our many predefined animations, with loads of configuration options.

Requirements: -
Demo: http://www.sencha.com/
License: GPL 3.0 + FLOSS License

• 5 Comments

TomatoCart is the new generation of open source shopping cart solution. It is branched from osCommerce 3 as a separate project. As web applications become more and more sophisticated, modern web 2.0 technology such as Ajax and Rich Internet Applications offers significant usability improvements and makes interacting with the web interfaces faster and more efficient. They have compared a lot of frameworks and come to the conclusion that ExtJS is the best framework for TomatoCart.

They completely rewrite osCommerce 3 administration site based on the qWikiOffice project which is a web desktop implementation of the ExtJS RIA framework. Web desktop application mimics user experience of desktop Operating System, offering features and applications similar to a PC environment. So that users can easily start to work with TomatoCart without any difficulty.

One of the core features of TomatoCart is that it allows users to keep several windows open simultaneously, to enable users to work with several modules such as products, customers and orders at the same time.

Requirements: PHP v5.1.6+ (with MySQLi), MySQL v4.1.13+ or v5.0.7+
Demo: http://www.tomatocart.com/index.php/products/store-demo
License: GPL License

• 10 Comments

SliderNav is a JQuery plugin that lets you add dynamic, sliding content using a vertical navigation bar (index). It is made mainly for alphabetical listings but can be used with anything, though longer words can look a bit awkward.

SliderNav automatically adds the navigation and sets the height for the object based on how tall the navigation is, in order to make sure users have access to the entire list. We used overflow: auto; property for the actual content so you can use your mousewheel to scroll through the content as well. It has been tested (and works fine) on Firefox 3, Chrome 5, IE7, Safari 4 and Opera 10.

Requirements: jQuery Framework
Demo: http://devgrow.com/slidernav-jquery-plugin/
License: MIT, BSD, and GPL License

• 5 Comments

This is called jQuery UI Notify Widget, that is similar to the Growl-like scripts we mentioned in the past, except most seem to come with an enormous footprint: 10-12k of code, X-number of images, and roughly 1000 options to support every plausible use case.

jQuery UI Notify Widget is built off the jQuery UI widget factory in approx. 100 lines of code and 100% CSS. In typical widget fashion, this implementation supports the most basic uses, but is flexible enough for more advanced cases.

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

• 3 Comments

Griddy is a small JQuery plugin thats creates a simple, customizable grid overlay on top of any element. It can also calculate row heights and column widths automatically based on the number of rows/columns and gutter space. There are few options, including: rows, row height, row gutter, columns, column height, column width, color and opacity.

All of the styling is done inline to avoid linking to an external CSS file or having to use images. The numbers on top are column widths, the numbers running along the left side are row heights. You can also look at 960.gs grid overlay which does the similar thing.

Requirements: jQuery Framework
Demo: http://devgrow.com/griddy-overlay/
License: MIT, BSD, GPL License

• 6 Comments

jConfirmAction is a jQuery plugin that aims to replace a plain confirmation box with a cute one. This plugin will help you to create a flying bubble confirmation box upside your link. Basically this plugin will create a DIV element that contains confirmation box after your clicked element, then it will appear with fading in and dissappear with fading out.

To create that one you just need to include jConfirmation plugin to your page, create a link, specify a class name, ask jConfirmAction to create a confirmation box and that’s it you have a cute confirmation box.

Requirements: jQuery Framework
Demo: http://webstuffshare.com/demo/jConfirmAction/
License: GPL License

• 5 Comments

After a couple of hours spent on the lookout for a simple and clean jQuery plugin to columnize lists with no success, Andrea Cima Serniotti decided to create his own one. It took him a couple of nights but the result is pretty good and hopefully it will help you whenever you need to split a list into different columns.

Easy List Splitter will get your list, wrap it into a container div, generate as many lists as the number of columns you require and evenly split the list items into the different list elements. If the list items are not enough to evenly fill in all the columns, the plugin will hide the columns in excess (this might happen only if you’re ordering your list items vertically as per default).

Requirements: jQuery Framework
Demo: http://www.madeincima.eu/samples/jquery/easyListSplitter/
License: MIT, GPL License

• 2 Comments