Javascript Growl Type Alerts

jgrowl.js

// used here: https://gist.github.com/3665292
// loadJS('https://raw.github.com/gist/3736933/jgrowl.js', function(){ createGrowl("title", "content", false); });


// Loads javascript
// note that callback function needs be before calling loadJS(or inline)
// loadJS("http://code.jquery.com/jquery-latest.js", function() { $('my_element').hide(); });
var loadJS = function (url, callback) {
  var head = document.getElementsByTagName("head")[0];
  var script = document.createElement("script");
  script.src = url;
 
  // Attach handlers for all browsers
  var done = false;
  script.onload = script.onreadystatechange = function() {
    if( !done && ( !this.readyState             || 
                    this.readyState == "loaded" || 
                    this.readyState == "complete")) {
      done = true;
 
      // Continue your code
      callback();
 
      // Handle memory leak in IE
      script.onload = script.onreadystatechange = null;
      head.removeChild( script );
    }
  };
 
  head.appendChild(script);
}

// from http://jsfiddle.net/craga89/NYc4Q/
// Assumes jQuery & jquery.qtip.js is loaded

// Usage:
// createGrowl("title", "text", false);

// Table CSS
var table_css = "table {  width: auto;   box-shadow: 0 0 4px #CCCCCC;   border-collapse: collapse;   border-spacing: 0;    border-color:#CCCCCC;    border-style:solid;    border-width:1px;  } th, td, caption {   padding: 0px 10px 4px 5px;   font-weight: 300; }  ul {   margin-bottom: 3em; }    thead tr, thead th {   background: none repeat scroll 0 0 #F0F0F0; }  tbody tr:nth-child(2n) td, tbody tr.odd td {   background: none repeat scroll 0 0 #F0F0F0; }";
$("<style type='text/css'>" + table_css + "</style>").appendTo("head");

// Qtip CSS Include
$('head').append('<link rel="stylesheet" href="http://craigsworks.com/projects/qtip2/packages/nightly/jquery.qtip.css" type="text/css" />');

// Qtip jGrowl CSS
var qtip_css = ".jgrowl { font-size: 13px; max-width: 320px !important; width: 320px !important;}​";
$("<style type='text/css'>" + qtip_css + "</style>").appendTo("head");


window.createGrowl = function(title, message, persistent) {
    // Use the last visible jGrowl qtip as our positioning target
    var target = $('.qtip.jgrowl:visible:last');

    // Create your jGrowl qTip...
    $(document.body).qtip({
        // Any content config you want here really.... go wild!
        content: {
            text: message,
            title: {
                text: title,
                button: true
            }
        },
        position: {
            my: 'top right',
            // Not really important...
            at: (target.length ? 'bottom' : 'top') + ' right',
            // If target is window use 'top right' instead of 'bottom right'
            target: target.length ? target : $(window),
            // Use our target declared above
            adjust: { y: 5 },
            effect: function(api, newPos) {
                // Animate as usual if the window element is the target
                $(this).animate(newPos, {
                    duration: 200,
                    queue: false
                });

                // Store the final animate position
                api.cache.finalPos = newPos;
            }
        },
        show: {
            event: false,
            // Don't show it on a regular event
            ready: true,
            // Show it when ready (rendered)
            effect: function() {
                $(this).stop(0, 1).fadeIn(400);
            },
            // Matches the hide effect
            delay: 0,
            // Needed to prevent positioning issues
            // Custom option for use with the .get()/.set() API, awesome!
            persistent: persistent
        },
        hide: {
            event: false,
            // Don't hide it on a regular event
            effect: function(api) {
                // Do a regular fadeOut, but add some spice!
                $(this).stop(0, 1).fadeOut(400).queue(function() {
                    // Destroy this tooltip after fading out
                    api.destroy();

                    // Update positions
                    updateGrowls();
                });
            }
        },
        style: {
            classes: 'jgrowl ui-tooltip-light ui-tooltip-rounded',
            // Some nice visual classes
            tip: false // No tips for this one (optional ofcourse)
        },
        events: {
            render: function(event, api) {
                // Trigger the timer (below) on render
                timer.call(api.elements.tooltip, event);
            }
        }
    }).removeData('qtip');
};

// Make it a window property see we can call it outside via updateGrowls() at any point
window.updateGrowls = function() {
    // Loop over each jGrowl qTip
    var each = $('.qtip.jgrowl'),
        width = each.outerWidth(),
        height = each.outerHeight(),
        gap = each.eq(0).qtip('option', 'position.adjust.y'),
        pos;

    each.each(function(i) {
        var api = $(this).data('qtip');

        // Set target to window for first or calculate manually for subsequent growls
        api.options.position.target = !i ? $(window) : [
            pos.left + width, pos.top + (height * i) + Math.abs(gap * (i-1))
        ];
        api.set('position.at', 'top right');
        
        // If this is the first element, store its finak animation position
        // so we can calculate the position of subsequent growls above
        if(!i) { pos = api.cache.finalPos; }
    });
};

// Setup our timer function
function timer(event) {
    var api = $(this).data('qtip'),
        lifespan = 5000; // 5 second lifespan
    
    // If persistent is set to true, don't do anything.
    if (api.get('show.persistent') === true) { return; }

    // Otherwise, start/clear the timer depending on event type
    clearTimeout(api.timer);
    if (event.type !== 'mouseover') {
        api.timer = setTimeout(api.hide, lifespan);
    }
}

// Utilise delegate so we don't have to rebind for every qTip!
$(document).delegate('.qtip.jgrowl', 'mouseover mouseout', timer);