├── README.textile ├── demo.html ├── jquery.notifications-1.1.js ├── jquery.notifications-1.1.min.js └── jquery.notifications.css /README.textile: -------------------------------------------------------------------------------- 1 | h1. jQuery Notifications 2 | 3 | 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. 4 | 5 | Please go to my personal site for a demo of this. 6 | 7 | You can opt to download the minified plugin or the non minified version. And don't forget the compressed CSS. 8 | 9 | h2. Screenshot 10 | 11 | !http://img97.imageshack.us/img97/1439/notificationsdemo.png! 12 | 13 | h2. Updates: 14 | 15 | h3. January 24, 2010 - midday 16 | 17 | Merge fork changes from my colleague, Eumir Gaspar - hiding the default #errorExplanation div from Rails and uses my notifications instead to show the errors. 18 | This changes does nothing if you don't have the div#errorExplanation anywhere on the html page. 19 | 20 | h3. January 24, 2010 21 | 22 | My extraordinaire colleague Eumir Gaspar wanted to fork my plugin, unfortunately I was selfish so it was nowhere at any SCM. 23 | So today I push it to Github so anyone who would want to continue enhance or modify it can now fork it and we can all merge it later on. 24 | 25 | h3. August 17, 2009 26 | 27 | Due to one user requests (Tomasz Król), I added an option to change the notification effect to either fade, or slide. 28 | 29 | Fixed fadeSpeed option settings 30 | 31 | h2. To use: 32 | 33 | Just load both the js and css file into your page: 34 | 35 |

36 | 
37 | 
38 |

39 | 40 | And start using it immediately: 41 | 42 |

43 | $.n("Hey you!");
44 |

45 | 46 | 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. 47 | 48 | h2. Complete usage instruction 49 | 50 |

51 | $.n("", options) - to show a notifice notification
52 | $.n.success("", options) - to show a success notification
53 | $.n.warning("", options) - to show a warning notification
54 | $.n.error("", options) - to show an error notifcation
55 |

56 | 57 | h2. The following are the possible options: 58 | 59 | timeout - the number of milleseconds before the notification fades away. Default is 10000 ms. 60 | stick - whether to stick the notification or not. Default is true for the error notification, false for the rest 61 | fadeSpeed - the fade animation speed in milliseconds. Default is 800 ms 62 | close - the text or image that would show up for sticky notifications. Default is "x". 63 | effect - the notification show/hide effect, the default is fade. You can either use "slide" or "fade". 64 | 65 | If you want to set these options only once, override it after the plugin has loaded like so: 66 |

67 | $.n.defaults.timeout = 5000;
68 | $.n.defaults.close = "close";
69 |

70 | And each call to any of the notification will use these properties unless override through the option parameters. 71 | 72 | h2. Known Issues: 73 | 74 | 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. 75 | 76 | If anyone is able to provide a stable fix this let me know and I'll make a new release together with your fix. -------------------------------------------------------------------------------- /demo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 14 | 15 | 16 | 36 | 37 | 38 | 39 |

40 | show notice | 41 | show error | 42 | show warning | 43 | show using options | 44 | show code 45 |

46 |     function showNotice() {
47 |       $.n("This is a notice message");
48 |     }
49 |     function showError() {
50 |       $.n.error("This is an error message. It won't go away you have to click the x button.");
51 |     }
52 |     function showWarning() {
53 |       $.n.warning("This is a warning message");
54 |     }    
55 |     function showWithOptions() {
56 |       $.n("This message has options.", {    
57 |         type: "notice",
58 |   			timeout: 5000,
59 |   			stick: true,
60 |   			fadeSpeed : 1500,
61 |   			close : "close me",
62 |   			effect : "slide"})
63 |     }
64 |

65 |

