Development JavaScript DHTML




Logger Widget :: Customizing LogReader






/* customized ylogger styles - logger.css is NOT called above */
/* font size is controlled here: default 77% */
#yui-log {position:relative;font-size:85%;}
/* width is controlled here: default 31em */
.yui-log {padding:1em;width:31em;background-color:#AAA;border:1px solid black;font-family:monospace;z-index:9000;}
.yui-log p {margin:1px;padding:.1em;}
.yui-log button {font-family:monospace;}
.yui-log .yui-log-hd {position:relative;margin-top:1em;padding:.5em;background-color:#575757;color:#FFF;}
/* height is controlled here: default 20em*/
.yui-log .yui-log-bd {position:relative;background-color:#FFF;border:1px solid gray;overflow:auto;width:100%;height:10em;}
.yui-log .yui-log-ft {position:relative;margin-top:.5em;margin-bottom:1em;}
.yui-log .yui-log-btns {position:relative;float:right;bottom:.25em;}
.yui-log .info {background-color:#A7CC25;} /* A7CC25 green */
.yui-log .warn {background-color:#F58516;} /* F58516 orange */
.yui-log .error {background-color:#E32F0B;} /* E32F0B red */
.yui-log .time {background-color:#A6C9D7;} /* A6C9D7 blue */
.yui-log .window {background-color:#F2E886;} /* F2E886 tan */
.yui-log .mytype {background-color:#FF99CC;} /* FF99CC pink */




    
        

Logger Widget :: Customizing LogReader


    

    
        
        
            
                
                    
                    
                        

Customized LogReader Example


                        

This LogReader implementation has been modified by changing some default
                        CSS styles as well as modifying some properties through the constructor.
                        In this example, the LogReader is placed in a fixed position at the
                        bottom right of the screen. The height of each of the consoles has been
                        made smaller, the font size has been bumped up, and the log messages of
                        the second LogReader has been made more compact (i.e., the line break
                        within each message has been removed).


                        


                            Log


                        


                            Log


                        


                            Log


                        


                            Log


                        


                            Log (not supported in Opera, Safari)


                        


                            
                            Log


                        

Hide All LogReaders ||
                        Show All LogReaders


                        

Enable Output to console.log() || Disable Output to console.log()
                        


                        

Reset Logger stack


                    

                    
                

                
                    
                    
                    
                
            
                
            
                
                
                    

Sample Code


                    
                    
                    
                    /* container is relatively positioned and
                    font size is adjusted here (default is 77%) */
                    #yui-log {position:relative;font-size:85%;}
                    /* width is controlled here: default 31em */
                    .yui-log {padding:1em;width:31em;background-color:#AAA;border:1px solid black;font-family:monospace;z-index:9000;}
                    .yui-log p {margin:1px;padding:.1em;}
                    .yui-log button {font-family:monospace;}
                    .yui-log .yui-log-hd {position:relative;margin-top:1em;padding:.5em;background-color:#575757;color:#FFF;}
                    /* height is controlled here: default 20em*/
                    .yui-log .yui-log-bd {position:relative;background-color:#FFF;border:1px solid gray;overflow:auto;width:100%;height:10em;}
                    .yui-log .yui-log-ft {position:relative;margin-top:.5em;margin-bottom:1em;}
                    .yui-log .yui-log-btns {position:relative;float:right;bottom:.25em;}
                    .yui-log .info {background-color:#A7CC25;} /* A7CC25 green */
                    .yui-log .warn {background-color:#F58516;} /* F58516 orange */
                    .yui-log .error {background-color:#E32F0B;} /* E32F0B red */
                    .yui-log .time {background-color:#A6C9D7;} /* A6C9D7 blue */
                    .yui-log .window {background-color:#F2E886;} /* F2E886 tan */
                    /* a style for a custom category */
                    .yui-log .mytype {background-color:#FF99CC;} /* FF99CC pink */
                    
                    
                    
                    
                    
                    
                    
                    myLogReader1 = new YAHOO.widget.LogReader("yui-log");
                    myLogReader2 = new YAHOO.widget.LogReader("yui-log",{compactOutput: true});
                    
                    
                    
                
                
            
        
        
    








YAHOO.example.LogReader = function() {
    var myLogReader1;
    var myLogReader2;
    return {
        init: function() {
            myLogReader1 = new YAHOO.widget.LogReader("yui-log");
            myLogReader2 = new YAHOO.widget.LogReader("yui-log",{verboseOutput: false});
        },
        hideAllReaders: function() {
            myLogReader1.hide();
            myLogReader2.hide();
        },
        showAllReaders: function() {
            myLogReader1.show();
            myLogReader2.show();
        }
    };
}();
YAHOO.util.Event.onAvailable("yui-log",YAHOO.example.LogReader.init);



dp.SyntaxHighlighter.HighlightAll('code');



           
       
yui.zip( 3,714 k)