Default
The string passed is the body of message.
$.notify('I am the Body');
Title
You can give a title for your notice passing a hash with parameters:
$.notify('I am the Body', { title: 'I am the Title!' });
But when you want extra parameters, is more convinient to use all as it:
$.notify({ body: 'I am the Body', title: 'I am the Title!' });
Image
You can use some image into notice just passing an URL. It will appears on the left side.
$.notify({
body : 'I am the Body',
image : 'https://pbs.twimg.com/profile_images/1591360162/wbotelhos-qconsp.png'
});
Icon
Instead image you can use a font icon on an <i/>
element.
The font name depends of your fonts name.
jquery.notify.fonts.css` as an example, but you can use your own.
We provide
$.notify({ body: 'I am the Body', icon: 'notify-bug' });
Wrapper
Main element hooked via ID where all noticies will be appended.
If element already exists on DOM, it will be just loaded and used.
If element does not exists, then it will be created and appended into body
.
$.notify({ body: 'I am the Body', wrapper: '#notify' });
Destroy
Removes the wrapper when there is no more notice on it.
$.notify({ body: 'I am the Body', destroy: true });
Position
You can choose, by default, 4 positions where Notify can appears.
This positions is configured via CSS on jquery.notify.css
and affects the wrapper:
- top-left
- top-right (default)
- bottom-left
- bottom right
$.notify({ body: 'I am the Body', position: 'top-left' });
Show Time
Time used on fade in effect until notice appears.
$.notify({ body: 'I am the Body', showTime: 100 });
Timeout
How many time in milliseconds until the notice begins to disappear.
The whole time until notice completely disappears depends on the sum of this and hideTime plus minimizeTime
$.notify({ body: 'I am the Body', timeout: 100 });
Hide Time
After timeout finish, this effects starts to fade out the notice.
This will keeps occupying the space. So, the next one is the minimizeTime.
$.notify({ body: 'I am the Body', hideTime: 100 });
Minimize Time
After hideTime this effects begins to give space to notice below.
It will minimize the current notice and remove it when it gets height equal 0.
Try to keep it less than hideTime for miminize only when notice is not more visible.
$.notify({ body: 'I am the Body', minimizeTime: 100 });
forever
Disables the timeout and let the notice on screen forever.
Don't worry! We still have the closeClick option.
$.notify({ body: 'I am the Body', forever: true });
Close Click
Close the notice when click on it.
$.notify({ body: 'I am the Body', closeClick: false });
Id
Identifier used as class name for each notice.
$.notify({ body: 'I am the Body', id: 'notify-item' });
Max
Number maximum of noticies on screen.
If this limit is exceeded, the items are placed in a queue and shown later.
$.notify({ body: 'I am the Body', max: 1 });
Before Open
Callback execute before the notice appears on screen.
Return false
will prevent the open action.
Inside the callback this
is the Notify instance.
$.notify({
body : 'I am the Body',
beforeOpen : function() {
alert('A notice will be presented.');
}
});
After Open
Callback execute after the notice appears on screen.
Inside the callback this
is the Notify instance.
$.notify({
body : 'I am the Body',
afterOpen : function() {
alert('The notice is on the screen.');
}
});
Before Close
Callback execute before the notice is closed.
Return false
will prevent the open action.
Inside the callback this
is the Notify instance.
$.notify({
body : 'I am the Body',
beforeClose : function() {
alert("I'll be back!");
}
});
After Close
Callback execute after the notice is closed.
Inside the callback this
is the Notify instance.
$.notify({
body : 'I am the Body',
afterClose : function() {
alert("It's gone!");
}
});
Click
Callback executed when the notice is clicked.
Return false
will prevent the notice of to be closed, in case closeClick is enabled.
Inside the callback this
is the Notify instance.
$.notify({
body : 'I am the Body',
click : function(evt) {
alert('Do not touch me!');
}
});
Mouseover
Callback executed when mouse over the notice.
When the notice is mouseovered the timeout option is canceled.
Return false
will prevent this cancel and the time will be counted normally.
Inside the callback this
is the Notify instance.
$.notify({
body : 'I am the Body',
mouseover : function(evt) {
alert('I can see you!');
}
});
Mouseout
Callback executed when mouse out the notice.
When the notice is mouseouted the timeout is reactivated.
Return false
will prevent this reactivation and the notice will be there forever.
Inside the callback this
is the Notify instance.
$.notify({
body : 'I am the Body',
mouseout : function(evt) {
alert('Where are you?');
}
});
Changing the settings globally
You can change any option mentioning the scope $.notify.defaults.OPTION = VALUE;
. It must be called before you bind the plugin.
$.notify.defaults.max = 3;
$.notify.defaults.timeout = 10000;
Options
afterClose: undefined
Callback executed after notice closes.
afterOpen: undefined
Callback executed after notice opens.
beforeClose: undefined
Callback executed before notice closes.
beforeOpen: undefined
Callback executed before notice opens.
body: undefined
Body of notice.
click: undefined
Callback executed when notice is clicked.
closeClick: true
If notice will be closed on click.
destroy: false
Removes the wrapper when there is no more notice on it.
forever: false
If notice will stay on screen forever.
hideTime: 1000
Time spent to hide the notice.
icon: undefined
Icon (font) name for the notice.
id: 'notify-item'
Identifier to be used as class on notice.
image: undefined
Image path to be used into notice.
max: 5
Number maximum of noticies on screen.
mouseout: undefined
Callback executed on mouse over the notice.
mouseover: undefined
Callback executed on mouse out the notice.
minimizeTime: 300
Time spent to minimize the notice.
position: undefined
The place where notices will appears.
showTime: 400
Time spent to show the notice.
timeout: 5000
Time spent to initiates the other timeouts.
title: undefined
The notice title.
wrapper: '#notify'
Where notices will be appended.
Functions
First, save the notice reference:
var notice = $.notify('Hello World!');
Then you can use the functions:
notice.remove();
Removes the notice from screen.
notice.position('class-name');
Changes the notices position via CSS class.
Global Functions
$.notify.clean('name')
Clean the queue with name equal you passed or all when no name is given.