Open Source Resources for Web Application Developers

FormCheck is a Mootools plugin that allows to performs different tests on forms and indicates errors. It works with input (text, radio, checkbox) fields, textarea and select boxes. You just need to add a specific class to each fields you want to check. You can perform check during the datas entry or on the submit action, shows errors as tips or in a div before or after the field, show errors one by one or all together, show a list of all errors at the top of the form, localize error messages, add new regex check and etc…

Requirements: Mootools framework
Demo: http://mootools.floor.ch/en/labs/formcheck/forum-registration/index.htm
License: MIT License

• 7 Comments

FreeRichTextEditor is an extremely easy to use free javascript based HTML WYSIWYG editor for your website, it can easily be implemented into any existing content management system or other web application with no knowledge required in programming or javascript. Only 3 lines of code required to set up the editor. It also now outputs as XHTML compliant code.

FreeRichTextEditor’s interface looks like Microsoft Office Word, it is easy to use without any help. You are free to use this editor as you wish as long as all copyright notices remain intact. However, there is a number of issues have arisen about the kind of characters used when using special characters. This is done by some 3rd party code embedded within the editor.

Requirements: -
Demo: http://www.freerichtexteditor.com/demo/
License: Creative Commons 2.5 License

• 7 Comments

PrettyCheckboxes is for people who wants to have a consistent look for checkboxes across browser or those who simply want them to look better. By using this script you wont loose any of the regular inputs usability. It has been tested and is known to work in Firefox 2+, Opera 9.5, Safari 3.1.1 and Internet Explorer 6+. This script is licensed under Creative Commons Attribution 2.5. So you can use it in all you projects even commercial ones.

Requirements: jQuery Framework
Demo: http://www.no-margin-for-errors.com/projects/prettyCheckboxes/
License: Creative Commons 2.5 License

• 4 Comments

One of our lovely WebAppers readers, James Wright has found an interesting tool and submitted to us. This is called dBug, which is a PHP version of ColdFusion’s cfdump. Basically, it outputs colored and structured tabular variable information. Variable types supported are: Arrays, Classes/Objects, Database and XML Resources. Stylesheet can be easily edited. Table cells can be expanded and collapsed as well. dBug is free for download, and it has been downloaded over 20,000 times now.

Requirements:-
Demo: http://dbug.ospinto.com/
License: GPL License

• 4 Comments

Alternate Select Multiple (asmSelect) is a progressive enhancement to <select multiple> form elements. It provides a simpler alternative of with the following advantages:

• Easier for users to understand and interact with than regular <select multiple> form elements. Users know how to interact with it sans instruction.

• Doesn’t require user to Ctrl-Click or Shift-Click multiple elements. Instead users of your form can add or remove elements individually, without risk of losing those that have already been selected.

• Selected elements are always visible (within the confines of your interface) while unselected elements are always hidden (within a regular <select>).

• Unlike regular <select multiple> option elements, those on asmSelect are optionally sortable with drag and drop (this part requires jQuery UI).

• If a user does not have javascript, then of course the regular <select multiple> form element is used instead.

Requirements: -
Demo: http://www.ryancramer.com/projects/asmselect/examples/example1.html
License: GPL License

• 3 Comments

We have seen a lot of examples of Live Search. But now, Ordered List has added a bit of a twist to it. Steve mentioned that the typical year and month layout of archives was overkill. He thought a better way to present them would be to list them all and let live search sort ‘em out. He has created Live Search with Quicksilver Style by integrating “Quicksilver string ranking algorithm” into Live Search component. “Quicksilver string ranking algorithm” will be able to recognize which items you are searching for if you just use abbreviations, so you can type entire words, or just fragments of each.

For example, sure you can search ‘sidebar creative’ to find posts titled that, now you can just type ‘sdbcv’ to get the same result. And that guy Nunemaker, but is that name a keyboardful. Why don’t we just hit a few of the important characters like ‘nnmkr’. The post of “Welcome John Nunemaker” is right there at the top. Try out the demo, you will love this immediately.

Requirements: -
Demo: http://orderedlist.com/demos/quicksilverjs/
License: MIT License

• 7 Comments

SPAW Editor is a web based in-browser WYSIWYG HTML editor control. It is a replacement for standard HTML textarea fields for rich text content editing. It includes lots of exciting features. The followings are the 2 major and interesting features SPAW Editor provides.

Tabbed Multi-document Interface
New industry unique tabbed multi-document interface feature. Now you can edit virtually unlimited number of HTML snippets in a single WYSIWYG instance. This can save a lot of screen space, unnecessary scrolling and loading time compared to other solutions where you have to load as many WYSIWYG instances as HTML snippets you want to edit.

Floating/Shared Toolbars
Multiple instances of SPAW Editor can be controlled by a single toolbar. This toolbar can either be attached to one of the instances or float around the screen. This way you can save loading time and achieve a better level of integration of the editing area into complex designs (no toolbar overhead).

Requirements: -
Demo: http://spaweditor.com/en/disp.php/en_products…
License: GPL License

• 6 Comments

Wysiwym Markdown editor (WMD) is a simple, lightweight HTML editor for blog comments, forum posts, and basic content management. You can add WMD to any textarea with one line of code. Add live preview with one line more. WMD works in nearly all modern browsers, and is now completely free to use. The next release will be open source under an MIT-style license. This is not a normal WYSIWYG editor.

Wysiwym stands for What You See Is What You Mean. WMD produces clean semantic HTML, leaving presentation details like fonts and colors up to style sheets. But you’re not left in the dark about cosmetics; as you type, WMD’s live preview shows you exactly what your text will look like after the current styles have been applied.

Markdown is a simple markup language that’s as easy to read and write as plain-text email. WMD uses Markdown as an input format, converting it into HTML behind the scenes. You can also mix raw HTML with Markdown, so the full expressiveness of HTML is always there if you need it.

Requirements: -
Demo: http://wmd-editor.com
License: License Free , MIT License

• 5 Comments

Masked Input Plugin is a masked input plugin for the jQuery javascript library. It allows a user to more easily enter fixed width input where you would like them to enter the data in a certain format (dates,phone numbers, etc).

A mask is defined by a format made up of mask and placeholder characters. Any character not in the placeholder character list below is considered a mask character. Mask characters will be automatically entered for the user as they type and will not be able to be removed by the user. The following placeholder characters are predefined:

* a – Represents an alpha character (A-Z,a-z)
* 9 – Represents a numeric character (0-9)
* * – Represents an alphanumeric character (A-Z,a-z,0-9)

It has been tested on Internet Explorer 6/7, Firefox 1.5/2, Safari, and Opera. The file size is very small with only 7.3k and 2.8k for the Packed version.

Requirements: jQuery Framework
Demo: http://digitalbush.com/projects/masked-input-plugin
License: License Free

• 9 Comments

Creating accessible Web2.0 applications can be a tricky process. Many of the advanced widgets and controls we develop today don’t exist in the current HTML specification — there is no “slider” element. So Filament Group has developed an accessible slider based on the core principle of progressive enhancement with jQuery.

Filament Group designed and developed an accessible slider with a very nice interface which allows users to choose one or a range of values on a continuum. Values on a slider can represent anything from hours on a clock to the volume on a music player to a complex, proprietary data set. In its simplest form, the slider is displayed as an axis of values with a handle to drag and select a value, or two handles for selecting a range.

The code is open source and licensed under GPL. You can view source to grab the code from this working example.

Requirements: jQuery
Demo: http://www.filamentgroup.com/lab/developing_an_accessible_slider/
License: GPL License

• 3 Comments