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
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
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
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
The mooSlideBox v3 is a small and slim ajax based extension or replacement of the common “lightbox” that can be found on nearly every page. This lightbox clone works in IE 6/7, Opera and Firefox. Some users complained that the slider isn’t unobstrusive through its use of the bump effect, you can change the effect in the mooslide.js. Replace the Fx.Transitions.Bounce.easeOut with something like Fx.Transitions.linear.
Requirements: –
Demo: http://www.artviper.net/test/ajaxslide/
License: License Free
Shadowbox is a cross-browser (supports Firefox 1.5+, Camino, Safari 2+, Opera 9+ and Internet Explorer 6+), cross-platform, cleanly-coded and fully-documented media viewer application written entirely in JavaScript. In other words, it is similar to lightbox but focusing on displaying different media formats, e.g. Flash, QuickTime, and Windows Media Player.
It’s easy to use Shadowbox with your JavaScript library of choice for a given project as well. Shadowbox comes bundled with adapters for Yahoo! User Interface Library, Ext (standalone), Prototype + Scriptaculous and jQuery. Using Shadowbox, website authors can display pictures and movies in all major browsers without navigating away from the linking page.
Requirements: Firefox 1.5+, Camino, Safari 2+, Opera 9+ and IE 6+
Demo: http://mjijackson.com/shadowbox
License: LGPL License
There are many popups and galleries scripts we can use, Multibox is one of them as well. Multibox is lightbox that supports images, flash, video, mp3s, html. You can set the color of the background or use a semi-transparent background. It supports Firefox 2 (mac / pc), IE 7, IE 6, Safari (mac). However, it requires Mootools v1.1+ to run properly.
Requirements: Mootools 1.1+
Demo: http://www.phatfusion.net/multibox/
License: MIT License
Highslide JS is an open source JavaScript software, offering a Web 2.0 approach to popup windows. It streamlines the use of thumbnail images and HTML popups on web pages. The library offers these features and advantages:
- No plugins like Flash or Java required.
- Popup blockers are no problem. The content expands within the active browser window.
- Single click. After opening the image or HTML popup, the user can scroll further down or leave the page without closing it.
- Compatibility and safe fallback. If the user has disabled JavaScript or the JavaScript fails in any way, the browser redirects directly to the image itself or to a fallback HTML page. This fallback is able to cope with most exceptions and incompatibilities.
Highslide is free for a personal website, a school site, your family’s photo album or a non-profit organisation. If you want to use Highslide for a commercial website, you need to pay for it.
Requirements: IE 4.0+, Firefox 1.5+, Opera 8.5+, Netscape 7.2, Safari 2.0+
Demo: http://vikjavev.no/highslide/
License: License Free for Personal Use
Lightbox is a simple, unobtrusive script used to overlay images on the current page. This frees you from the constraints of the layout, particularly column widths. However it only supports images.
Now Videobox is a 6kb script, which allows you to show your videos in Lightbox. It was inspired from Lightbox.v2 and uses some of the Slimbox‘s code. It’s written for the wonderful mootools library. And used swfobject to embed flash. It has done a really great job, if you would like to show your videos in the page with an overlay, Videobox is a really great choice.
Requirements: No Requirements
Demo: http://videobox-lb.sourceforge.net/
License: MIT License
Sébastien Gruhier has always wanted to create a Class to handle in a easy way portal page like netvibes. After having tried to used Sortable of script.aculo.us, He decided to write his own Class. Prototype Portal Class allows users to drag and drop, re-arrange and remove any windows on the portal page. This is the first version he made. It has been tested on Safari, Firefox, Opera and IE 6/7. The first version is based on Prototype 1.5.1.1 but the next version will be based on 1.6.
Requirements: Prototype Framework
Demo: http://blog.xilinus.com/prototype-portal/test/index.html
License: MIT License
