Open Source Resources for Web Application Developers

Search and Share makes highlighting text a more functional action. More specifically, it attempts to understand the intention of a user’s text selection and present a variety of options accordingly. The criteria for understanding the intention is the character length of the selection, and the interpreted actions are copying, searching and sharing.

Whenever someone selects more than 40 characters from your web page and clicks the “Copy” link, your page title and URL will be included in the footer of the copied text. Your users will also be presented with the option to directly embed the excerpt in a newly composed email within Outlook, Gmail or Yahoo Mail. Sometimes, Search and Share enables your users to get the options of Wikipedia, Amazon or eBay as well.

Requirements: jQuery Framework
Demo: http://www.latentmotion.com/search-and-share/
License: Creative Commons 3.0 License

• 1 Comment

The problem of mouseover/-out the menu a couple of times. After you stop moving the mouse, the animation will continue since you’ve built up the animation queue with every mouse event.

Some uses the stop() method to prevent animation queue buildup. While this helps solve the initial problem, it introduces another: When you now do a fast mouseover/-out, you will see no animation at all or just a part of the animation. This behavior seems somehow unnatural.

The HoverFlow Plugin is the solution, which honors a single mouseover/-out with a full animation cycle while preventing animation queue buildup. A queued animation will only run if it corresponds with the current mouse position at “runtime”. That is, a mouseover animation will only run if the mouse is currently over the element, and a mouseout animation will only run if the mouse is currently not over the element. Otherwise, the animation queue is emptied.

Requirements: jQuery Framework
Demo: http://www.2meter3.de/code/hoverFlow/
License: MIT and GPL License

• 10 Comments

Meerkat, named for its pop up like behavior, is a jQuery plugin created by Jarod Taylor. Meerkat, depending on the options you have set, will slide or fade in from the top or bottom of the browser window and remain in its fixed position while the rest of the page will scroll normally.

You have a choice of providing a close option which will simply close Meerkat until the page has been reloaded, or a dontShow option, which will close Meerkat until the browser session has ended, or for a set amount of days, depending on the options you have defined.

Whether it’s used as a simple promotional tool, a roost for advertisements, or even as an alternative to a splash or entry page; Meerkat is unobtrusive, cross-browser compatible, and degrades gracefully if Javascript has been disabled.

Requirements: jQuery Framework
Demo: http://jarodtaylor.com/meerkat/demos/
License: MIT License

• 8 Comments

dygraphs is an open source JavaScript library that produces produces interactive, zoomable charts of time series. It is designed to display dense data sets and enable users to explore and interpret them. You can mouse over to highlight individual values. Click and drag to zoom. Double-click to zoom back out. Change the number and hit enter to adjust the averaging period.

Another significant feature of the dygraphs library is the ability to display error bars around data series. dygraphs is purely client-side JavaScript. It does not send your data to any servers – the data is processed entirely in the client’s browser.

Requirements: JavaScript Enabled
Demo: http://www.danvk.org/dygraphs/
License: License Free

• 5 Comments

Downloadify is a tiny JavaScript + Flash library that enables the generation and saving of files on the fly, in the browser, without server interaction. Web applications that allow you to generate vCards, color palettes, custom code, etc would benefit from using this library. In addition to increasing speed (no round trip to the server) this solution can reduce the database and server load of existing web applications.

Flash 10 introduced the ability to generate files on the client-side and trigger a save to the user’s computer. The user must click something in the Flash file to trigger the download for security reasons.

Downloadify couples JavaScript callbacks with the Downloadify.swf to allow your code to respond to the click event and pass in your data at that time. Whatever data is passed in from your function will be saved to their hard-drive when and where they select.

Requirements: JavaScript + Flash library
Demo: http://downloadify.info/
License: MIT License

• 4 Comments

Feature List is a simple jQuery plugin that enables simple and easy creation of an interactive “Featured Items” widget. The size is less than 2k. And it is reusable on multiple containers and work as a slideshow. Feature List can be styled easily with custom HTML/CSS too.

This plugin is managed to implement quite quickly. The script requires two arrays of items – for tabs and output. When user clicks on one of tab the script finds corresponding output item by index and starts fading.

Requirements: jQuery Library
Demo: http://jqueryglobe.com/labs/feature_list/
License: MIT License

• 6 Comments

Mollify is a web file manager for publishing and managing files hosted in a web server of your choice. Different users can have access to different files and with different permissions.

User interface is simple and intuitive, and it comes with following languages: Deutsch, English, Français, Português, Suomi. Mollify is 100% free to use, also sources are available with EPL 1.0 license.

Requirements: -
Demo: http://www.jaervelae.com/mollify/demo.php
License: EPL 1.0 License

• 3 Comments

Highcharts JS is a charting library written in pure JavaScript, offering an easy way of adding interactive charts to your web site or web application. Highcharts JS currently supports line, spline, area, areaspline, column, bar, pie and scatter chart types.

It works in all modern browsers including the iPhone and Internet Explorer from version 6. Setting the Highcharts configuration options requires no special programming skills. The options are given in a JavaScript object notation structure, which is basically a set of keys and values connected by colons, separated by commas and grouped by curly brackets.

On hovering the chart, Highcharts JS can display a tooltip text with information on each point and series. By zooming in on a chart you can examine an especially interesting part of the data more closely. Zooming can be in the X or Y dimension, or both. Highcharts is licensed under a Creative Commons Attribution-NonCommercial 3.0 License.

Requirements: Javascript Enabled
Demo: http://www.highcharts.com/demo
License: Creative Commons License

• 5 Comments

TopUp is another easy to use Javascript library for unobtrusively displaying images and webpages in popups. The library is jQuery and jQuery UI driven in order to maintain cross-browser compatibility and compactness.

TopUp is absolutely free, also for commercial use. The installation of TopUp consists of including only one file (no images or stylesheets), the look-and-feel is Apple-like, the animations and transitions look fancy, you can still use Prototype, it is so easy to specify options and last but not least: you can stay updated with the latest version without changing any code.

Requirements: jQuery Framework
Demo: http://gettopup.com/
License: Creative Commons License

• 13 Comments

Floom is a Blinds-effect MooTools Slideshow. There are two ways of setting Floom up. One is the object way, where you specify the image url and the caption using the key-value notation. The second one is by simply passing a element collection, ie. $$('#blinds img'), where the passed element has to be the actual image collection.

Requirements: Mootools Framework
Demo: http://nouincolor.com/floom/1.0/Demos/
License: MIT License

• 5 Comments