Open Source Resources for Web Application Developers

CalendarPicker is a free ultra-light calendar/date-picker jQuery plugin. It looks different from all the others, supports multiple languages, and allows fast movement across months and years. This approach might not suitable for every context, but I am sure someone will find it useful.

CalendarPicker enables mouse wheel to change dates; it is enabled on years, months and days bars. Calendar picker is released under MIT license.

Requirements: jQuery Framework
Demo: http://bugsvoice.com/applications/bugsVoice/site/test…
License: MIT License

• 11 Comments

JS.Class is a library designed to facilitate object-oriented development in JavaScript. It implements Ruby’s core object, module and class system and some of its metaprogramming facilities, giving you a powerful base to build well-structured OO programs.

JS.Class is designed to make JavaScript behave like Ruby in terms of its OOP structures. It provides Classes and modules with Ruby-compatible inheritance, Subclassing and mixins, Singleton methods and eigenclasses, Method binding, Ports of various standard Ruby modules, including Enumerable, Hash, Set, Observable, Comparable, Forwardable.

Requirements: -
Demo: http://jsclass.jcoglan.com/
License: MIT License

• 1 Comment

Template Inheritance is an extremely useful technique for making reusable HTML layouts for a site. It is much more flexible than alternative techniques, such as “including” common elements of a page (like a header and footer file).

The concept has been around for a while, most notably in the Django template engine. Unlike other libraries, PHP Template Inheritance lets you write everything in straight PHP. There is no need to learn another template language.

It involves two separate templates, each in their own file: the parent template and the child template. The parent contains the HTML skeleton and markers for where content should go. These markers are calledblocks. The child then “fills-in” the blocks with content.

Requirements: PHP Framework
Demo: http://phpti.com/
License: MIT License

• 7 Comments

Reel is a jQuery plugin which takes an image tag and makes it a live “projection” of pre-built animation frames sequence. Its aim is to provide a 360° view of something or someplace. Great alternative to widely used Flash techniques. Stitched image is not required, but they do support them too.

Try reel for yourself. Place your mouse pointer over images below. And roll your mouse wheel up/down or drag the image left/right. Reel has been tested in Safari 3+, Firefox 3+, Chrome and IE 5.5+.

Requirements: jQuery Framework
Demo: http://jquery.vostrel.cz/reel
License: MIT and GPL License

• 6 Comments

jPhotoGrid takes a simple list of images and captions and turns it into a grid of photos that can be explored and zoomed. Nearly all of the styling for this plugin is done in css. The trick is to layout the grid by floating the list items. The first thing the plugin will then do, is convert these all to absolutely positioned. This is what allows the plugin to zoom in on an individual image and then return it to its place.

The javascript is easy enough to set up.  It needs to know the sizing of the thumbnails as well as the sizing and positioning of the zoomed image.  This is how the plugin is able to zoom and restore each of the images.  Note that you can also change the active and selected classes by setting them using the ‘activeClass’ and ’selectedClass’ options.

Requirements: -
Demo: http://www.newmediacampaigns.com/files/posts/jphotogrid…
License: MIT License

• 4 Comments

gameQuery is a jQuery plug-in to help make javascript game development easier by adding some simple game-related classes. gameQuery has the following features: multi layer-sprite animations, sprite hierarchies, collision detection, swappable sound support, periodic callbacks and keyboard state polling.

Javascript games are still in their infancy but but there is many reason why they are more than a curiosity: Modern borwser provide very good javascript engine and impovement keeps comming. Then to develope javascript games you don’t need an expensive proprietray IDE, widly available, free, open source software are there wating for you! Sometimes Flash is not available in some platform, even very recent ones (Wii, iPhone …).

Requirements: jQuery Framework
Demo: http://gamequery.onaluf.org/demos.php
License: MIT License

• 3 Comments

We’ve all seen the basic file upload form for uploading avatars, images, memes, etc. The problem with these is that once you upload your image it’s hidden from you.

The solution is to use a little bit of JavaScript to upload the image as soon as it’s selected and display a thumbnail so we can easily review the form before we submit it. Head on over to the ZURB – Image Uploads with 100% Less Suck to see a complete demo and breakdown of the JavaScript they use to accomplish this.

Requirements: jQuery Framework
Demo: http://www.zurb.com/playground/ajax_upload
License: MIT License

• 0 Comments

Building with progressive enhancement is essential to ensuring a usable experience for all. But how do you determine which browsers should receive the enhanced experience and which should stick with the basic experience?

Introducing EnhanceJS, a JavaScript framework designed specifically to deliver a usable experience to the widest possible audience, by testing the browser to determine whether it is capable of correctly supporting a range of essential CSS and JavaScript properties, and delivering features only to those that pass the test.

Filament Group is releasing EnhanceJS as an open source (MIT license) project to allow everyone to start building sites with test-driven progressive enhancement. They explained how to use EnhanceJS in your own projects so you can take advantage of new CSS and JavaScript features while ensuring a usable experience to all.

Requirements: jQuery Framework
Demo: http://www.filamentgroup.com/lab/introducing_enhancejs…
License: MIT License

• 4 Comments

YoxView is a free image viewer for websites. It’s written in javascript using jQuery and is available as a jQuery plugin. YoxView is inspired by Lokesh Dhakar’s Lightbox. Like it, YoxView displays images above the website’s content, as a separate layer.

Users always see the whole image, even on small screen resolutions or resized windows. Images smaller than the browser’s window are displayed at their original size, larger images are resized to fit. Images are loaded in the background, to improve the viewer’s performance and shorten wait times for users. Forward caching continues while viewing images.

Requirements: jQuery Framework
Demo: http://www.yoxigen.com/yoxview/
License: MIT License

• 9 Comments

Have you ever wished you could style checkboxes, drop down menus, radio buttons, and file upload inputs? Ever wished you could control the look and feel of your form elements between all browsers? If so, Uniform is your new best friend.

Uniform masks your standard form controls with custom themed controls. It works in sync with your real form elements to ensure accessibility and compatibility. You can also look at Niceforms that gives your forms new themes.

Requirements: jQuery Framework 1.3+
Demo: http://pixelmatrixdesign.com/uniform/
License: MIT License

• 4 Comments