Create Alert, Confirmation Messages with Noty jQuery Plugin
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.
ModalBox is a JavaScript technique for creating modern (Web 2.0-style) modal dialogs or even wizards (sequences of dialogs) without using conventional popups and page reloads. It’s inspired by Mac OS X modal dialogs. ModalBox is built with pure JavaScript and is very lightweight (10kb).
ThickBox is a webpage UI dialog widget written in JavaScript on top of the jQuery library. Its function is to show a single image, multiple images, inline content, iframed content, or content served through AJAX in a hybrid modal. A modal window is a child window which requires the user to interact with it before they can return to operating the parent application. Modal windows are commonly used in GUI systems to absorb user awareness and to display emergency states.
17 Feb
Posted by Ray Cheung as MIT License, Popup
Noty is a jQuery plugin that makes it easy to create alert, success, error and confirmation messages as an alternative the standard alert dialog. Each notification is added to a queue. The notifications can be positioned at the top, bottom, centre, top left or top right.
There are lots of other options in the API to customise the text, animation, speed, buttons and much more. It also has various callbacks for the buttons, opening closing the notifications and queue control.
There are lots of other options in the API to customise the text, animation, speed, buttons and much more. It also has various callbacks for the buttons, opening closing the notifications and queue control.
Requirements: jQuery Framework
Demo: http://needim.github.com/noty/
License: MIT License
SimpleModal is a small plugin to create modal windows. It can be used to generate alert or confirm messages with few lines of code. Confirm configuration involves the use of callbacks to be applied to affirmative action; it can work in asynchronous mode and retrieve content from external pages or getting the inline content.
SimpleModal is not a lightbox although the possibility to hide parts of its layout may partially make it similar. It is written in Mootools. It is available free for download, and released under MIT License.
SimpleModal is not a lightbox although the possibility to hide parts of its layout may partially make it similar. It is written in Mootools. It is available free for download, and released under MIT License.
Requirements: Mootools framework
Demo: http://simplemodal.plasm.it/
License: MIT License
LeanModal is a simple JQuery plugin for modal windows. It is built for all the short dialogs, alerts, panels and such associated with an app, that you may want to handle in a modal window. Designed to handle hidden content, and doesn’t apply any styles to the target element, other than for displaying and positioning.
Requirements: jQuery Framework
Demo: http://leanmodal.finelysliced.com.au/
License: License Free
Humane JS was heavily inspired by humanmsg project for jQuery. Marc Harter removed the jQuery dependency, add support for CSS transitions, and have more control over the timing.
Humane JS tries to be as unobtrusive as possible to the user experience while providing helpful information that is clear and grabs the users attention. It is framework independent. Customizable. It has been tested on IE6+, Firefox 3+, Chrome 9+, Safari 3+, Opera 10+.
Humane JS tries to be as unobtrusive as possible to the user experience while providing helpful information that is clear and grabs the users attention. It is framework independent. Customizable. It has been tested on IE6+, Firefox 3+, Chrome 9+, Safari 3+, Opera 10+.
Requirements: Javascript Framework
Demo: http://wavded.github.com/humane-js/
License: MIT License
Apprise is an alert alternative for jQuery that looks good. Apprise is a very simple, fast, attractive, and unobtrusive way to communicate with your users. Also, this gives you complete control over style, content, position, and functionality.
Apprise is, more or less, for the developer who wants an attractive alert or dialog box without having to download a massive UI framework. It has been tested on Chrome 8.0+, Firefox 3.0+, Safari 4.0+, Internet Explorer 9.0.
Apprise is, more or less, for the developer who wants an attractive alert or dialog box without having to download a massive UI framework. It has been tested on Chrome 8.0+, Firefox 3.0+, Safari 4.0+, Internet Explorer 9.0.
Requirements: jQuery Framework
Demo: http://thrivingkings.com/apprise/
License: Creative Commons License
Using CSS3 techniques a modal box can be created without JavaScript or images. With a bit of animation, transition and transform, it can be made that little bit more special. Here we have CSS Modal by Paul Hayes.
The modal animation is hardware accelerated on Safari and iOS, which gives notable performance improvements. The animations are available in Chrome but will feel more sluggish. Firefox will see the opacity transition but not the bounce or minimise animation as it doesn’t yet support @keyframe.
However, it won’t work in IE8 and below, there’s no pointer-event support and opacity is poorly implemented. IE9 supports :target but no pointer-events. Some IE specific styles could easily switch the opacity toggle to a display or visibility one.
The modal animation is hardware accelerated on Safari and iOS, which gives notable performance improvements. The animations are available in Chrome but will feel more sluggish. Firefox will see the opacity transition but not the bounce or minimise animation as it doesn’t yet support @keyframe.
However, it won’t work in IE8 and below, there’s no pointer-event support and opacity is poorly implemented. IE9 supports :target but no pointer-events. Some IE specific styles could easily switch the opacity toggle to a display or visibility one.
Requirements: Chrome or Firefox Browser
Demo: http://www.paulrhayes.com/experiments/modal/
License: License Free
TinyBox2 modal box script brings a ton of new features and still clocks in under 5KB. The script now supports iframes and images natively. You can POST with Ajax. Clicking ESC will close the window. Callback functions can be passed for load and close events.
You can set CSS IDs to override the default styling. CSS position can be toggled between fixed and absolute. The mask opacity can be sent. You have full control over window location. And of course there is now a close button out of the box you can toggle.
This script is tested in IE7+, FF, Chrome, Opera, and Safari and is available free of charge for both personal or commercial projects under the creative commons license.
You can set CSS IDs to override the default styling. CSS position can be toggled between fixed and absolute. The mask opacity can be sent. You have full control over window location. And of course there is now a close button out of the box you can toggle.
This script is tested in IE7+, FF, Chrome, Opera, and Safari and is available free of charge for both personal or commercial projects under the creative commons license.
Requirements: -
Demo: http://sandbox.scriptiny.com/tinybox2/
License: Creative Commons License
How to Create jQuery Custom Confirm Dialog Replacement
03 Feb
Posted by Ray Cheung as License Free, Popup
Tutorialzine are teaching us how to build a cross-browser, jQuery Custom Confirm Dialog Replacement. You can choose the text, buttons, and actions that will be executed when they are clicked.
You can customize the appearance of the dialog by modifying jquery.confirm.css. As the message attribute of the dialog takes HTML text, you can further customize it by displaying images and icons in the confirm window. You can even alternatively use this plugin as an alert dialog – you will just need to pass a single button with no action attribute.
You can customize the appearance of the dialog by modifying jquery.confirm.css. As the message attribute of the dialog takes HTML text, you can further customize it by displaying images and icons in the confirm window. You can even alternatively use this plugin as an alert dialog – you will just need to pass a single button with no action attribute.
Requirements: jQuery Framework
Demo: http://demo.tutorialzine.com/2010/12/better-confirm-box…
License: License Free
We have got a New jQuery Modal Plugin called Reveal to join our Collection of Modal Plugins. Reveal is awesome because it’s easy to implement, is cross-browser compatible with modern browsers (with some graceful degradation of course) and lightweight coming in at only 1.75KB.
Setting up Reveal modals is only three easy steps. Attach the needed files, drop in your modal markup then add an attribute to your button. Reveal is licensed to use and abuse under the MIT license.
Setting up Reveal modals is only three easy steps. Attach the needed files, drop in your modal markup then add an attribute to your button. Reveal is licensed to use and abuse under the MIT license.
Requirements: jQuery Framework
Demo: http://www.zurb.com/playground/reveal-modal-plugin
License: MIT License
Display Sliding Notifications on Your Website with SlideNote
02 Dec
Posted by Ray Cheung as MIT License, Popup
SlideNote is a customizable, flexible jQuery plugin that makes it easy to display sliding notifications on your website or in your web application. SlideNote offers a set of options that allow you to modify the behavior and/or content of the script. You can specify how far down the user must scroll before the notification slides into view.
SlideNote is compatible with jQuery 1.4.3 and current versions of major browsers. IE8 is the only version of Internet Explorer that is officially supported.
SlideNote is compatible with jQuery 1.4.3 and current versions of major browsers. IE8 is the only version of Internet Explorer that is officially supported.
Requirements: jQuery FrameworkQuery Notification Plugin with jQuery UI ThemeRoller Ready
Demo: http://slidenote.info/
License: MIT License
01 Jun
Posted by Ray Cheung as Popup
Pines Notify is a JavaScript notification plugin for the jQuery JavaScript library, developed by Hunter Perrin as part of Pines. It is licensed under the GNU Affero GPL. It is designed to provide maximum flexibility, while still being easy to use and easy to implement.
The Pines Notify plugin uses the jQuery UI CSS Framework to style its look and feel, including colors and background textures. We recommend using the ThemeRoller tool to create and download custom themes that are easy to build and maintain.
The Pines Notify plugin uses the jQuery UI CSS Framework to style its look and feel, including colors and background textures. We recommend using the ThemeRoller tool to create and download custom themes that are easy to build and maintain.
Requirements: jQuery Framework
Demo: http://pines.hg.sourceforge.net/hgweb/pines/pnotify…
License: AGPL License
Have you ever had a DOM element that you wanted lightboxed, but didn’t want all the fanciness of all the lightbox-related plug-ins out there? Lightbox_me is for you.
Lightbox_me is an essential tool for the jQuery developer’s toolbox. Feed it a DOM element wrapped in a jQuery object and it will lightbox it for you, no muss no fuss. Lightbox_me handles overlay resize when the window is resized. It is just over 1000 bytes gzipped & compressed. It has been tested on IE 6+, Firefox 2.5+, Safari, Chrome.
Lightbox_me is an essential tool for the jQuery developer’s toolbox. Feed it a DOM element wrapped in a jQuery object and it will lightbox it for you, no muss no fuss. Lightbox_me handles overlay resize when the window is resized. It is just over 1000 bytes gzipped & compressed. It has been tested on IE 6+, Firefox 2.5+, Safari, Chrome.
Requirements: jQuery Framework
Demo: http://buckwilson.me/lightboxme/
License: Apache License
This is called jQuery UI Notify Widget, that is similar to the Growl-like scripts we mentioned in the past, except most seem to come with an enormous footprint: 10-12k of code, X-number of images, and roughly 1000 options to support every plausible use case.
jQuery UI Notify Widget is built off the jQuery UI widget factory in approx. 100 lines of code and 100% CSS. In typical widget fashion, this implementation supports the most basic uses, but is flexible enough for more advanced cases.
jQuery UI Notify Widget is built off the jQuery UI widget factory in approx. 100 lines of code and 100% CSS. In typical widget fashion, this implementation supports the most basic uses, but is flexible enough for more advanced cases.
Requirements: jQuery Framework
Demo: http://www.erichynds.com/examples/jquery-notify
License: MIT, GPL License
jConfirmAction: A jQuery Plugin for Confirmation Box
10 May
Posted by Ray Cheung as GPL License, Popup
jConfirmAction is a jQuery plugin that aims to replace a plain confirmation box with a cute one. This plugin will help you to create a flying bubble confirmation box upside your link. Basically this plugin will create a DIV element that contains confirmation box after your clicked element, then it will appear with fading in and dissappear with fading out.
To create that one you just need to include jConfirmation plugin to your page, create a link, specify a class name, ask jConfirmAction to create a confirmation box and that’s it you have a cute confirmation box.
To create that one you just need to include jConfirmation plugin to your page, create a link, specify a class name, ask jConfirmAction to create a confirmation box and that’s it you have a cute confirmation box.
Requirements: jQuery Framework
Demo: http://webstuffshare.com/demo/jConfirmAction/
License: GPL License
jSquares is a jQuery plugin that pops up an image and a description in an overlay on hover. It is basically identical to the image grid found on www.ted.com. There are some parameters can be added when you call jSquares, e.g. caption size, opacity of the images, shuffle speed and etc. It works like a charm in IE6+, FF 3+, Safari 3+ and Opera 10.
Requirements: jQuery Framework
Demo: http://boedesign.com/demos/jsquares/
License: MIT, GPL License
Sliding Content Aside to Reveal Secondary Content Pane
31 Dec
Posted by Ray Cheung as GPL License, Popup
As web developers, we spend precious time laying out our pages, using every UI concept in the book to conserve space, while trying to maintain a user’s focus on the task at hand. There are many techniques to use Lightbox, Carousel and Tabs to name a few – and recently Scott Robbin has offered up another: jQuery pageSlide.
jQuery pageSlide was inspired by the UI work of Aza Raskin. Aza introduced the idea of sliding content aside to reveal a secondary content pane. This plugin allows any developer to recreate a similar interaction on their own website using a few simple lines of Javascript.
By attaching the method to an anchor tag, pageSlide wraps the original body content into a wrapper and creates an additional block for the secondary content load. The slide is animated whenever the click event is invoked.
jQuery pageSlide was inspired by the UI work of Aza Raskin. Aza introduced the idea of sliding content aside to reveal a secondary content pane. This plugin allows any developer to recreate a similar interaction on their own website using a few simple lines of Javascript.
By attaching the method to an anchor tag, pageSlide wraps the original body content into a wrapper and creates an additional block for the secondary content load. The slide is animated whenever the click event is invoked.
Requirements: jQuery Framework
Demo: http://srobbin.com/blog/jquery-pageslide/
License: GPL License
Meerkat – jQuery Plugin for Splash Pages or Promotions
17 Dec
Posted by Ray Cheung as MIT License, Popup
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.
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
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.
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
SimpleModal is a lightweight jQuery Plugin which provides a powerful interface for modal dialog development. Think of it as a modal dialog framework. SimpleModal gives you the flexibility to build whatever you can envision, while shielding you from related cross-browser issues inherent with UI development.
Styles can be applied through external CSS, the options object, or both. The CSS options for the modal overlay, container, and data elements are: overlayCss, containerCss and dataCss, all which take a key/value object of properties.
Styles can be applied through external CSS, the options object, or both. The CSS options for the modal overlay, container, and data elements are: overlayCss, containerCss and dataCss, all which take a key/value object of properties.
Requirements: jQuery Framework
Demo: http://www.ericmmartin.com/projects/simplemodal-demos/
License: MIT License
Say I had some CSS or JavaScript techniques/effects I wanted to show in a blog post. Obviously it would have been uncomfortable for us to actually include the thing in the post (CSS needs to be in the head, JavaScript may conflict with other JavaScript, etc), so the best option would have been to just link to the file demonstrating the effect.
Using inFrame, we can keep demos indisde the page. So that, the reader doesn’t have to go away from the blog post to view demo files. Simply just add a class of inframe to each these links.
Using inFrame, we can keep demos indisde the page. So that, the reader doesn’t have to go away from the blog post to view demo files. Simply just add a class of inframe to each these links.
Requirements: jQuery FrameworkHow to Create a Non-Javascript Lightbox with CSS
Demo: http://www.vileworks.com/inframe-keep-the-demos-inside…
License: License Free
07 Sep
Posted by Ray Cheung as License Free, Popup
We have seen lots of Javascript Lightbox plugins. It is good to see someone who has created a valid markup Lightbox purely with XHTML and CSS for us.
ThinkVitamin has published a detailed tutorial of How to Create a Valid Non-Javascript Lightbox. Please note that this article assumes you have a basic understanding of (X)HTML and CSS.
ThinkVitamin has published a detailed tutorial of How to Create a Valid Non-Javascript Lightbox. Please note that this article assumes you have a basic understanding of (X)HTML and CSS.
Requirements: FF, Safari, Chrome, IE6, IE7 and IE8
Demo: http://www.growldesign.co.uk/projects/lb/
License: License Free
Bumpbox is another lightbox clone with a few advantages over other lightboxes – it supports not only all common media types but also PDF’s.
Yet, the integration and implementation on your own site is pretty simple. Just add the scripts to your head section, add classes to your links that should use bumpbox, define a rel tag with the size that the bumpbox should have and you’re ready to roll.
Bumpbox automatically detects what kind of filetype you wish to show in the box, so you do not need to specify the type, easing the process of integration.
Yet, the integration and implementation on your own site is pretty simple. Just add the scripts to your head section, add classes to your links that should use bumpbox, define a rel tag with the size that the bumpbox should have and you’re ready to roll.
Bumpbox automatically detects what kind of filetype you wish to show in the box, so you do not need to specify the type, easing the process of integration.
Requirements: Mootools Framework 1.2
Demo: http://www.artviper.net/bumpbox.php
License: License Free
You have probably seen these forms of advertisings where you can peel a corner of a website and see a message underneath. SohTanaka has made a tutorial: Simple Page Peel Effect with jQuery & CSS. All they are doing is expanding the image on hover, then retracting to its default size on hover out.
You may also interested in The Sexy Curls jQuery Plugin if you like this tutorial. The page corner can be set to curl automatically. The plugin is released under the MIT license. That means you can do whatever you like with it.
You may also interested in The Sexy Curls jQuery Plugin if you like this tutorial. The page corner can be set to curl automatically. The plugin is released under the MIT license. That means you can do whatever you like with it.
Requirements: jQuery Framework
Demo: http://www.sohtanaka.com/web-design/examples/peeling-effect/
Demo: http://www.elliottkember.com/sexy_curls.html
License: MIT License
Growl for Rails Built on Prototype and Scriptaculous
25 Feb
Posted by Ray Cheung as MIT License, Popup
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.
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
jQuery Alert(), Confirm() and Prompt() Dialogs Replacements
31 Dec
Posted by Ray Cheung as GPL License, Popup
jQuery Alert Dialogs aims to replace the basic functionality provided by the standard JavaScript alert(), confirm(), and prompt() functions. These are completely customizable via CSS (which can make your apps look much more professional). And you can set a custom title for each dialog.
These methods simulate a true modal dialog box. They will automatically re-position themselves if you resize the browser window. If you include the jQuery UI Draggable plugin, the dialogs can be moved by dragging their title bars. Unlike their native JavaScript counterparts, you can use HTML in the message parameter. To specify a newline, you can use either \n or <br />.
These methods simulate a true modal dialog box. They will automatically re-position themselves if you resize the browser window. If you include the jQuery UI Draggable plugin, the dialogs can be moved by dragging their title bars. Unlike their native JavaScript counterparts, you can use HTML in the message parameter. To specify a newline, you can use either \n or <br />.
Requirements: jQuery Framework
Demo: http://abeautifulsite.net/blog/2008/12/jquery-alert-dialogs/
License: GPL License
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.
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
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!
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
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.
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
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
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 FrameworkRoar – Another Notification Widget with MooTools
Demo: http://binarybonsai.com/misc/humanmsg/
License: Apache License 2.0
27 Apr
Posted by Ray Cheung as MIT License, Popup
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.
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.
Requirements: Mootools Framework
Demo: http://digitarald.de/project/roar/
License: MIT License
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.
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?
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.
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.
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
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.
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.
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.
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
Your Own Netvibes with Prototype Portal Class
09 Sep
Posted by Ray Cheung as MIT License, Popup
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
Code Central has shown us how easily one can create a lightbox using YUI’s Dialog class. The lightbox incorporated many new features, along with old features such as drop and drag, it has an image preloader, it can scale large images to fit the window, it has a maximum button that allows you to inflate scaled images. You can even double click on the title bar to switch between maximized and scaled mode (for images that are larger than browser’s window area). You can also hide the lightbox conveniently by clicking on the image.
Requirements: Firefox 2+, Netscape 8+, IE 6+, Opera 9+
Demo: http://test.thecodecentral.com/demos/lightboxrev/lightbox.html
License: License Free
Requirements: Safari, Camino, Firefox 1+ and Internet Explorer 6+, Opera 8+
Demo: http://wildbit.com/demos/modalbox/
License: License Free
Prototype Window is a javascript class which allows you to add window in a HTML page. This class is based on Prototype. The code is inspired by the powerful script.aculo.us library. You can even use all script.aculo.us effects to show and hide windows if you include effects.js file , but it’s not mandatory. The most important point is that all modal windows are resizable, you can also minimize or maximize at it any time. And they are skinnable as well which means you can apply your own theme for the modal window so that they can match our web application’s style.
Requirements: Safari, Camino, Firefox and Internet Explorer 6+, Opera
Demo: http://prototype-window.xilinus.com/samples.html
License: MIT License
LightWindow is the most powerful modal window I have seen so far. It has so many features, you have the complete ability to style and position it. It is very easy to implement as well. Lastly, most moal window application didn’t actually test for their media types and how they behaved in other browsers and operating systems. However, LightWindow has done a great job, other than images, inline content, iframe content and ajax content, it also supports Quicktime Movie, SWF and PDF.
Requirements: Any Modern Browsers
Demo: http://stickmanlabs.com/lightwindow/#demos
License: MIT License
ThickBox is a webpage UI dialog widget written in JavaScript on top of the jQuery library. Its function is to show a single image, multiple images, inline content, iframed content, or content served through AJAX in a hybrid modal. A modal window is a child window which requires the user to interact with it before they can return to operating the parent application. Modal windows are commonly used in GUI systems to absorb user awareness and to display emergency states.Requirements: Internet Explorer 6.0+, Firefox 1.5+, Opera 9.0+, Safari 2.0+
Demo: http://jquery.com/demo/thickbox/#examples
License: MIT, GNU License
![[summary_02d36c15b225a0e91055e665b3c0fb83.png]](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfKR4wuN-ARwzf1JIbWIjEDyC3yQOcrNJE8RTBiCNFvHMLSfZKVd5HpqrsfA8GBelR_VVP6tjVOGMKFngp4EoVfu1B58lNB27-WIl-VRlErspoR2wmbGuLE42h2aqQrP523EdS-EjBNPOU/s220/summary_02d36c15b225a0e91055e665b3c0fb83.png)
BalasHapusProduct designers and engineers would use basic tools to create improvised proof-of-concept models, but producing functional prototypes and production-quality parts often required the same processes as finished products. Traditional manufacturing processes, such as injection molding, necessitate expensive tooling and setup, making low-volume, custom product prototyping prohibitively expensive.
Web application development company aid in the design, development, and evolution of web-based applications. With over 1,900 online projects completed, ScienceSoft is a business you can rely on for the development of impactful, efficient, and user-friendly corporate and customer-facing web apps, web portals, XaaS solutions, and more.
BalasHapusBy collaborating with ScienceSoft, you may increase user base growth, open up new digital channels, increase conversion six-fold, and achieve other lucrative business milestones.