Notify.js

Custom Styling Guide

You can add your own styles to Notify.js with the$.notify.addStyle method. See API.

Style definition objects are in the form:

{
  //required html representing each notification 
  html: "",
  //optional object to be converted to css
  classes: {
    <className>: {
      <propertyName>: <value> 
    },
    <className>: {
      ...
    },
    ...
  },
  //optional css to be inserted onto the page
  css: ""
}

html

- If you only have HTML element that you need to modify per notification then you should give this element an attribute of data-notify-text or data-notify-html. Use data-notify-html if you wish to display arbitrary HTML inside the notification, otherwise, use data-notify-text as it is more secure.
Otherwise, if you wish to modify multiple HTML elements per notification then you'll need to give each element one of the two attributes above as well as a value. For an example of this see the Advanced Example below.

classes

- This object will be used to construct css. It must be in the form described above and there is an example below.

css

- This string is simply raw css. Use this property if you want to keep your style definition inside your js files.

Class naming convention

When each notification is constructed, it's container (outer most element defined in your style html) will automatically apply the class:

notifyjs-<style name>-base

When you use the class name option (className) the class:

notifyjs-<style name>-<class name>

will be applied. So if you define your styles in an external CSS file or in the style's css property, you must define your CSS rules using this naming convention.

Simple Example

If you were to define the style:

$.notify.addStyle('happyblue', {
  html: "<div>☺<span data-notify-text/>☺</div>",
  classes: {
    base: {
      "white-space": "nowrap",
      "background-color": "lightblue",
      "padding": "5px"
    },
    superblue: {
      "color": "white",
      "background-color": "blue"
    }
  }
});

Upon running this code, the classes object in this example will be converted the following css:

.notifyjs-happyblue-base {
  white-space: nowrap;
  background-color: lightblue;
  padding: 5px;
}
.notifyjs-happyblue-superblue {
  color: white;
  background-color: blue;
}

You can confirm this now by inspecting the DOM (look for the tagged style element in the head)

You can now use your new style with:

$.notify('hello !!', {
  style: 'happyblue'
});

and you can use the superblue class with:

$.notify('HELLO !!!!', {
  style: 'happyblue',
  className: 'superblue'
});

Advanced Example

Say you wanted to use buttons in your notifications then you could do something like:

//add a new style 'foo'
$.notify.addStyle('foo', {
  html: 
    "<div>" +
      "<div class='clearfix'>" +
        "<div class='title' data-notify-html='title'/>" +
        "<div class='buttons'>" +
          "<button class='no'>Cancel</button>" +
          "<button class='yes' data-notify-text='button'></button>" +
        "</div>" +
      "</div>" +
    "</div>"
});

//listen for click events from this style
$(document).on('click', '.notifyjs-foo-base .no', function() {
  //programmatically trigger propogating hide event
  $(this).trigger('notify-hide');
});
$(document).on('click', '.notifyjs-foo-base .yes', function() {
  //show button text
  alert($(this).text() + " clicked!");
  //hide notification
  $(this).trigger('notify-hide');
});

Notice there is no classes property defined above. Since the CSS in this example is non-trivial, we'll use an exteral CSS file instead:

Note: you could also convert this CSS code to a JavaScript string and use it with the css property. It's not very readable though it's better for distribution.

.notifyjs-foo-base {
  opacity: 0.85;
  width: 200px;
  background: #F5F5F5;
  padding: 5px;
  border-radius: 10px;
}

.notifyjs-foo-base .title {
  width: 100px;
  float: left;
  margin: 10px 0 0 10px;
  text-align: right;
}

.notifyjs-foo-base .buttons {
  width: 70px;
  float: right;
  font-size: 9px;
  padding: 5px;
  margin: 2px;
}

.notifyjs-foo-base button {
  font-size: 9px;
  padding: 5px;
  margin: 2px;
  width: 60px;
}

You can now use this style with:

$.notify({
  title: 'Would you like some Foo ?',
  button: 'Confirm'
}, { 
  style: 'foo',
  autoHide: false,
  clickToHide: false
});

Extra Example

If using the above methods still don't provide you with what you need then you can, pass jQuery objects straight into the notification (provided that the element has the data-notify-html attribute):

var h5 = $("<h5/>").append("You MUST have some Foo !")

$.notify({
  title: h5,
  button: 'YES !'
}, { 
  style: 'foo',
  autoHide: false,
  clickToHide: false
});

Style List

• bootstrap

• metro