jQuery UI Notification

by JAAulde

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.8.16/themes/base/jquery-ui.css">
<div class="ui-notification-bar"></div>
<div class="ui-notification-container"></div>
<div class="ui-notification-bottomleft"></div>

<div id="content">
    <p>
        <button class="default">Add default</button>
    </p>
    <p>
        <button class="sticky">Add sticky</button>
    </p>
    <p>
        <button class="custom-anim">Add with custom animation</button>
    </p>
    <p>
        <button class="error">Add error message</button>
    </p>
    <p>
        <button class="bottomleft">Add to bottom left</button>
    </p>
    <p>
        <button class="bar">Add to notification bar</button>
    </p>
</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

/*jslint browser: true, nomen: true, continue: true, sloppy: true, eqeq: true, regexp: true, maxerr: 50, indent: 2 */
/*
 * jquery.yakabox.uinotification.js
 * Copyright (c) 2012 Yakabod, Inc.
 *
 * Depends:
 *   - jQuery 1.7.x
 *   - jQuery UI 1.8.x widget factory
 *
 * Forked from:
 * jQuery UI Notification
 * Copyright (c) 2011 Marcus Ekwall
 * http://writeless.se/projects/jquery-ui-notification/
 * Dual licensed under the MIT and GPL licenses:
 *   http://www.opensource.org/licenses/mit-license.php
 *   http://www.gnu.org/licenses/gpl.html
 *
 */
(function (global) {
  "use strict";

  var document = global.document,
    setTimeout = global.setTimeout,
    $ = global.jQuery,
    increments = 0;

  /*
    role="application" on body required for screenreaders to correctly interpret aria attributes
  */
  if (!$(document.body).is('[role]')) {
    $(document.body).attr('role', 'application');
  }

  $.widget('ui.notification', {
    options: {
      notificationClass: 'ui-widget-content',
      offset: 10,
      duration: 2000,
      show: {
        effect: 'fade',
        options: {},
        speed: 250,
        callback: function () {}
      },
      hide: {
        effect: 'fade',
        options: {},
        speed: 250,
        callback: function () {}
      },
      fancyHide: true,
      sticky: false,
      stack: 'below'
    },
    content: {
      title: 'Notification',
      content: function () {
        return $(this).attr('title');
      },
      template: '<h4>${Title}</h4><p>${Content}</p>'
    },
    _init: function () {
      /*
        container for notifications
      */
      this.notifications = [];

      /*
        notification dummy
      */
      this.notification = $('<div />')
        .attr({
          role: 'notification',
          "aria-hidden": 'true'
        })
        .addClass('ui-notification ui-widget ui-corner-all')
        .hide();

      if (this.options.stack === 'below') {
        this.notification.css('marginBottom',...