nate
11-07-2006, 11:15 AM
I'm getting ready to do a heavy amount of coding using the Logger and needed a nice place in the browser window for the Logger to be. I made it fixed on the bottom of the browser window and styled it to flow better with Firefox and appear like a Firefox extension. Just wanted to share this with you - hope it may help you out as well! :)
Here's a snapshot. This is the bottom half of a Firefox browser window:
http://files.nathandicken.com/yui_logger_skin.gif
The container I have located right inside the body tag as shown. The reason I named the logger div "logger-global" is in the case I need to instantiate another instance of the logger. You could name it any way you like:
<body>
<div id="logger"><div id="logger-global" class="yui-log"></div></div>
Then the JS that fires it off...
/* ---------------------------------
@ Yahoo UI Library Logger
----------------------------------- */
LogManager = function() {
return {
init : function()
{
this.logger = new YAHOO.widget.LogReader("logger-global");
this.logger.setTitle("JS Logger");
}
}
}();
YAHOO.ext.EventManager.onDocumentReady(LogManager.init, LogManager, true);
And finally, the CSS used to style it. I've got some parent font styles applied to the body tag that might be inherited by this CSS, so you might need to adjust the font sizes to your preference.
/* YAHOO UI Logger */
#logger
{
background-color:#ece9d8;
border-top:1px solid #aca899;
position:absolute;
z-index:100;
left:0px;
bottom:0px;
font:normal normal normal 100% verdana, sans-serif;
font-size:1em;
width:100%;
}
.yui-log
{
border-top:1px solid #fff;
padding:5px 3px 3px 3px;
}
.yui-log code
{
border-top:1px dotted #ccc;
font-family:monospace;
font-size:11px;
display:block;
padding:2px 0 5px 0;
}
.yui-log p { margin:0; padding:0; }
.yui-log .yui-log-hd
{
position:relative;
padding:0 0 3px 2px;
font-weight:normal;
color:#000;
}
.yui-log .yui-log-hd h4 { font-size:1em }
.yui-log .yui-log-bd
{
position:relative;
background-color:#fff;
border:1px solid #bdb9ad;
overflow:auto;
width:99.2%;
height:20em;
margin:2px 0 0 0;
padding:0 3px 0 3px;
}
.yui-log .yui-log-ft
{
position:relative;
padding:5px 0 0 0;
}
.yui-log .yui-log-btns
{
position:relative;
float:right;
bottom:.25em;
}
.yui-log .info {background-color:#a3c925;}
.yui-log .warn {background-color:#f58515;}
.yui-log .error {background-color:#e1300b;}
.yui-log .time {background-color:#a4c8d6;}
.yui-log .window {background-color:#f2e784;}
.yui-log .mytype {background-color:#ff95ca;}
.yui-log .yui-log-sourcefilters,
.yui-log .yui-log-categoryfilters
{
float:left;
}
.yui-log .yui-log-sourcefilters
{
border-left:1px solid #bdb9ad;
padding-left:16px;
margin-left:10px;
}
.yui-log span.yui-log-filtergrp
{
margin-right:4px;
font-size:0.9em;
}
.yui-log span.yui-log-filtergrp label { padding:0 1px 0 1px }
Here's a snapshot. This is the bottom half of a Firefox browser window:
http://files.nathandicken.com/yui_logger_skin.gif
The container I have located right inside the body tag as shown. The reason I named the logger div "logger-global" is in the case I need to instantiate another instance of the logger. You could name it any way you like:
<body>
<div id="logger"><div id="logger-global" class="yui-log"></div></div>
Then the JS that fires it off...
/* ---------------------------------
@ Yahoo UI Library Logger
----------------------------------- */
LogManager = function() {
return {
init : function()
{
this.logger = new YAHOO.widget.LogReader("logger-global");
this.logger.setTitle("JS Logger");
}
}
}();
YAHOO.ext.EventManager.onDocumentReady(LogManager.init, LogManager, true);
And finally, the CSS used to style it. I've got some parent font styles applied to the body tag that might be inherited by this CSS, so you might need to adjust the font sizes to your preference.
/* YAHOO UI Logger */
#logger
{
background-color:#ece9d8;
border-top:1px solid #aca899;
position:absolute;
z-index:100;
left:0px;
bottom:0px;
font:normal normal normal 100% verdana, sans-serif;
font-size:1em;
width:100%;
}
.yui-log
{
border-top:1px solid #fff;
padding:5px 3px 3px 3px;
}
.yui-log code
{
border-top:1px dotted #ccc;
font-family:monospace;
font-size:11px;
display:block;
padding:2px 0 5px 0;
}
.yui-log p { margin:0; padding:0; }
.yui-log .yui-log-hd
{
position:relative;
padding:0 0 3px 2px;
font-weight:normal;
color:#000;
}
.yui-log .yui-log-hd h4 { font-size:1em }
.yui-log .yui-log-bd
{
position:relative;
background-color:#fff;
border:1px solid #bdb9ad;
overflow:auto;
width:99.2%;
height:20em;
margin:2px 0 0 0;
padding:0 3px 0 3px;
}
.yui-log .yui-log-ft
{
position:relative;
padding:5px 0 0 0;
}
.yui-log .yui-log-btns
{
position:relative;
float:right;
bottom:.25em;
}
.yui-log .info {background-color:#a3c925;}
.yui-log .warn {background-color:#f58515;}
.yui-log .error {background-color:#e1300b;}
.yui-log .time {background-color:#a4c8d6;}
.yui-log .window {background-color:#f2e784;}
.yui-log .mytype {background-color:#ff95ca;}
.yui-log .yui-log-sourcefilters,
.yui-log .yui-log-categoryfilters
{
float:left;
}
.yui-log .yui-log-sourcefilters
{
border-left:1px solid #bdb9ad;
padding-left:16px;
margin-left:10px;
}
.yui-log span.yui-log-filtergrp
{
margin-right:4px;
font-size:0.9em;
}
.yui-log span.yui-log-filtergrp label { padding:0 1px 0 1px }