3 idea - http://www.humanized.com/weblog/2006/09/11/monolog_boxes_and_transparent_messages
4 home - http://humanmsg.googlecode.com
8 setup: function(appendTo, logName, msgOpacity) {
9 humanMsg.msgID = 'humanMsg';
10 humanMsg.logID = 'humanMsgLog';
12 // appendTo is the element the msg is appended to
13 if (appendTo == undefined) appendTo = 'body';
15 // The text on the Log tab
16 if (logName == undefined) logName = 'Message Log';
18 // Opacity of the message
19 humanMsg.msgOpacity = 0.8;
21 if (msgOpacity != undefined) humanMsg.msgOpacity = parseFloat(msgOpacity);
23 // Inject the message structure
24 jQuery(appendTo).append('<div id="'+humanMsg.msgID+'" class="humanMsg"><div class="round"></div><div id="'+humanMsg.msgID+'-contents"></div><div class="round"></div></div> <div id="'+humanMsg.logID+'"><p class="launcher">'+logName+'</p><ul></ul></div>')
26 jQuery('#'+humanMsg.logID+' p').click(
27 function() { jQuery(this).siblings('ul').slideToggle() }
31 displayAlert: function(msg, options) {
32 humanMsg.displayMsg(msg, options, true);
35 displayMsg: function(msg, options, is_alert) {
39 if (options != undefined) {
40 delay = 'delay' in options ? parseInt(options.delay) * 1000 : 1000
41 life = 'life' in options ? parseInt(options.life) * 1000 : Infinity
47 clearTimeout(humanMsg.t2);
50 jQuery('#'+humanMsg.msgID+'-contents').html(is_alert ? ('<p>' + msg + '</p>') : msg)
53 jQuery('#'+humanMsg.msgID).show().animate({ opacity: humanMsg.msgOpacity}, 200, function() {
54 jQuery('#'+humanMsg.logID)
55 .show().children('ul').prepend('<li>'+msg+'</li>') // Prepend message to log
56 .children('li:first').slideDown(200) // Slide it down
58 if ( jQuery('#'+humanMsg.logID+' ul').css('display') == 'none') {
59 jQuery('#'+humanMsg.logID+' p').animate({ bottom: 40 }, 200, 'linear', function() {
60 jQuery(this).animate({ bottom: 0 }, 300, 'swing', function() { jQuery(this).css({ bottom: 0 }) })
66 // Watch for mouse & keyboard in `delay`
67 humanMsg.t1 = setTimeout("humanMsg.bindEvents()", delay)
68 // Remove message after `life`
69 humanMsg.t2 = setTimeout("humanMsg.removeMsg()", life)
72 bindEvents: function() {
73 // Remove message if mouse is moved or key is pressed
75 .mousemove(humanMsg.removeMsg)
76 .click(humanMsg.removeMsg)
77 .keypress(humanMsg.removeMsg)
80 removeMsg: function() {
81 // Unbind mouse & keyboard
83 .unbind('mousemove', humanMsg.removeMsg)
84 .unbind('click', humanMsg.removeMsg)
85 .unbind('keypress', humanMsg.removeMsg)
87 // If message is fully transparent, fade it out
88 if (jQuery('#'+humanMsg.msgID).css('opacity') == humanMsg.msgOpacity)
89 jQuery('#'+humanMsg.msgID).animate({ opacity: 0 }, 500, function() { jQuery(this).hide() })
93 jQuery(document).ready(function(){