jquery, plugins, notification, contributions
Okay for now I only have one contribution - a jQuery notifications plugin.
This one will show various
notifications types one over another at the top covering the entire
width of the page. Tested on IE, Firefox and Chrome.
Which if you click here, you would see it in action.
And here's another one.
You can opt to download the minified plugin or the non minified version. And don't forget the compressed CSS.
Updated August 17, 2009
- Due to one user requests (Tomasz Król), I added an option to change the notification effect to either fade, or slide.
- Fixed fadeSpeed option settings
To use:
Just load both the js and css file into your page:
<script type="text/javascript" src="jquery.notifications-1.0.min.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.notifications.css" />
And start using it immediately:
$.n("Hey you!");
By default it creates a notice notification. The other types of notification messages are success, warning and error which all are completly customizable through CSS.
Complete usage instruction
$.n("", options) - to show a notifice notification
$.n.success("", options) - to show a success notification
$.n.warning("", options) - to show a warning notification
$.n.error("", options) - to show an error notifcation
The following are the possible options:
timeout - the number of milleseconds before the notification fades away. Default is 10000 ms.
stick - whether to stick the notification or not. Default is true for the error notification, false for the rest
fadeSpeed - the fade animation speed in milliseconds. Default is 800 ms
close - the text or image that would show up for sticky notifications. Default is "x".
effect - the notification show/hide effect, the default is fade. You can either use "slide" or "fade".
If you want to set these options only once, override it after the plugin has loaded like so:
$.n.defaults.timeout = 5000;
$.n.defaults.close = "close";
And each call to any of the notification will use these properties unless override through the option parameters.
Known Issues:
- Change the property "position:absolute" to "float:right" on the selector "#jquery-notifications div > a" to fix the issue with the close icon/text that seems to pop out when the sliding effect is used. Though things would look pretty ugly on IE. If anyone is able to provide a stable fix this let me know and I'll make a new release together with your fix.
Other jQuery notification/messaging:
Comments
I love this plugin! One quick question: is it possible to have stick:false and to have a close link?
I've hacked Your JS a bit and come up with a way to have the Close Button Not jump around, and also have it there for notifications that fade.
It's not the prettiest but here it is:
New Version of the JS Function:
$.notifications = function(msg, options) {
counter++;
var settings = $.extend({}, $.notifications.defaults, options);
if (!template) {
template = $('<div id="jquery-notifications"></div>').appendTo(document.body);
}
var n = $('<div class="' + settings.type + '" id="jquery-notifications-' + counter + '"><table class="holderTable"><tr><td>' + msg + '</td><td class="rightAlign"><a class="theLink" href="#">' + settings.close + '</a>' + '</td></tr></table></div>').hide().appendTo("#jquery-notifications");
var close = $('.theLink').click(function() {
if (settings.effect == "fade") {
$(this.parentNode.parentNode.parentNode.parentNode.parentNode).fadeOut(settings.fadeSpeed, function() {
$(this).remove();
});
}
else {
$(this.parentNode.parentNode.parentNode.parentNode.parentNode).slideUp(settings.fadeSpeed, function() {
$(this).remove();
});
}
});
if (settings.effect == "fade") {
n.fadeIn(settings.fadeSpeed);
} else {
n.slideDown(settings.fadeSpeed);
}
if (!settings.stick) {
var notificationsDelayer = delayTimer(settings.timeout);
notificationsDelayer(update, { counter: counter, effect: settings.effect, fadeSpeed: settings.fadeSpeed });
}
};
New Version of TheCSS: Everything above the link css remains the same:
.theLink {right: 0; margin-right:10px; color: #000000; text-decoration:none; border: 1px solid black; padding-right: 5px; padding-left: 5px;}
.rightAlign
{
text-align:right;
}
.holderTable
{
width:100%;
}
hope this makes sense!
Thanks! This is simple but nice!
Nice plugin, but is there a manual way to remove the notification?
And a CSS hack for IE 6 that made it work for me:
html, body {
height: 100%;
overflow:auto;
}
#jquery-notifications {position: fixed; width: 100%; left: 0; top: 0; position:fixed !important; position: absolute; /*ie6 and above*/}
Post new comment