diff --git a/README b/README index e69de29..b411068 100644 --- a/README +++ b/README @@ -0,0 +1,3 @@ +A queued notification script based on jQuery. Supports multiple instances. Highly configurable. + +See more at http://thecodecentral.com/2011/08/15/ctnotify-%E2%80%93-a-flexible-multi-instance-jquery-notification-script diff --git a/images/danger.png b/images/danger.png new file mode 100644 index 0000000..3c1f570 Binary files /dev/null and b/images/danger.png differ diff --git a/images/error.png b/images/error.png new file mode 100644 index 0000000..0cf424e Binary files /dev/null and b/images/error.png differ diff --git a/images/no.png b/images/no.png new file mode 100644 index 0000000..a3179b3 Binary files /dev/null and b/images/no.png differ diff --git a/images/ok.png b/images/ok.png new file mode 100644 index 0000000..3838319 Binary files /dev/null and b/images/ok.png differ diff --git a/images/url.txt b/images/url.txt new file mode 100644 index 0000000..0c06728 --- /dev/null +++ b/images/url.txt @@ -0,0 +1 @@ +http://www.freeiconsweb.com/Free-Downloads.asp?id=608 diff --git a/images/warning.png b/images/warning.png new file mode 100644 index 0000000..4a36127 Binary files /dev/null and b/images/warning.png differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..cd6623c --- /dev/null +++ b/index.html @@ -0,0 +1,166 @@ + + + + + ctNotify - A JavaScript notification plugin for jQuery | Code Central + + + + + + + + + + + + + +
+ << View Documentation +
+ + +
+
+
+ +
+
+
+
+
+
+
+ +
+

Notice that you can scroll down to see more demo. Check the source of this page to see how each notification type is created.

+
+

Show Message

+ 

+$.ctNotify('This is a notification message');
+$.ctNotify('This is a warning message', 'warning');
+$.ctNotify('This is a error message', 'error');
+$.ctNotify('This is a notification message with 1 second delay', {type: 'message', delay: 1000});
+$.ctNotify('This is a notification message with 5 second delay', {type: 'message', delay: 5000});
+
+ +
+ + + +
+

Make Notification Sticky

+ 

+$.ctNotify('This is a notification message 1');          
+$.ctNotify('This is a sticky message', {type: 'message', isSticky: true});
+$.ctNotify('This is a notification message 2');
+
+
+ + +
+

Show Notification in Another Instance

+ $.ctNotify('This is a error message', 'error', 'sub') +
+ + + + +
+

Anchor to bottom right

+ 

+ $.ctNotify('This is a message', 'message', 'right_bottom');
+ $.ctNotify('This is a warning message', 'warning', 'right_bottom');
+ $.ctNotify('This is a error message', 'error', 'right_bottom');
+
+
+ + + + +
+

Customizing Notification Markup

+ 

