--- /dev/null
+/*
+ HUMANIZED MESSAGES 1.0
+ idea - http://www.humanized.com/weblog/2006/09/11/monolog_boxes_and_transparent_messages
+ home - http://humanmsg.googlecode.com
+*/
+
+html, body {
+ height: 100%; /* Damn you IE! */
+}
+
+.humanMsg {
+ font: normal 20px/50px Helvetica, Arial, Sans-Serif;
+ letter-spacing: -1px;
+ position: fixed;
+ top: 130px;
+ left: 25%;
+ width: 50%;
+ color: white;
+ background-color: black;
+ text-align: center;
+ display: none;
+ opacity: 0;
+ z-index: 100000;
+}
+
+.humanMsg h3 {
+ margin: 0.3em;
+ margin-top: 0;
+ font-size: 24px/50px;
+ font-weight: bold;
+}
+
+.humanMsg .round {
+ border-left: solid 2px white;
+ border-right: solid 2px white;
+ font-size: 1px; height: 2px;
+ }
+
+.humanMsg p {
+ margin: 0.3em;
+ }
+
+.humanMsg a {
+ display: none;
+ }
+
+#humanMsgLog {
+ font: normal 10px Helvetica, Arial, Sans-Serif;
+ color: white;
+ position: fixed;
+ bottom: 0;
+ left: 0;
+ width: 100%;
+ max-height: 200px;
+ display: none;
+ z-index: 10000;
+ }
+
+#humanMsgLog p.launcher {
+ position: relative;
+ left: 50%;
+ width: 200px;
+ margin: 0;
+ margin-left: -100px;
+ padding: 0 10px;
+ line-height: 20px;
+ background: #333;
+ text-align: center;
+ white-space: pre;
+ cursor: pointer;
+ }
+
+#humanMsgLog p.launcher:hover {
+ background: #222;
+ }
+
+#humanMsgLog ul {
+ background: #eee url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAARCAIAAACaSvE/AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAE1JREFUeNqEjVEKACAIQ516Ee//5wVNCjIjaB/iY5vC3YkoIgDkVDOjQ5pqLCI3r2bLFzNzyydvM4uKqfJPKN4vyl9LO/7o3/6PhwADAIWkFPjc5eRrAAAAAElFTkSuQmCC) repeat-x;
+ margin: 0;
+ padding: 0;
+ position: relative;
+ max-height: 180px;
+ overflow: auto;
+ display: none;
+ }
+
+#humanMsgLog ul li {
+ color: #555;
+ font-size: 12px;
+ list-style-type: none;
+ border-bottom: 1px solid #ddd;
+ line-height: 40px;
+ display: none;
+ padding: 0 20px;
+ position: relative;
+ overflow: hidden;
+ white-space: pre;
+ }
+
+#humanMsgLog ul li:hover {
+ background: #f2f2f2;
+ }
+
+#humanMsgLog ul li:first-child {
+ margin-top: 1px;
+ }
+
+#humanMsgLog ul li .error {
+ color: orangered;
+ }
+
+#humanMsgLog ul li .indent {
+ position: absolute;
+ top: 0;
+ left: 100px;
+ margin-right: 200px;
+ height: inherit;
+ }
--- /dev/null
+/*
+ HUMANIZED MESSAGES 1.0
+ idea - http://www.humanized.com/weblog/2006/09/11/monolog_boxes_and_transparent_messages
+ home - http://humanmsg.googlecode.com
+*/
+
+var humanMsg = {
+ setup: function(appendTo, logName, msgOpacity) {
+ humanMsg.msgID = 'humanMsg';
+ humanMsg.logID = 'humanMsgLog';
+
+ // appendTo is the element the msg is appended to
+ if (appendTo == undefined) appendTo = 'body';
+
+ // The text on the Log tab
+ if (logName == undefined) logName = 'Message Log';
+
+ // Opacity of the message
+ humanMsg.msgOpacity = 0.8;
+
+ if (msgOpacity != undefined) humanMsg.msgOpacity = parseFloat(msgOpacity);
+
+ // Inject the message structure
+ 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>')
+
+ jQuery('#'+humanMsg.logID+' p').click(
+ function() { jQuery(this).siblings('ul').slideToggle() }
+ )
+ },
+
+ displayAlert: function(msg, options) {
+ humanMsg.displayMsg(msg, options, true);
+ },
+
+ displayMsg: function(msg, options, is_alert) {
+ if (msg == '')
+ return;
+
+ if (options != undefined) {
+ delay = 'delay' in options ? parseInt(options.delay) * 1000 : 1000
+ life = 'life' in options ? parseInt(options.life) * 1000 : Infinity
+ } else {
+ delay = 1000
+ life = Infinity
+ }
+
+ clearTimeout(humanMsg.t2);
+
+ // Inject message
+ jQuery('#'+humanMsg.msgID+'-contents').html(is_alert ? ('<p>' + msg + '</p>') : msg)
+
+ // Show message
+ jQuery('#'+humanMsg.msgID).show().animate({ opacity: humanMsg.msgOpacity}, 200, function() {
+ jQuery('#'+humanMsg.logID)
+ .show().children('ul').prepend('<li>'+msg+'</li>') // Prepend message to log
+ .children('li:first').slideDown(200) // Slide it down
+
+ if ( jQuery('#'+humanMsg.logID+' ul').css('display') == 'none') {
+ jQuery('#'+humanMsg.logID+' p').animate({ bottom: 40 }, 200, 'linear', function() {
+ jQuery(this).animate({ bottom: 0 }, 300, 'swing', function() { jQuery(this).css({ bottom: 0 }) })
+ })
+ }
+
+ })
+
+ // Watch for mouse & keyboard in `delay`
+ humanMsg.t1 = setTimeout("humanMsg.bindEvents()", delay)
+ // Remove message after `life`
+ humanMsg.t2 = setTimeout("humanMsg.removeMsg()", life)
+ },
+
+ bindEvents: function() {
+ // Remove message if mouse is moved or key is pressed
+ jQuery(window)
+ .mousemove(humanMsg.removeMsg)
+ .click(humanMsg.removeMsg)
+ .keypress(humanMsg.removeMsg)
+ },
+
+ removeMsg: function() {
+ // Unbind mouse & keyboard
+ jQuery(window)
+ .unbind('mousemove', humanMsg.removeMsg)
+ .unbind('click', humanMsg.removeMsg)
+ .unbind('keypress', humanMsg.removeMsg)
+
+ // If message is fully transparent, fade it out
+ if (jQuery('#'+humanMsg.msgID).css('opacity') == humanMsg.msgOpacity)
+ jQuery('#'+humanMsg.msgID).animate({ opacity: 0 }, 500, function() { jQuery(this).hide() })
+ }
+};
+
+jQuery(document).ready(function(){
+ humanMsg.setup();
+})