Gremlin, a growling notification system

What is growling?

Growl was originally a Mac OS X application that served as a unique interface for displaying notifications to the user. Growl-aware applications sent notification requests to Growl, and Growl displayed the notifications on the screen in a manner that was consistent across all applications.

Eventually, web developers looked for ways to simulate that behavior, which led to a variety of growl-like plugins. This page serves as a demonstration for Gremlin, my own version of such a plugin based on the jQuery framework:

Click me to see an example

How does it work?

Gremlin is a combination of HTML, CSS and JavaScript combined together to form a simple component.

HTML and CSS are combined to position a div with the "gremlin" identifier in the top right corner of the screen. Every notification then appears within that div as two nested divs, with the actual text content within the inner div. The outer div serves as the bounding box of the notification to avoid margin-related issues that might arise from using a single div, and the inner div applies the background and text effects to the contents.

#gremlin
{ 
  position: fixed;
  top: 10px;
  right: 20px;
  width: 200px;
}

#gremlin > div
{ 
  position: relative;
  margin: 0px;
  padding: 10px 0px;
}

#gremlin > div > div
{ 
  text-align: center;
  font-size: 10px;
  position: relative;
  margin: 0px;
  padding: 5px;
  background-color: rgba(0,0,0,0.5);
  color: white;
}

The javascript itself constructs the "gremlin" div if it isn't already present, then follows a simple animation script:

1. Create the notification.
2. Insert the notification into the "gremlin" div with an opacity that slowly increases from 0% to 100%.
3. Wait for 3.5 seconds for the user to read the notification.
4. Have the opacity, height and vertical padding of the notification slowly decrease towards 0.
5. Remove the notification from the document.

function gremlin(text, _next){

  if ($('#gremlin').length == 0)
    $('body').prepend('<div id="gremlin"></div>');

  var $element =
    $('<div><div>'+text.replace('&','&amp;').replace('<','&lt;')+'</div></div>'),

  run    = function(){
    $element
      .css({opacity : 0})
      .appendTo('#gremlin')
      .animate({opacity: 1}, 'slow', wait);
  },

  wait   = function(){
    setTimeout(hide, 3500);
  },

  hide   = function(){
    $element.animate({opacity:0,height:0,paddingTop:0,paddingBottom:0},'slow',remove);
  },

  remove = function(){
    $element.remove();
    if (_next) _next();
  };

  run();
}

Licensing

I am not going to rely on the use of the legal system to enforce the below restrictions on the distribution of this code, therefore I am putting this code into the public domain. However, that does not mean that you are free to do anything you want. I assert a moral right to require you to give credit to myself whenever you take credit for the work you have combined my work with. If you fail to do this, I will tell your mother, your wife, your girlfriend, your mistress, and your religious leader.

— the Moral Rights Public Declaration