Notify

Notications using toasts, bars and panels

  Download   View project on Github

Most applications need to communicate info (errors, warnings, ...) to the end user. With Notify you can do it in a unobstrusive and responsive way.

There are three type of notifications included with this component:

toast Opened in the corner you choose and 40% width.

bar Opened top or bottom and full width.

panel Opened left or right and full height.

Constructor

Stashy.Notify(userOptions)
Parameter Type Description
userOptions object The init options for each instance of Notify. Take a look to the userOptions table and explore the available stuff

The userOptions object

Option Type Default Description
target string body The element target container, by default the "body" of the page
title string empty string The element title
titleSize int 3 Enter whatever value in the range 1..6.The title will be an HTML heading. This number will provide the heading size (h1, h2, h3, ...)
contentType string text

It can be "inline" or "selector".

If you select "inline", then the content property should be simple text or inline html

On the other side, if you select "selector", you can provide any CSS selector to choose what to include in the notification.

If your option is "selector" remember you can add the st-notify-content class to the content box you are going to include in the notification in order to hide it.

content string empty string Simple text, inline html or a CSS selector
style string default Changes the color of the notification. The allowed styles are "default", "error", "info", "success" and "warning"
animDuration string fast "fast" or "slow" for a 1 sec or 2 sec animations
closeArea string button

If you select "button" then a close button will be added to notification.

If you choose "element" then the element itself will be clickable to closing it.

activeDuration int 0 How long to display the notification for in milliseconds, zero will leave the notification displayed until the user closes manually.

Methods

Name Description
toast(positionX, positionY,radius) Create a toast style notification

positionX: "right" or "left"

positionY: "top" or "bottom"

radius: Select true if you like rounded corners

bar(positionY) Creates a bar style notification

positionY: "top" or "bottom"

panel(positionX) Creates a panel style notification

positionX: "right" or "left"

Sample

Stashy.Notify({
    title : "My toast",
    content : "Toast style notification",
    titleSize : 4,
    style : "success",
    contentType : "text",
    animDuration : "fast",
    closeArea : "element"
}).toast("right", "bottom", true);

Stashy.Notify({
    title : "My bar",
    content : "Bar style notification",
    titleSize : 1,
    style : "info",
    contentType : "html",
    animDuration : "slow",
    closeArea : "button"
}).bar("top");

Stashy.Notify({
    title : "My panel",
    content : "#whatever-element-in-the-page",
    titleSize : 2,
    style : "default",
    contentType : "html",
    animDuration : "fast",
    closeArea : "button",
    activeDuration : 5000
}).panel("right");

Ok, let´s go with the important part, so start choosing your options ans see what Notify can do for you :)

add radius?
Toast Bar Panel

less

For using just this component, create a .less file similar to Stashy.less, include in order the following imports and compile:

Stashy.Variables.less Stashy.Mixins.less Stashy.Animate.less Stashy.Notify.less

JS

jQuery.js Stashy.Notify.js