Open Source Resources for Web Application Developers

CSSTricks has created a Website Change Request Form, in order to show off some fancy form styling and advanced form functionality. The form is fully functional, submission can only happen when the required fields are filled out properly. Submission is handled via AJAX, no page refresh needed.

jqTransform is used to help with the styling of the form elements. It completely replaces radio buttons and check boxes with custom graphics, and wraps textareas and text-based inputs in nice styling as well. The submission of all the form elements is SERIALIZED, via jQuery Form Plugin, so adding and changing form elements is easy.

Requirements: jQuery Framework
Demo: http://css-tricks.com/examples/WebsiteChangeRequestForm/
License: License Free

• 2 Comments

We have mentioned TextboxList a while ago, which is something similar to Facebook List Input. Now New TextboxList has been rewritten from scratch, and it’s more powerful and flexible than ever.

It is compatible with MooTools 1.2.x. It does not depend on a specific data source (XHR, Json). Instead, the developer supplies the data which can come from anywhere. New TextboxList is now using Binary search for maximum performance. It supports new options, such as addOnEnter, which adds boxes upon pressing enter (useful for tags or categories widgets).

Requirements: Mootools 1.2.x
Demo: http://devthought.com/projects/mootools/textboxlist/
License: License Free

• 2 Comments

The layout of Apple.com is simple and beautiful. Yet, one of the most awesome things about the website is the search functionality. It gives you suggestions (with images) about the several products they offer, making it really user-friendly. Marco has recreated the effect by creating a Fancy Apple.com-style Search Suggestion Plugin.

It makes use of several techniques: MySQL (for the database), HTML/CSS for styling, PHP for retrieving the data and jQuery for the AJAX request. This technique would be great if it were converted to a plugin for a CMS (WordPress/Joomla/Drupal etc.), but also just very cool to have on your website.

Requirements: jQuery Framework
Demo: http://qpoit.com/marcofolio_demo/apple_search/
License: License Free

• 6 Comments

Ajax Fancy Captcha is a jQuery plugin that helps you protect your web pages from spammers. It is a new intuitive way of completing “verify humanity” tasks. In order to do that you are asked to drag and drop specified item into a circle.

Captcha’s security level is medium, with the emphasis on nice looking and user friendly qualities while still offering reasonable protection from unwanted “guests”. Basic design and its elements are easy to change and customize.

Requirements: jQuery Framework
Demo: http://www.webdesignbeach.com/beachbar/ajax-fancy-captcha…
License: License Free

• 38 Comments

Nikhil had been looking for a double pinned slider (slider with two knobs , minimum and maximum) using mootools. Though , he did find a few well done double pinned slider in the mootools forum, the only problem was that all these sliders did not have the selected range marker.

Finally! He has decided to create his own Mootools Slider With Two Knobs (Double Pinned Slider) with Range Indicator. You can easily change the look and feel of the range indicator, slider knob, the slider track by modifying the slider.css as required. You can also look at the Slider for jQuery we mentioned eailer.

Requirements: Mootools Framework
Demo: http://developer.expressionz.in/downloads/mootools…
License: License Free

• 2 Comments

If you’re familiar with del.icio.us you will be familiar with the tag suggesting as-you-type support. the tagging works so well within del.icio.us is that it helps you create a subset of tags that you commonly use for different types of links.

This way, it makes it easier to find tagged content later on. i.e. conversely if it didn’t suggest links, it would be likely that you would have different variations or even spellings of the same tag on (what should be) grouped content.

So, in an effort to adopt this approach, Remy Sharp has created a jQuery plugin for tag suggestion. The plugin has been tested on IE 7, Firefox 2, Safari 3 and Opera 9.

Requirements: jQuery Framework
Demo: http://remysharp.com/wp-content/uploads/2007/12/tagging.php
License: License Free

• 6 Comments

Xinha is a powerful WYSIWYG HTML editor component that works in Mozilla based browsers as well as in MS Internet Explorer. Its configurabilty and extensibility make it easy to build just the right editor for multiple purposes, from a restricted mini-editor for one database field to a full-fledged website editor. Its liberal, BSD licence makes it an ideal candidate for integration into any kind of project.

Xinha is Open Source, and they take this seriously. There is no company that owns the source but a community of professionals who just want Xinha to be the best tool for their work.

Requirements: -
Demo: http://xinha.webfactional.com/wiki/Examples
License: BSD License

• 7 Comments

SmartMarkUP is a lightweight and powerful JavaScript library that allows you to turn any textarea into a fancy markup editor. HTML, CSS, XML, Wiki syntax, BBCode or any other desired markup language can be implemented and/or adjusted to your preferences and business needs. SmartMarkUP doesn’t depend on any other JavaScript library and can be integrated with any already existing JavaScript library or code.

With single line of code you can turn any general textarea to powerful markup editor. As far as integration is unobtrusive, HTML of your application will remain unchanged. SmartMarkUP degrades gracefully for users without JavaScript without loosing functionality of your application.

SmartMarkUP is completely customizable and scriptable as well. Changing styles, implementing new markups, creating extra buttons and submenus or adding new functionality is a matter of minutes. SmartMarkUP is distributed under GPL open source licenses, so SmartMarkUP is absolutely free and you can do anything you like with it!

Requirements: Safari 3.x, Firefox 2.x, Firefox 3.x, Google Chrome, IE7, Opera
Demo: http://www.phpcow.com/smartmarkup/examples
License: GPL License

• 1 Comment

We have featured Niceforms v1.0 long time ago. It is a script that will replace the most commonly used form elements with custom designed ones. And it looks very pretty as well. However, there were some limitations and minor bugs. I am always hoping for a new version.

Finally! After what seemed like an eternity, the fully revamped version of Niceforms is ready to make its debut. Pretty much everything is new, from the basic coding approach, to the number of elements it handles, to the customization options. Niceforms v2.0 fully supports all modern browsers, with the exception of IE6, in which case it degrades gracefully to the original form.

You can customize the look of your forms in any way you want by creating your own themes. Since Niceforms replaces the form elements with images, it’s just a matter of slicing these images up correctly and creating the CSS that holds them all together. More themes are on the way as well.

Requirements: IE7+, Firefox2+, Safari3+, Opera9+, Chrome0.3+, Mozilla1.5+, Camino1.6+
Demo: http://www.emblematiq.com/niceforms/v20/niceforms.html
License: License Free

• 14 Comments

WYMeditor is a web-based WYSIWYM XHTML editor. WYMeditor has been created to generate perfectly structured XHTML strict code, to conform to the W3C XHTML specifications and to facilitate further processing by modern applications.

With WYMeditor, the code can’t be contaminated by visual informations like font styles and weights, borders, colors, …The end-user defines content meaning, which will determine its aspect by the use of style sheets. The result is easy and quick maintenance of information.

WYMeditor has been integrated in many open or proprietary applications, such as: Drupal, Symphony, Radiant, TYPO3, WordPress, Rails, CakePHP and etc…

Requirements: -
Demo: http://files.wymeditor.org/wymeditor/trunk/src/examples/
License: MIT, GPL License

• 2 Comments