ctNotify – A Flexible Multi-Instance jQuery Notification Script

I am pleased to announce the release version of my jQuery notification script. I have made this long time ago, but finally I have polished it enough to be made available to the public. This is a queued notification script, meaning that you can push the notification without worry about overwriting the previous one. Best yet, you can create multiple instances of the script for different purposes. Item rending callback allows flexible customization on the look and feel.

Demonstration and Download

See the demonstration yourself
Get source code
Go to jQuery Plugin page

Include the Script

Sample Usage

You can supply additional options in the second parameter:

Change Default Options

You can change several default options of the notification, see API documentation section of this page for more detail.

Show Notification in Multiple Instances

You can create more than one notification queue, just supply a desired name for the queue, the script will handle the rest for you.

You can also change the default options of the queue you created:

Customize How Each Notification is Displayed

You may supply a callback function to control how the notification is displayed:

Check API documentation for signature and parameters of the callback function. Also refers to JavaScript source for the original renders.

API Documentation

$.ctNotify(message, type|options, instId);
Description: Configure default options
- message: string or HTML
- type|options:
- type can be 'message', 'warning', 'error' or whatever you desired, in which case you need to style it.
- options: see below
- instId: The notification instance you want to publish notification

Options for $.ctNotify

NamePossible ValuesDescription
delaytime in millisecondsIf not set, it will use the default value
isStickytrue/flaseIf not set, it will use the default value

$.ctNotifyOption(options, instId)
Description: Configure default options
- options: see below
- instId: The notification instance you want to configure

Options for $.ctNotifyOption

NameDefault ValueDescription
delay3000 (3 seconds)Duration of the notification
idctNotify_ + instIdDOM Elememt ID for the HTML container
animatedtrueif set to true, use jQuery effect
animateSpeed500speed of the effect
animateTypeslideUpspeed of the effect
appendTonullIf null, append notification container to document.body, else append it to assigned element. Must be a jQuery element.
stickyfalseIf set to true, do not automatically close the notification.
autoWidthfitWindowpossible values: fit | fitWindow | disabled

- fit: calculate and apply notification container width based on parent container's width
- fitWindow: fit width to window
- disabled: do not use auto fit feature
widthnullSet container width. if autoWidth is set to other than disabled, this option is not used.
opacity.70 ~ 1
positionfixedCSS position. Possible values are: fixed | absolute | relative | static
alignnullEnforce alignment of the notification. Possible values are: null | left | center | right
When set to null, no alignment is enforced.
onHideEmpty functionA callback function. It will be called after notification area is hidden.
E.g., function(inst){}
bodyIdSuffixbodythe element ID suffix which contains the notificationc children
anchors {
left: 0,
bottom: null,
right: null
Controlling how to position the notification container. Only applied when 'position' is set to fixed, absolute, relative
containerRendercheck JS source function(inst){}
- inst: instance data, please check JS source for what 'inst' contains
itemRendercheck JS source function(html, itemOptions, inst){}
- html: text/html in string form
- itemOptions: isSticky | type | delay


Try the demonstration yourself
Get Source Code
Go to jQuery Plugin page

4 Comments ctNotify – A Flexible Multi-Instance jQuery Notification Script

  1. Pingback: Système de notification avec ctNotify « Outweb

  2. Pingback: ctNotify – jQuery 提醒訊息特效 | code & sean

Leave a Reply

Your email address will not be published. Required fields are marked *