jQuery UI Notification from MekWall

notification tool using jQuery

by John VandenBrook

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/themes/base/jquery-ui.css">
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script>
<script src="https://raw.github.com/mekwall/jquery-ui-notification/master/src/jquery.ui.notification.min.js"></script>
<div class="ui-notification-bar"></div>
<div class="ui-notification-container"></div>
<div class="ui-notification-bottomleft"></div>

<div id="content">

<script type="text/javascript" src="http://jqueryui.com/themeroller/themeswitchertool/"></script>
<div id="switcher"></div>

<br />
<button class="default">Add default</button>

<br />
<button class="sticky">Add sticky</button>

<br />
<button class="custom-anim">Add with custom animation</button>
    
<br />
<button class="error">Add error message</button>
    
<br />
<button class="bottomleft">Add to bottom left</button>

<br />
<button class="bar">Add to notification bar</button>
    
</div>

CSS

html, body {
    margin: 0;
    padding: 0;
}

#content { padding: 20px; }

.ui-notification-container {
    width: 300px;
    position: absolute;
    top: 10px;
    right: 10px;
}

.ui-notification-bottomleft {
    width: 300px;
    position: absolute;
    left: 10px;
    bottom: 10px;
}

.ui-notification-bar {
    position: relative;
    top: 0px;
    left: 0px;
    right: 0px;
    overflow: hidden;
}

.ui-notification-bar .ui-notification {
    border-top: 0;
    border-left: 0;
    border-right: 0;
    border-radius: 0;
    -o-box-radius: 0;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
}




.ui-notification {
    padding: 5px 10px;
    -o-box-shadow: 2px 2px 2px #ccc;
    -moz-box-shadow: 2px 2px 2px #ccc;
    -webkit-box-shadow: 2px 2px 2px #ccc;
    box-shadow: 2px 2px 2px #ccc;
}

.ui-notification .ui-notification-content {
    font-size: 0.9em;    
}

.ui-notification .ui-notification-content h4 {
    font-size: 1.1em;
}

.ui-notification .ui-notification-content p {
    font-size: 0.9em;
}

.ui-notification .ui-notification-close {
    display: inline-block;
    float: right;
    width: 19px;
    padding: 1px;
    height: 18px;
    margin: -2px -2px 0 2px;
}

.ui-notification .ui-notification-close:hover,
.ui-notification .ui-notification-close:focus {
    padding: 0;
}

.ui-notification .ui-notification-close span {
    display: block;
    margin: 1px;
}

JavaScript

$(function(){
    
    $(".ui-notification-container").notification();
    $(".ui-notification-bottomleft").notification({
        stack: "above"
    });
    $(".ui-notification-bar").notification({
        notificationClass: "ui-state-highlight",
        offset: 0,
        sticky: true,
        fancyHide: false,
        show: {
            effect: 'blind',
            options: {
                direction: 'vertical'
            },
            speed: 250,
            callback: function(){}
        },
        hide: {
            effect: 'blind',
            options: {
                direction: 'vertical'
            },
            speed: 250,
            callback: function(){}
        },
    });
    
    $("button.default").click(function(){
    
        $(".ui-notification-container").notification("create", {
            title: "Hello world!",
            content: "I am a default notification"
        });
    
    });
    
    $("button.sticky").click(function(){
    
        $(".ui-notification-container").notification("create", {
            title: "Hello world!",
            content: "I am a sticky notification"
        },
        {
            sticky: true 
        });
    
    });
    
    $("button.custom-anim").click(function(){
    
        $(".ui-notification-container").notification("create", {
            title: "Hello world!",
            content: "I am a sticky notification"
        },
        {
            show: {
                effect: 'bounce',
                options: {},
                speed: 250,
                callback: function(){}
            },
            hide: {
                effect: 'clip',
                options: {},
                speed: 250,
                callback: function(){}
            }
        });
    
    });
    
    $("button.error").click(function(){
         $(".ui-notification-container").notification("create", {
            title: "Error",
            content: "This is an error notification"
         }, {...