/ Published in: JavaScript
Intelligent logging for javascript (also compatible with Firebug). Thanks to Prototype.js, PPK, and Danny Goodman for the idea!
Expand |
Embed | Plain Text
Copy this code and paste it in your HTML
BASE = { /** * USAGE * BASE.log(o) * outputs the value of whatever is passed to it in either the firebug console, * or a newly created window on top of your content; * useful to debug various problems within your scripts * @param o = any object, array, number, or string */ log:function(o) { var logger = (this.isObject(window.console) && window.console.firebug) || null; if(!logger){ if(document.createElement && document.getElementById){ var elem = document.createElement('div') || document.getElementById('logger'), p = document.createElement('pre') || elem.firstChild, t = null, d = document.getElementsByTagName('body')[0], r = null, res = 'no data passed ', opac = 20, that = this; if(this.isObject(o) && !this.isArray(o)){ r = []; for(var i in o){ var name = o.nodeName || o.toString(); r.push(name + '.' + i + '=' + o[i] + ' '); } r.sort(); res = r.join(' ') || 'empty object '; } else if(this.isArray(o)){ r = []; for(var i in o){ var name = o.nodeName || o.toString(); r.push(i + '=' + o[i] + ' '); } r.sort(); res = r.join(' ') || 'empty array '; } else if(this.isString(o)){ res = o + ' ' || 'no string to display '; } else if(this.isNumber(o)){ res = o + ' ' || 'no number to display '; }; if(!document.getElementById('logger')){ t = document.createTextNode(res); p.appendChild(t); elem.appendChild(p); //required styles elem.id = 'logger'; elem.className = 'console-window'; elem.style['overflow'] = 'auto'; elem.style['top'] = '0px'; elem.style['zIndex'] = '1000'; elem.style['left'] = '25%'; elem.style['width'] = '50%'; elem.style['margin'] = '10px auto'; elem.style['position'] = 'fixed'; if(this.isIE){ elem.style['position'] = 'absolute'; document.body.style['overflowY'] = 'auto'; document.body.style['height'] = '100%' } p.style.className = 'window-text'; p.style['whiteSpace'] = 'pre'; p.style['textAlign'] = 'left'; //default styles can be overridden using !important declarations in style sheets elem.style['padding'] = '5px 20px'; elem.style['height'] = '250px'; elem.style['backgroundColor'] = '#ffffff'; elem.style['border'] = '1px solid red'; //add transparency this.setOpacity(opac, elem); elem.onmouseover = function(){ that.setOpacity(100, elem); //this.style['position'] = 'fixed'; }; elem.onmouseout = function(){ that.setOpacity(opac, elem); //this.style['position'] = 'absolute'; }; //return new node to add to DOM return d.insertBefore(elem, d.firstChild); } else { return document.getElementById('logger').firstChild.firstChild.nodeValue += res; } } else { window.alert('you should probably upgrade your browser!'); } } else { if(this.isObject(o)){ console.dir(o); } else { console.log(o); } } }, isArray: function(object){ return object !== null && typeof object == "object" && 'splice' in object && 'join' in object; }, isFunction: function(object){ return typeof object == "function"; }, isObject: function(object){ return (object && (typeof object === 'object' || this.isFunction(object))) || false; }, isString: function(object){ return typeof object == "string"; }, isNumber: function(object){ return typeof object == "number"; }, isIE:function() { return !!( (/(msie 6|msie 7)/i).test(navigator.userAgent) && !(/opera/i).test(navigator.userAgent.indexOf('opera')) && window.ActiveXObject ); }(), setOpacity:function(opacity, element) { if(!element.style['zoom']) { //correct hasLayout IE transparency element.style['zoom'] = 1; }; if(element.style['MozOpacity']) { element.style['MozOpacity'] = (opacity / 100); }; if(element.style['KhtmlOpacity']) { element.style['KhtmlOpacity'] = (opacity / 100); }; if(element.filters) { element.style.filter = 'progid:DXImageTransform.Microsoft.Alpha(Opacity=' + opacity + ')'; element.style.filter = 'alpha(opacity=' + Math.round(opacity) + ')'; }; element.style['opacity'] = (opacity / 100); } };
URL: http://www.six-degrees.com/six-degrees.html