Open Source Resources for Web Application Developers

SexyLightBox is a clone of the classic lightbox, but it is more lightweight and it looks sexier. It was built for web designers, so it is really easy to install and use. SexyLightBox supports all sorts of images of different sizes and HTML elements. The images larger than the browser, are adjusted automatically to see them completely. I really like the bouncy effect when the box comes out and resizes.

Requirements: Mootools Framework 1.2
Demo: http://www.coders.me/ejemplos/sexy-lightbox-2/
License: MIT License

• 7 Comments

Filling a time field in a form is relatively annoying. There is a bunch of JavaScript “time” pickers, but they seem to always stick to the same approach, most of them sucks in term of user interaction and usability .

Above all Haineault thinks a time picker widget should not alter the way users input data, if they want to use the field as a plain text field and enter “8:00″ manually they should be able to. But there is still room for innovation, so he has determined a set of goals and tried to design his own widget around it:

• It should be unobtrusive
• It should degrade gracefuly
• It should require maximum 2 clicks
• It should allow intuitive keyboard navigation
• It should be touch-friendly (think iphone, tablet pc, etc..)

I love the idea and how it works. You can check the demo here. However, this project is experimental and in its very early stage, so there is probably still a handful of bugs to fix. Please feel free to give him some feedback.

Requirements: jQuery Framework
Demo: http://haineault.com/media/examples/jquery-utils/demo/ui-timepickr.html
License: MIT License

• 11 Comments

Treeview is a lightweight and flexible jQuery Plugin which transforms an unordered list into an expandable and collapsible tree. It is great for unobtrusive navigation enhancements. Treeview supports both location and cookie based persistence. It has been tested in Firefox 2, IE 6 & 7, Opera 9 and Safari 3.

Requirements: Firefox 2, IE 6 & 7, Opera 9, Safari 3
Demo: http://jquery.bassistance.de/treeview/demo/
License: MIT, GPL License

• 1 Comment

Raphaël is a small JavaScript library that should simplify your work with vector graphics on the web. In case you want to create your own specific chart or image crop-n-rotate widget, you can simply achieve it with this library.

Raphaël uses SVG and VML as a base for graphics creation. Because of that every created object is a DOM object so you can attach JavaScript event handlers or modify objects later. Raphaël’s goal is to provide an adapter that will make drawing cross-browser and easy. Currently library supports Firefox 3.0+, Safari 3.0+, Opera 9.5+ and Internet Explorer 6.0+.

Requirements: Firefox 3.0+, Safari 3.0+, Opera 9.5+ and Internet Explorer 6.0+
Demo: http://raphaeljs.com/
License: MIT License

• 2 Comments

The “seekAttention” plugin gracefully get’s your users attention by fading out a definable area but leaving the target element (the element which is seeking attention) un-faded and thereby focusing the users attention on it.

The definable area (to be called “container” from this point forward) can be the entire page or any element which surrounds the target element and the colour which overlays the container can also be defined by you. Not only will it focus the element but it will automatically scroll the page if the element is out of the users view. It works very well in Firefox 2 or 3, Google Chrome and Safari (on Windows). It works quite well on IE7 and Opera as well.

Requirements: jQuery Framework
Demo: http://enhance.qd-creative.co.uk/demo/seekAttention/
License: MIT, GPL License

• 7 Comments

Snook read Dave Shea’s article on CSS Sprites using jQuery to produce animation effects, he felt like playing around with things to see what could be done but accomplish it with a simpler HTML structure (no need for adding superfluous tags) and simpler code, too.

Changing the position of the background image felt to be the best approach to creating the type of effect we’re looking for. Snook has shown us Background-Position plugin and published an article “Using jQuery for Background Image Animations” about how to use it. The script to put this altogether is really straightforward. The animation needs to run when the user moves their mouse over and out of the navigation. The key thing to note is that any animation is stopped before attempting to animate again. This avoids animations queuing up from repeatedly moving the mouse in and out of the element.

Requirements: jQuery Framework
Demo: http://snook.ca/technical/jquery-bg/
License: MIT, GPL License

• 1 Comment

MenuMatic is a MooTools 1.2 class that takes a sematic ordered or unordered list of links and turns it into a dynamic drop down menu system. For users without javascript, it falls back on a CSS menu system. MenuMatic has the following main features.

• Search Engine Friendly: Only manipulates existing links, does not generate links with javascript.
• Usable: Adjust hide delay to keep menus from disappearing to quickly.
• Accessible: Tab through main menu links with tab key. Navigate through drop down menus with arrow keys.
• Fails Gracefully: Falls back to suckerfish CSS based drop down menu system in the absence of javascript.
• Stylish: Control how menu looks with CSS, add flair with some effects.
• Flexible: With plenty of options (and more coming down the road) and the open source code, make it do your bidding.

Requirements: MooTools 1.2 Core
Demo: http://greengeckodesign.com/projects/menumatic.aspx
License: MIT License

• 7 Comments

Like Ruby on Rails, Merb is an MVC framework. Unlike Rails, Merb is ORM-agnostic, JavaScript library agnostic, and template language agnostic, preferring plugins that add in support for a particular feature rather than trying to produce a monolithic library with everything in the core. Merb is also thread-safe and was originally engineered to handle multiple file uploads concurrently.

Merb is a simple, clearly documented core. Rather than trying to cram every feature under the sun into a single code base, we keep things to the bare minimum, without sacrificing anything important. The core code in Merb is kept simple and well organised meaning it’s easier to understand, maintain and extend.

Merb is featureful, flexible and extensible. For any features that aren’t covered in Merb’s core, there are plugins. Rather than reinvent the wheel with a custom plugin framework, these are implemented as RubyGems, giving us easy plugin installation, updates and versioning.

Requirements: -
Demo: http://merbivore.com
License: MIT License

• 1 Comment

Jcrop is a powerful image cropping engine for jQuery. It’s been designed so developers can easily integrate an advanced image cropping functionality directly into any web-based application without sacrificing power and flexibility.

It combines the ease-of-use of a typical jQuery plugin with a powerful cross-platform DHTML cropping engine that is faithful to familiar desktop graphics applications. Jcrop also features clean, well-organized code that works well across most modern web browsers.

Requirements: jQuery Framework
Demo: http://deepliquid.com/projects/Jcrop/demos.php
License: MIT License

• 11 Comments

Superfish is an enhanced Suckerfish-style menu jQuery plugin that takes an existing pure CSS drop-down menu (so it degrades gracefully without JavaScript) and adds the some nice features as well. The reveal of sub-menu is animated, uses a fade-in by default but can be given a custom object to be used in the first argument of the animate function. The animation speed is also customisable but is set to “normal” by default.

There is a set of callback functions (onInit, onBeforeShow, onShow and onHide) available as well, allowing for further enhancements and functionality to be added without needing to alter the core Superfish code.

Requirements: jQuery v1.1.3.1+
Demo: http://users.tpg.com.au/j_birch/plugins/superfish/
License: MIT and GPL License

• 4 Comments