Open Source Resources for Web Application Developers

FullCalendar is a jQuery plugin that provides a full-sized, drag & drop calendar. It uses AJAX to fetch events on-the-fly for each month and is easily configured to use your own feed format (an extension is provided for Google Calendar). It is visually customizable and exposes hooks for user-triggered events (like clicking or dragging an event).

FullCalendar is great for displaying events, but it isn’t a complete solution for event content-management. Beyond dragging an event to a different day, you cannot change an event’s name, time-of-day, or other associated data. It is up to you to add this functionality through FullCalendar’s event hooks.

Requirements: jQuery and jQuery UI Framework
Demo: http://arshaw.com/fullcalendar/
License: MIT, GPL License

• 2 Comments

Ext Core is a cross-browser JavaScript library for building dynamic web pages. It is lightweight with high performance. The code is clear and maintainable. Ext Core is intuitive with easy to use API as well. You can easily build Carousel, Lightbox, Menu, JSONP, Simple Tabs with Ext Core.

The Carousel example provides a widget for browsing a set of objects. It can be configured to meet any of your specific requirements – auto-play, animations, custom navigation dynamic content and more. The Lightbox example provides a widget used to overlay images on the current page.

The Menu example provides a widget that converts an existing list of links on the page to either a horizontal or vertical menu. The JSONP example shows how you can fetch JSON data from a different domain. It includes a class you can use to connect to any possible web service that supports the JSON format. The Simple Tabs example shows how you can create powerful navigation with only a few lines of code using Ext Core.

Requirements: Internet Explorer 6+, FireFox 1.5+, Safari 3+, Opera 9+
Demo: http://extjs.com/products/extcore/
License: MIT License

• 6 Comments

The iPod Drilldown and Flyout Styles Menu System can be used to create a simple dropdown menu for a single list of options, a flyout menu for a smaller hierarchical list of options where child menus are displayed next to the parent menu on mouseover, and two variations on the iPod style, one with a back button and another with a linked breadcrumb to let users easily traverse back up the hierarchy.

It provides easy navigation of complex nested structures with any number of levels. They also built in the ability to customize a menu’s appearance, including active and hover states, by passing in classes as options.

Requirements: jQuery Framework
Demo: http://www.filamentgroup.com/lab/jquery_ipod_style_and_flyout_menus/
License: MIT, GPL License

• 0 Comments

There are many fantastic javascript/AJAX solutions out there to view a larger version of an image by displaying it as a in-page pop-up or lightbox pop-up. It is rare to visit a website with a photo gallery that does not already utilize one of these solutions.

So why not make it a standard? Why not let the browsers take care of the heavy lifting rather than us web developers via javascript? Drew Wilson proposed adding a fullsize attribute to the <IMG> tag. By which you can references a larger (or fullsize) version of the SRC image. Browsers could then include native support to display the fullsize image in a pop-up. You can vote for Fullsize and add your name to the list of those who support this Fullsize idea.

Even though Fullsize is not currently in the next HTML spec yet, you can still get Fullsize jQuery plugin now. Since there is no fullsize attribute for the <IMG> tag yet, he is using the longdesc attribute instead. longdesc is a completely valid image attribute and is meant to contain a URL to a description of the image. The Fullsize jQuery plug-in is super easy to use, and provides a kick start to standardizing the way image pop-ups look and work.

Requirements: Safari, Firefox, Chrome, Opera, IE 8, IE 7, and IE 6
Demo: http://www.addfullsize.com/
License: MIT, GPL License

• 10 Comments

SundayMorning is a jQuery plugin which allow site-owners to offer their visitors some easy and fancy ways to translate their content in more than 30 languages. It uses the Google translate API. You can have Inline translation with menu, Word translation or Translation with remote trigger. It is available as a Bookmarklet as well. SundayMorning has been tested on Internet Explorer 6/7, Firefox 3, Safari 3.

Requirements: jQuery Framework
Demo: http://sundaymorning.jaysalvat.com/
License: MIT and GPL License

• 5 Comments

Instead of creating images or using flash just to show your site’s graphic text in the font you want, you can use typeface.js and write in plain HTML and CSS, just as if your visitors had the font installed locally.

Typeface.js uses browsers’ vector drawing capabilites to draw text in HTML documents. The typeface.js project has two components: the perl module for converting fonts, and the javascript library for drawing in the browser. The perl module extracts glyph outline information from truetype fonts and writes that data in JSON format. The javascript library then traverses the HTML document and renders text using <canvas> or VML to draw the glyphs.

This code is and always will be free and open source. This includes both the typeface.js javascript library, as well as the perl module with functionality to convert truetype fonts to typeface ones.

Requirements: Firefox 1.5+, Safari 2+, Internet Explorer 6+
Demo: http://typeface.neocracy.org/
License: MIT License

• 22 Comments

ColorBox is a customizable lightbox plugin for jQuery. The appearance is completely controlled through CSS so users can restyle the box in order to create a customized lightbox that is unique to their project. You can check out the example Style 1, Style 2, Style 3 and Style 4.

ColorBox supports photos, photo groups, ajax, inline, and iframed content. It is completely unobtrusive, requires no changes to existing HTML. It degrades gracefully, all content displayed can be accessed without JavaScript. And it generates W3C valid XHTML and CSS.

Requirements: jQuery 1.3+
Demo: Style 1, Style 2, Style 3 and Style 4
License: MIT License

• 9 Comments

Captify jQuery Plugin displays simple, pretty image captions that appear on rollover. Captions can be locked “always-on”, or set to fade in on rollover. Also, captions can slide in from the top or the bottom.

Captify was inspired by ImageCaptions, another jQuery plugin for displaying captions like these. unlike ImageCaptions at the moment, Captify is easy to use, small/simple, and completely ready for use in production environments. Captify has been tested on Firefox, Chrome, Safari, and Internet Explorer.

Requirements: jQuery Framework
Demo: http://masterfidgeter.com/projects/captify/
License: MIT License

• 2 Comments

UvumiTools Odometer is an odometer style Javascript counter, where you can actually see the numbers spining. It is a Mootools plugin requires no Flash, it’s all CSS and Javascript. It can serve multiple purposes, like a live visit counter or a cashier style counter on a shopping website. It can be anything that involves updating a numeric value dynamically.

UvumiTools Odometer can be be updated manually or you can set it so it periodically calls a server script via an AJAX request and uses the returned value as a new target. This is also easy, you just need to specify the URL to that script when you initialize the counter. If the difference between two values is too big and the counter is spinning for several minutes. You can directly jump to the targeted value by simply double-clicking on the counter.

Requirements: Mootools 1.2+
Demo: http://tools.uvumi.com/odometer.html
License: MIT License

• 5 Comments

Growl4Rails is a javascript component that provides the UI for growl-like notifications in your Rails web application. Jim Fiorato has recently added the ability to show multiple growls at once, as well as improved support for IE. You can also specify the duration and max number of growls to show.

If you are not using Rails, you can also get the Growl for jQuery and Growl for Mootools instead.

Requirements: Rails 2.1+, Prototype 1.6+, Scriptaculous 1.7+
Demo: http://github.com/jfiorato/growl4rails/tree/master
License: MIT License

• 0 Comments