+ $.ctNotify('This is a message', 'message', 'render');
+ $.ctNotify('This is a warning message', 'warning', 'render');
+ $.ctNotify('This is a error message', 'error', 'render');
+
+
+ + +
+ + + + + \ No newline at end of file diff --git a/jquery.ctNotify.css b/jquery.ctNotify.css new file mode 100644 index 0000000..8e1fb10 --- /dev/null +++ b/jquery.ctNotify.css @@ -0,0 +1,55 @@ +.ctNotify{ + background-color: #000; + color:#fff; + padding: .5em; + margin: 0; + + font-size: 12px; + cursor: pointer; + z-index: 1000; + +} + +.ctNotify ul{ + margin: 0; + padding: 0; + +} +.ctNotify li{ + list-style: none; + padding: 0; + margin: 0; + text-align: left; + color: #fff; + padding: 10px 10px 10px 55px; + font-size: 15px; + border: 0; + background: no-repeat 15px 5px; +} + +.ctNotify .ctNotify_handle{ + text-align: left; + font-size: 11px; + margin: 5px 0 0 0; +} + +.ctNotify li.message{ + background-image: url('images/ok.png'); +} + +.ctNotify li.warning{ + background-image: url('images/warning.png'); +} + +.ctNotify li.error{ + background-image: url('images/error.png'); + +} +.ctNotify li.error, .ctNotify li.error .sticky{ + color: #ff0000; +} + +.ctNotify li .sticky{ + color: #4297d7; + +} diff --git a/jquery.ctNotify.js b/jquery.ctNotify.js new file mode 100644 index 0000000..e921975 --- /dev/null +++ b/jquery.ctNotify.js @@ -0,0 +1,379 @@ +/* + * jQuery ctRotator Plugin + * Examples and documentation at:http://thecodecentral.com/2008/11/12/ctrotator-a-flexible-itemimage-rotator-script-for-jquery + * Under MIT license http://www.opensource.org/licenses/mit-license.php + * + * @author: Cuong Tham + * @version: 1.0 + * @requires jQuery v1.2.6 or later + * + * @headsTip: Customizable rotating script for displaying large quantity of items in an interesting way + */ + + +(function($) { + + + + var defaultInstanceId = 'default'; + var defaultType = 'message'; + var instData = {}; + + + + + $.extend({ + ctNotifyOption:function(options, instId){ + createInstnace(options, instId); + + }, + ctNotify:function(html, type, instId){ + + + var inst = getInstance(instId); + + addItem(html, type, instId); + + if(!inst.inTimeout){ + removeItem(instId); + } + } + }); + + function getInstanceIdFallback(instId){ + if(instId == null){ + return defaultInstanceId; + }else{ + return instId; + } + } + + function getInstance(instId){ + instId = getInstanceIdFallback(instId); + + var inst; + if(instData[instId] != null){ + inst = instData[instId]; + }else{ + inst = createInstnace(null, instId); + + } + + + return inst; + } + + function createInstnace(options, instId){ + instId = getInstanceIdFallback(instId); + var inst = initialize(options, instId); + return inst; + } + + + function getOptions(instId){ + return getInstance(instId).options; + } + + + function initialize(options, instId){ + var inst; + + if(instData[instId] && instData[instId].isInitialized){ + inst = instData[instId]; + }else{ + inst = { + id: instId, + con:null, + parentCon: null, + inTimeout: false, + isInitialized: false, + timerId: null, + stickyItemCount: 0 + }; + + } + + + + var opts = { + delay: 3000, + id: 'ctNotify_' + instId, + className: 'ctNotify', + animated: true, + animateSpeed: 500, + animateType: "slideUp", + appendTo: null, + sticky: false, + autoWidth: 'fitWindow', //fit,fitWindow, disabled + width: null, //if autoWidth is set to other than disabled, this option is not used + opacity: .7, + position: "fixed", + bodyIdSuffix: '_body_', //the element ID which contains the notificationc children + bodyClassName: 'ctNotify_body', + anchors: { + top:0, + left: 0, + bottom: null, + right: null + }, //top, left, bottom, right + containerRender: null, + itemRender: null + }; + + options = $.extend({}, opts, options); + + + options.bodyId = opts.id + opts.bodyIdSuffix; + + + if(options.appendTo == null){ + options.appendTo = $(document.body); + } + + if(options.autoWidth != 'fit' && options.autoWidth != 'fitWindow'){ + options.autoWidth = 'disabled'; + } + + + if(options.width != null){ + options.autoWidth = 'disabled'; + } + + + + + inst.options = options; + + + + initContainer(inst); + initItemRender(inst); + + inst.con = inst.options.containerRender(inst); + inst.body = inst.con.find('#' + inst.options.bodyId); + inst.parentCon = inst.options.appendTo; + + + + + inst.con.bind('click', inst, function(e){ + if(e.data.inTimeout){ + clearTimeout(e.data.timerId); + inst.inTimeout = false; + } + + e.data.body.empty(); + $(this).hide(); + inst.stickyItemCount = 0; + }); + + + if(inst.parentCon.size() == 0){ + throw ('Parent container ' + opt.appendTo + ' no found.'); + } + + inst.con.appendTo(inst.parentCon); + + + + if(inst.options.autoWidth != 'disabled'){ + $(window).resize(function(){ + fixWidth(inst); + }); + } + + + inst.isInitialized = true; + instData[instId] = inst; + + + + return inst; + + } + + + function initContainer(inst){ + if(inst.options.containerRender != null){ + return; + } + + inst.options.containerRender = function(inst){ + var options = inst.options; + var conWrapper = $('
').attr({ + id: options.id, + title: 'click to close' + }) + .css({ + opacity: options.opacity, + position: options.position, + top: options.anchors.top, + bottom: options.anchors.bottom, + left: options.anchors.left, + right: options.anchors.right + }) + .addClass(options.className) + .hide(); + + + var con = $('').attr({ + id: options.id + options.bodyIdSuffix + }) + .addClass(options.bodyClassName); + + + + + conWrapper.append(con); + + return conWrapper; + }; + + + } + + function initItemRender(inst){ + if(inst.options.itemRender != null){ + return; + } + + inst.options.itemRender = function(html, itemOptions, inst){ + var span = $('') ; + if(itemOptions.isSticky){ + span.addClass('sticky'); + } + span.html(html); + return $('
  • ').append(span); + }; + } + + + function addItem(html, type, instId){ + var inst = getInstance(instId); + + + + var options; + if($.isPlainObject(type)){ + options = type; + }else{ + options = {}; + options.type = type; + } + + options = $.extend({ + type: defaultType, + isSticky: inst.options.sticky, + delay: inst.options.delay + }, options); + + + inst.con.show(); + var item = inst.options.itemRender(html, options, inst); + item.addClass(options.type); + inst.body.append(item); + + $(item).data('ct_delay', options.delay); + + if(options.isSticky){ + inst.stickyItemCount++; + $(item).data('ct_isSticky', true); + } + + + fixWidth(inst); + + + } + + function fixWidth(inst){ + var con = inst.con; + + + if(inst.options.autoWidth == 'disabled'){ + + if(inst.options.width != null){ + inst.con.width(inst.options.width); + } + }else if(inst.options.autoWidth == 'fit'){ + con.width(inst.options.appendTo.width() - (con.outerWidth() - con.width())); + + + }else if(inst.options.autoWidth == 'fitWindow'){ + con.width($(window).width() - (con.outerWidth() - con.width())); + } + + } + + + + function removeItem(instId){ + + var inst = getInstance(instId); + var con = inst.con; + var body = inst.body; + var opt = inst.options; + + if(con == null){ + return; + } + + var size = Math.max(body.children().size() - inst.stickyItemCount, 0); + + + + if(size == 0){ + inst.inTimeout = false; + inst.timerId = null; + if(body.children().size() == 0){ + con.hide(); + }else{ + + } + + return; + }else if(size > 0){ + inst.inTimeout = true; + getInstance(instId).inTimeout = true; + + + var firstRemovable = getRemovableItem(instId); + + if(firstRemovable != null){ + inst.timeerId = setTimeout(function(){ + + if(opt.animated){ + firstRemovable[opt.animateType](opt.animateSpeed, function(){ + doRemoveItem(instId, firstRemovable); + }); + }else{ + doRemoveItem(instId, firstRemovable); + } + + + }, firstRemovable.data('ct_delay')); + } + } + } + + + function getRemovableItem(instId){ + var inst = getInstance(instId); + var children = inst.body.children(); + + for(var i=0; i< children.size(); i++){ + if( $(children[i]).data('ct_isSticky') != true){ + return $(children[i]); + } + } + + return null; + + } + + function doRemoveItem(instId, item){ + item.remove(); + removeItem(instId); + } + +})(jQuery);