Give life to your web app with Material Design Notifications!

OVERVIEW

Plugin dependencies

This plugin requires the md-notifications CSS file and jQuery (1.1.14+) to function. (this means jQuery must be included before the plugin file).

close

4:53 PM

Barry Allen

Wanna know my secret identity?

I am the flash!

archive ARCHIVE
reply REPLY

FlashGordon@gmail.com

USAGE

Live example

Dynamically generate notifications.
Blank values will be emitted from the passed parameters.


Custom HTML

Use your own HTML to futher customize your notification as well as button actions.
Once the notification is triggered, the HTML will be deleted upon being closed.

You will only be abel to show the notification once, for it will be deleted when closed.

<div id="BarryNotification" class="md-notification-container top">
    <a class="md-notification-close" data-dismiss="md-notification"><i class="material-icons">close</i></a>
    <div class="md-img-container">
        <img src="https://mir-s3-cdn-cf.behance.net/project_modules/disp/a2fa0522433737.5631e82d148c9.png" />
    </div>
    <div class="md-notification-content">
        <p class="md-notification-time">4:53 PM</p>
        <h3>Barry Allen</h3>
        <h4>Wanna know my secret identity?</h4>
        <p>I am the flash!</p>
        <div class="md-notification-options">
            <div class="md-notification-option">
                <a href="#"><i class="material-icons">archive</i> ARCHIVE</a>
            </div>
            <div class="md-notification-option">
				<a href="#"><i class="material-icons">reply</i> REPLY</a>
            </div>
        </div>
        <p>FlashGordon@gmail.com</p>
    </div>
</div>

jQuery button click event

$("#BarryNotification").mdNotify("show", 5000);

Bind to element click

To bind a notification to a click event, simply initialize the plugin on the selector element. 

$("#button_Trigger_Notification").mdNotify(options);

Generate on the fly

To generate the notification on the fly, simply use the body as the selector.

<button onclick="GenerateNotification();">Genereate Notification</button>
function GenerateNotification() {
    $("body").mdNotify(options);
}

OPTIONS

Paramater options table

Name Type Defaults Description Example Usage
header string "" Header "text"
subHeader string null Sub header "text"
body string "" Body Content "text"
footer string null Footer content "text"
actions action[] null An array of actions to display on the notifications [{ name: "ARCHIVE", mdIcon: "archive", link: "#" }, { name: "REPLY", mdIcon: "reply", link: "#" }]
timeStamp boolean true Wether to display a time stamp true
customTimeStamp string null If the timeStamp is true, the current time will be shown, if customTimeStamp contains a value other than null, it will be displayed instead "14:15:40 custom text"
dismiss boolean false Wether to show a close option false
progressBar boolean false Wether to display in a fashionly manner the time remaining for the notification until it closes false
imgUrl string null Image URL for the notification "resources/mdAvatar.png"
timeOut int 5000 How long will the message be displayed in milliseconds 2500
position string "top" Determines the position of the notification
Options: ["top", "bottom", "left", "right", "top-right", "top-left", "bottom-left", "bottom-right"] 		"top-right"
show boolean true Wether to show the notification upon creation true

METHODS

$("body").mdNotify(options)

Activates a notification immediately.

$("body").mdNotify({
    header: "Header Text"
});

$("button").mdNotify(options)

Binds a notification to a click event.

$("button").mdNotify({
    header: "Header Text"
});

$("#notification").mdNotify("show")

Shows an existing notification.

$("#notification").mdNotify("show");

$("#notification").mdNotify("hide")

Hides a visible notification.

$("#notification").mdNotify("hide");

$("#notification").mdNotify("close")

Closes a notification (and deletes it permanently).

$("#notification").mdNotify("close");