Javascript notification

Hot to add

It may be an object or an array of objects

Add notification

jnotice = new JNotice();
jnotice.add([
  {html: 'First notification', type: 'info', duration: 3000},
  {html: 'Second notification', type: 'success', duration: 3000}
]).call();

// OR
jnotice.add({html: 'First notification', type: 'info', duration: 3000}).call();

Run

Types

Several predefined styles for notifications

Default

var jnotice = new JNotice();
jnotice.add({html: 'Hello world JNotice!', duration: 3000}).call();

Run

Info

var jnotice = new JNotice();
jnotice.add({html: 'Welcome to the site!', type: 'info', duration: 3000}).call();

Run

Success

var jnotice = new JNotice();
jnotice.add({html: 'Successful sending', type: 'success', duration: 3000}).call();

Run

Warning

var jnotice = new JNotice();
jnotice.add({html: 'Connection is not secure', type: 'warning', duration: 3000}).call();

Run

Error

var jnotice = new JNotice();
jnotice.add({html: 'Login failed!', type: 'error', duration: 3000}).call();

Run

Position

6 positions to accommodate notice

Left Top (default)

var jnotice = new JNotice({
    position: {
      x: 'left',
      y: 'top'
    }
});
jnotice.add({html: 'This position: Left top', type: 'info', duration: 3000}).call();

Run

Center Top

var jnotice = new JNotice({
  animationHide: 'fadeOut',
    position: {
      x: 'center',
      y: 'top'
    }
  });
jnotice.add({html: 'This position: Center top', type: 'info', duration: 3000}).call();

Run

Right Top

var jnotice = new JNotice({
  animationHide: 'bounceOutRight',
    position: {
      x: 'right',
      y: 'top'
    }
  });
jnotice.add({html: 'This position: Right top', type: 'info', duration: 3000}).call();

Run

Left Bottom

var jnotice = new JNotice({
  animationHide: 'bounceOutLeft',
    position: {
      x: 'left',
      y: 'bottom'
    }
  });
jnotice.add({html: 'This position: Left Bottom', type: 'success', duration: 3000}).call();

Run

Center Bottom

var jnotice = new JNotice({
  animationHide: 'fadeOut',
    position: {
      x: 'right',
      y: 'bottom'
    }
  });
jnotice.add({html: 'This position: Center Bottom', type: 'success', duration: 3000}).call();

Run

Right Bottom

var jnotice = new JNotice({
  animationHide: 'bounceOutRight',
    position: {
      x: 'right',
      y: 'bottom'
    }
  });
jnotice.add({html: 'This position: Right Bottom', type: 'success', duration: 3000}).call();

Run

Animation

5 animation options for show and 3 to hide

bounceIn (default)

var jnotice = new JNotice({
  animationShow: 'bounceIn',
  animationHide: 'bounceOutLeft',
});
jnotice.add({html: 'This animation show: bounceIn', type: 'info', duration: 3000}).call();

Run

bounceInLeft

var jnotice = new JNotice({
  animationShow: 'bounceInLeft',
  animationHide: 'bounceOutLeft',
});
jnotice.add({html: 'This animation show: bounceInLeft', type: 'info', duration: 3000}).call();

Run

bounceInRight

var jnotice = new JNotice({
  position: {
    x: 'right'
  },
  animationShow: 'bounceInRight',
  animationHide: 'bounceOutRight',
});
  jnotice.add({html: 'This animation show: bounceInRight', type: 'info', duration: 3000}).call();

Run

fadeIn

var jnotice = new JNotice({
  animationShow: 'fadeIn',
  animationHide: 'fadeOut',
});
jnotice.add({html: 'This animation show: fadeIn', type: 'success', duration: 3000}).call();

Run

bounceInDown

var jnotice = new JNotice({
  position: {
    x: 'center'
  },
  animationShow: 'bounceInDown',
  animationHide: 'fadeOut',
});
jnotice.add({html: 'This animation show: bounceInDown', type: 'success', duration: 3000}).call();

Run

Method Show

Show the following message after you hide the current

Queue

var jnotice = new JNotice({
  methodShow: 'queue',
  });
jnotice.add([
  {html: 'First notification', type: 'info', duration: 3000},
  {html: 'Second notification', type: 'success', duration: 3000},
  {html: 'Third notification', type: 'warning', duration: 3000},
  {html: 'Fourth notification', type: 'error', duration: 3000}
]).call();

Run

Save localStorage

Save does not show the notification even when the browser is closed

var jnotice = new JNotice({
  saveLocalStorage: true,
});
jnotice.add({html: 'I\'m from localStorage!', type: 'success', duration: 3000});

Save localStorage

Remove

Remove one or all notifications on click

removeToClick

var jnotice = new JNotice({
  removeToClick: true,
});
jnotice.add({html: 'Click on me to hide', type: 'error', duration: 3000}).call();

Run

removeToClickAll

var jnotice = new JNotice({
  removeToClickAll: true,
  animationHide: 'fadeOut',
});
jnotice.add({html: 'Click on me to hide all notification', type: 'error', duration: 3000}).call();

Run

Events

Events show or hide notification (open the console)

Callbacks

var jnotice = new JNotice();
jnotice.add({
  html: 'Search for messages in the console',
  type: 'info',
  duration: 3000,
  callbacks: {
    show: function(event) {
      console.log(event.type)
    },
    hide: function(event) {
      console.info(event.type);
      console.log('Hidden by user? ' + event.hideIsUser);
    }
  }
}).call();

Run

JNotice - Javascript notification