Open Source Resources for Web Application Developers

I would like to share two Digg Spy jQuery scripts that you can use on your site. A few years ago Digg released a very cool little visualisation tool called Digg Spy (it’s since been upgraded to the Big Spy). Recently Realmac Software released the site QuickSnapper which makes use of the similar spy technique.

if JavaScript is turned off, the list of snaps is visible by default. It only keep pulling in new items until it hits the end. jQueryforDesigners shows us how we can keep the list looping in “Simple jQuery Spy Effect Tutorial“, and in a follow up tutorial he’ll show us how to hook this in to an Ajax hit that doesn’t hammer your server and keeps the effect nice and smooth too.

You can also get the “jQuery Spy Plugin” from LeftLogic. It gives you the Digg Spy effect immediately as well. You can have your very own spy, for anything, with only a few lines of JavaScript.

Requirements: -
Demo: http://jqueryfordesigners.com/demo/simple-spy.html
Demo: http://leftlogic.com/jquery_spy/spy.html
License: License Free

• 3 Comments

We’ve seen a ton of Lightbox scripts used on an ever-increasing number of websites. However, Lightboxes are usually not consistent with the look & feel of the rest of the website, and they still feel like a kind of pop-up, since the image leaves the layer of the web page and opens up a new layer.

The author of jQuery.popeye wanted something more integrated in the flow of the web page – a box with a small preview image with caption, the possibility to flip through an array of more thumbnails and, of course, to show an enlarged version, all in one place. Lightbox offers that. Moreover, he wanted the box to stay anchored to the page layout and not hovering above it disconnectedly. The way to achieve this was writing a script which would fix one corner of the enlarged image to the exact spot where the thumbnail had been.

After toying around for a while, He decided to put the final outcome into a proper jQuery plugin and see, what other people think. May jQuery.popeye be of use!

Requirements: jQuery Framework
Demo: http://dev.herr-schuessler.de/examples/jquery-popeye/
License: Creative Commons License

• 2 Comments

We have mentioned Growl-like notification system for web a while ago, they are Send Notifications Instantly with Growl Mootools and Roar – Another Notification Widget with MooTools. Here is another Growl-like script for web which is written in jQuery called jGrowl.

jGrowl is a jQuery plugin that raises unobtrusive messages within the browser, similar to the way that OS X’s Growl Framework works. It has the ability to create multiple container instances, allowing a developer to raise and create various notifications in various location on the user’s screen.

Requirements: jQuery Framework
Demo: http://stanlemon.net/projects/jgrowl.html
License: MIT License

• 17 Comments

SimpleModal is a lightweight jQuery plugin that provides a simple interface to create a modal dialog. The goal of SimpleModal is to provide developers with a cross-browser overlay and container that will be populated with data provided to SimpleModal.

Requirements: IE 6+, Firefox 2, Opera 9, Safari 3
Demo: http://www.ericmmartin.com/simplemodal/
License: MIT and GPL License

• 6 Comments

Transparent messages are the brainchild of Jef Raskin. It’s simply a large and translucent message that’s displayed over the contents of your screen. They fade away when the user takes any action. In practice, the message is both noticeable yet unobtrusive. And because the message is transparent, you can see what’s beneath it. It’s just humane. Humane Messages is a system for displaying and temporarily logging non-modal messages, for use in web applications. Humane Messages requires the jQuery javascript library.

Requirements: jQuery Framework
Demo: http://binarybonsai.com/misc/humanmsg/
License: Apache License 2.0

• 10 Comments

We have published a post about Send Notifications Instantly with Growl Mootools few days ago. And then one of our readers, Oskar Krawczyk has pointed out that there is another Growl-like notifier called Roar which is more configurable.

Roar is a notification widget that streamlines incoming messages, such as updates or errors, without distracting the user from their browser experience or breaking their work-flow by displaying obtrusive alerts. Roar is inspired by Growl, and is realised with MooTools as well. You can check out the following 3 examples below.

• Never-ending Feed Showing feed items with link but without end.
• Random Alerts Random notifications for all 4 corners of the document.
• Update Ticker Timed updates on events.

Roar has been tested on all A-Grade Browsers and it is available under the MIT License.

Requirements: Mootools Framework
Demo: http://digitarald.de/project/roar/
License: MIT License

• 3 Comments

When we are developing web applications, we always need some kind of dialog boxes to inform the users the status of the system. Leigeber has put together a lightweight (~4.5kb) JavaScript dialog box library. The script currently offers four dialog styles: alerts, warnings, prompts and success.

JavaScript dialog box library is nothing to add to your page except references to the JavaScript and CSS if you choose not to incorporate them in your existing files. The Divs are dynamically added to the DOM when the function is called. The function currently relies on a content wrapper to calculate the page height however you could use the body height but the background overlay would only cover the currently visible content. The variable for the wrapper ID as well as the speed and timer settings are available at the top of the JS file. The script is tested working in IE 6/7, Firefox 2/3, Opera and Safari.

Requirements: -
Demo: http://sandbox.leigeber.com/dialog/dialog_box.html
License: License Free

• 4 Comments

If you are using Mac OS X, you should have come across Growl. Growl is a notification system for Mac OS X, it allows applications that support Growl to send you notifications. Notifications are a way for your applications to provide you with new information, without you having to switch from the application you’re already in. I think this feature is really useful for our web applications as well. Daniel Mota has created Growl 2.0 with Mootools, so that we can easily integrate this effect into our web applications.

Requirements: MootoolsFramework
Demo: http://icebeat.bitacoras.com/mootools/growl/
License: License Free

• 14 Comments

Few days ago, one of our readers asked if there is any free image magnifier script available on the internet. And then I have done some research and found this nice script. TJPzoom is an open source image magnifier that is written in JavaScript / DOM. If you move your mouse over the picture, you can see a little zoom window with a magnified version of a part of the picture in it.

The zoom ratio will be increased and decreased if you click and drag upwards/downwards your mouse. The zoom window will be increased and decreased if you click and drag to the right/left your mouse as well. Have you found any open source image magnifier that you would like to share with us too?

Requirements: Internet Explorer 6+, Firefox 2, Opera, Safari 2, Konqueror 3.5.6
Demo: http://valid.tjp.hu/tjpzoom/
License: Creative Commons 3.0 License

• 4 Comments

We have seen many modal box script (e.g. Prototype Window, Multibox, Modalbox and etc). I would like to introduce something a little bit difference to you guys. Here are the following two Facebook-style modal boxes. Both of them have a sexy transparent border which looks really stylish.

1) Facebox is a jQuery-based, Facebook-style lightbox which can display images, divs, or entire remote pages. It’s simple to use and easy on the eyes. Download the tarball, view the examples, then start enjoying the curves.

2) GlassBox is a compact Javascript User Interface (UI) library, which use Prototype and Script.aculo.us for some effects. With GlassBox you can build transparent border, colorful layouts and “Flash-like” effects. The GlassBox library is easy to use, customizable and skinnable, and it comes with a coherent API and documentation.

Requirements: Any Modern Browsers, IE 6, Firefox 2, Opera 9 and Safari 3
Demo: http://famspam.com/facebox, http://www.glassbox-js.com
License: License Free, MIT License

• 14 Comments