66 | 67 | 68 | 69 | -------------------------------------------------------------------------------- /jquery.notifications-1.1.js: -------------------------------------------------------------------------------- 1 | /* 2 | * jQuery Notifications plugin 1.1 3 | * 4 | * http://programmingmind.com 5 | * 6 | * Copyright (c) 2009 David Ang 7 | * 8 | * 9 | * Dual licensed under the MIT and GPL licenses: 10 | * http://www.opensource.org/licenses/mit-license.php 11 | * http://www.gnu.org/licenses/gpl.html 12 | * 13 | * Version Changes 14 | * 15 | * 1.1 8/17/2008 16 | * - Allow users to choose between slide or fade effect 17 | * - Fixed fadeSpeed option settings 18 | * 19 | * 1.0 8/9/2008 20 | * - Initial release 21 | */ 22 | (function($){ 23 | var template; 24 | var counter = 0; 25 | 26 | $.notifications = function(msg, options) { 27 | counter++; 28 | 29 | var settings = $.extend({}, $.notifications.defaults, options); 30 | 31 | if (!template) { 32 | template = $('

').prependTo(document.body); 33 | } 34 | 35 | var n = $( '

' + msg + '

').hide().appendTo("#jquery-notifications"); 36 | if( settings.effect == "fade" ) { 37 | n.fadeIn( settings.fadeSpeed ); 38 | } else { 39 | n.slideDown( settings.fadeSpeed ); 40 | } 41 | 42 | if (settings.stick) { 43 | var close = $('' + settings.close + '').click(function() { 44 | if (settings.effect == "fade") { 45 | $(this.parentNode).fadeOut( settings.fadeSpeed, function() { 46 | $(this).remove(); 47 | }); 48 | } 49 | else { 50 | $(this.parentNode).slideUp( settings.fadeSpeed, function() { 51 | $(this).remove(); 52 | }); 53 | } 54 | }); 55 | close.appendTo(n); 56 | } 57 | 58 | if (!settings.stick) { 59 | var notificationsDelayer = delayTimer(settings.timeout); 60 | notificationsDelayer(update, { counter: counter, effect: settings.effect, fadeSpeed : settings.fadeSpeed } ); 61 | } 62 | 63 | if ($("#errorExplanation").length) { 64 | // if there exists an errorExplanation div from rails 3.0, 65 | // hide the errors and list them down as notifications 66 | $("#errorExplanation").hide(); 67 | $("#errorExplanation li").each(function(index) { 68 | $.n.error($(this).text()); 69 | }) 70 | } 71 | }; 72 | 73 | $.notifications.success = function( msg, options ){ 74 | return $.notifications( msg, $.extend( {}, options, { type : "success"}) ); 75 | }; 76 | 77 | $.notifications.error = function( msg, options ){ 78 | return $.notifications( msg, $.extend( { stick: true }, options, { type : "error" }) ); 79 | }; 80 | 81 | $.notifications.warning = function( msg, options ){ 82 | return $.notifications( msg, $.extend( {}, options, { type : "warning" }) ); 83 | }; 84 | 85 | function update(params) { 86 | if (params.effect == "fade") { 87 | $("#jquery-notifications-" + params.counter).fadeOut( params.fadeSpeed, function(){ 88 | $(this).remove(); 89 | }); 90 | } else { 91 | $("#jquery-notifications-" + params.counter).slideUp( params.fadeSpeed, function(){ 92 | $(this).remove(); 93 | }); 94 | } 95 | } 96 | 97 | function delayTimer(delay) { 98 | var timer; 99 | return function(fn, params) { 100 | timer = clearTimeout(timer); 101 | if (fn) 102 | timer = setTimeout(function() { 103 | fn(params); 104 | }, delay); 105 | return timer; 106 | }; 107 | } 108 | 109 | $.notifications.defaults = { 110 | type: "notice", 111 | timeout: 10000, 112 | stick: false, 113 | fadeSpeed : 800, 114 | close : "x", 115 | effect : "fade" 116 | }; 117 | 118 | $.n = $.notifications; 119 | 120 | })(jQuery); -------------------------------------------------------------------------------- /jquery.notifications-1.1.min.js: -------------------------------------------------------------------------------- 1 | (function($){var template;var counter=0;$.notifications=function(msg,options){counter++;var settings=$.extend({},$.notifications.defaults,options);if(!template){template=$('

').prependTo(document.body)}var n=$('

'+msg+"

").hide().appendTo("#jquery-notifications");if(settings.effect=="fade"){n.fadeIn(settings.fadeSpeed)}else{n.slideDown(settings.fadeSpeed)}if(settings.stick){var close=$(''+settings.close+"").click(function(){if(settings.effect=="fade"){$(this.parentNode).fadeOut(settings.fadeSpeed,function(){$(this).remove()})}else{$(this.parentNode).slideUp(settings.fadeSpeed,function(){$(this).remove()})}});close.appendTo(n)}if(!settings.stick){var notificationsDelayer=delayTimer(settings.timeout);notificationsDelayer(update,{counter:counter,effect:settings.effect,fadeSpeed:settings.fadeSpeed})}if($("#errorExplanation").length){$("#errorExplanation").hide();$("#errorExplanation li").each(function(index){$.n.error($(this).text())})}};$.notifications.success=function(msg,options){return $.notifications(msg,$.extend({},options,{type:"success"}))};$.notifications.error=function(msg,options){return $.notifications(msg,$.extend({stick:true},options,{type:"error"}))};$.notifications.warning=function(msg,options){return $.notifications(msg,$.extend({},options,{type:"warning"}))};function update(params){if(params.effect=="fade"){$("#jquery-notifications-"+params.counter).fadeOut(params.fadeSpeed,function(){$(this).remove()})}else{$("#jquery-notifications-"+params.counter).slideUp(params.fadeSpeed,function(){$(this).remove()})}}function delayTimer(delay){var timer;return function(fn,params){timer=clearTimeout(timer);if(fn){timer=setTimeout(function(){fn(params)},delay)}return timer}}$.notifications.defaults={type:"notice",timeout:10000,stick:false,fadeSpeed:800,close:"x",effect:"fade"};$.n=$.notifications})(jQuery); -------------------------------------------------------------------------------- /jquery.notifications.css: -------------------------------------------------------------------------------- 1 | /* jQuery Notifications plugin - http://programmingmind.com */ 2 | /* notification container */ 3 | #jquery-notifications { 4 | position: relative; 5 | width: 100%; 6 | left: 0; 7 | top: 0; 8 | z-index: 100000; 9 | } 10 | #jquery-notifications p { 11 | text-align: center; 12 | position: relative; 13 | margin: 0; 14 | padding: 5px; 15 | padding-left: 10px; 16 | border-bottom: 2px solid; 17 | /* style property for the close text */ 18 | } 19 | #jquery-notifications p a { 20 | position: absolute; 21 | right: 10px; 22 | margin-right: 10px; 23 | color: black; 24 | text-decoration: none; 25 | border: 1px solid black; 26 | padding-right: 5px; 27 | padding-left: 5px; 28 | } 29 | #jquery-notifications .notice { 30 | background: #6c9ffc; 31 | color: #061a72; 32 | border-color: #061a72; 33 | } 34 | #jquery-notifications .success { 35 | background: #96f96f; 36 | color: #045419; 37 | border-color: #045419; 38 | } 39 | #jquery-notifications .warning { 40 | background: #f7ae57; 41 | color: #753903; 42 | border-color: #753903; 43 | } 44 | #jquery-notifications .error { 45 | background: #f97c6f; 46 | color: #570f01; 47 | border-color: #570f01; 48 | } --------------------------------------------------------------------------------