Notify

This controls helps to turn standard alerts into “growl” like notifications.

Name	Version	License	Repository
Bootstrap Notify	3.1.3	MIT	https://github.com/mouse0270/bootstrap-notify

Contents
Usage
Options
Methods
Examples

Usage

$.notify({message: 'your message'},{type: 'default'});

Options

Methods

Examples

Basic Notify

$.notify("Hello World");

Passing in a title

$.notify({
  title: "Welcome:",
  message: ".."
});

Passing HTML

$.notify({
  title: "<strong>Welcome:</strong> ",
  message: "..."
});

Using a font icon

$.notify({
  icon: 'fa fa-paw',
  message: ".."
});

Using images instead of font icons

$.notify({
  icon: "img/growl_64x.png",
  message: ".."
},{
  icon_type: 'image'

Using offset

$.notify('Hello World', {
  offset: 50
});

$.notify('Hello World', {
  offset: {
    x: 50,
    y: 100
  }
});

Using alert types

$.notify({
  title: '<strong>Heads up!</strong>',
  message: '...'
},{
  type: 'success'
});

Animating notify

$.notify("Enter: Bounce In from TopExit: Bounce Up and Out", {
  animate: {
    enter: 'animated bounceInUp',
    exit: 'animated bounceOutDown'
  }
});

Customized notifications

Below is a list custom styled notifications that you may use as a whole or a starting off point. I’ll will occasionally update this list so please check back for more styles.

.alert-minimalist {
  background-color: rgb(241, 242, 240);
  border-color: rgba(149, 149, 149, 0.3);
  border-radius: 3px;
  color: rgb(149, 149, 149);
  padding: 10px;
}

.alert-minimalist > [data-notify="icon"] {
  height: 50px;
  margin-right: 12px;
}

.alert-minimalist > [data-notify="title"] {
  color: rgb(51, 51, 51);
  display: block;
  font-weight: bold;
  margin-bottom: 5px;
}

.alert-minimalist > [data-notify="message"] {
  font-size: 80%;
}

$.notify({
  icon: 'https://randomuser.me/api/portraits/med/men/77.jpg',
  title: 'Byron Morgan',
  message: 'Momentum reduce child mortality effectiveness incubation empowerment connect.'
}, {
  type: 'minimalist',
  delay: 5000,
  icon_type: 'image',
  template: '<div data-notify="container" class="col-xs-11 col-sm-3 alert alert-{0}" role="alert">' +
    '<img data-notify="icon" class="img-circle pull-left">' +
    '<span data-notify="title">{1}</span>' +
    '<span data-notify="message">{2}</span>' +
    '</div>'
});

Controls