Default

The string passed is the body of message.

$.notify('I am the Body');

Open

Title

You can give a title for your notice passing a hash with parameters:

$.notify('I am the Body', { title: 'I am the Title!' });

Open

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!' });

Open

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'
});

Open

Icon

Instead image you can use a font icon on an <i/> element.
The font name depends of your fonts name.
We providejquery.notify.fonts.css` as an example, but you can use your own.

$.notify({ body: 'I am the Body', icon: 'notify-bug' });

Open

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' });

Open

Destroy

Removes the wrapper when there is no more notice on it.

$.notify({ body: 'I am the Body', destroy: true });

Open

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' });

Open

Show Time

Time used on fade in effect until notice appears.

$.notify({ body: 'I am the Body', showTime: 100 });

Open

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 });

Open

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 });

Open

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 });

Open

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 });

Open

Close Click

Close the notice when click on it.

$.notify({ body: 'I am the Body', closeClick: false });

Open

Id

Identifier used as class name for each notice.

$.notify({ body: 'I am the Body', id: 'notify-item' });

Open

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 });

Open

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.');
  }
});

Open

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.');
  }
});

Open

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!");
  }
});

Open

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!");
  }
});

Open

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!');
  }
});

Open

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!');
  }
});

Open

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?');
  }
});

Open

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.