ajax notification system

by amitava82

HTML

<br />
<br />
<br />
<br />
<button>AJAX</button>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<div>xczxc</div>

CSS

.notify {
  position:fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  cursor: pointer;
  text-align: center;
  padding: 3px 10px;
  font-weight: bold;
  color: #555;
  font: 12px Helvetica, Arial, sans-serif;
  font-weight: bold;
  width: auto;
}
.notify .close {
  float: right;
  margin-left: 10px;
  font-size: 10px;
}
.notify #info, #alert, #success, #warning {
  padding: 5px 12px 5px 12px;
  display: none;
  line-height: 26px;
}
.success {
  background-color: #C3E4FD;
  border: 1px solid #98BAFF;
}
.error {
  background-color: #FCF0F0;
  border: 1px solid #E2D0D0;
}
.alert {
  background-color: #FDCEA4;
  border: 1px solid #E6A283;
}
.info {
  background-color: #D4F684;
  border: 1px solid #A0DB2B;
}
#warning, .warning {
  background-color: #FEFFC8;
  border: 1px solid #F1AA2D;
}
.highlight {
  padding: 5px;
  margin: 5px 0 5px 0;
  background-color: #F7F9FE;
  border: 1px solid #DFE7EA;
}

JavaScript

$(function () {
  $('button').click(function () {
    $.ajax({
      url: 'www.someeerroro'
    })
  })

  $(document).ajaxStart(function () {
    //console.log('ajax starting');
    $('#info').show();
  });
  $(document).ajaxComplete(function () {
    //console.log('ajax completed');
  });
  $(document).ajaxSuccess(function (event, request, settings) {

  });
  $(document).ajaxError(function (e, jqxhr, settings, exception) {
    if (jqxhr.status != 0 || jqxhr.readyState != 0) {

    }

    $.Notify({
      message: exception,
      details: jqxhr.status,
      sticky: false
    })
  });
});


(function ($) {
  $.Notify = function (parms) {
    var settings;
    var defaults = {
      type: "error",
      delay: 5000,
      sticky: false,
      message: '',
      details: ''
    }
    if (typeof parms === "object") {
      settings = $.extend(true, {}, defaults, parms);
    } else {
      defaults.message = parms;
      settings = $.extend(true, {}, defaults);
    }

    var errorClass = settings.type == "error" ? "alert" : "info"

    $('.notify').length > 0 ? $('.notify').remove() : ""

    var container = $('<div />').addClass(errorClass + ' notify').appendTo('body');
    var shortMessage = $('<span />').addClass('short').append(settings.message)
    container.append(shortMessage)
    var close = $('<span />').addClass('close').text("[dismiss]")
    container.append(close)
    var detailedMessage = $('<div />').addClass('long').text(settings.details);

    container.on('click', function () {
      container.append(detailedMessage)
      reposition();
      $(this).off('click')
    });
    close.on('click', function (e) {
      container.remove();
    });

    if (settings.type == "error") {

    } else {

    }
    function reposition() {
      container.css({
        left: ($(window).width() - $(container).outerWidth()) / 2
      })
    }
    $(window).resize(function () {
      reposition();
    })
    reposition();
    //Finally remove after delay
    if...