YUI Library Home

Site Search (YDN & YUIBlog):

# YUI Library Examples: Logger Control: Configuring LogReader

# Logger Control: Configuring LogReader

Demonstrations of LogReader configurations.

#### Example: Compact Ouput

Log a simple message

By default, log messages are printed to the console with a good deal of whitespace for better readability. In this example, verbose output has been disabled so each message gets output on a single line without wrapping.

#### Sample Code

<body> <div id="compact"></div> <script type="text/javascript"> var myCompact = new YAHOO.widget.LogReader("compact", {verboseOutput:false}); myCompact.setTitle("Compact Output"); </script> </body>

#### Example: Footer Disabled

Log a simple message

By default, the footer displays checkboxes for easy filtration of log messages by category and by source, as well as buttons to pause/resume output and clear the console. In this example, the footer is hidden from the UI, but filters can still be enabled or disabled programmatically.

Hide "info" Category Show "info" Category

#### Sample Code

<body> <div id="compact"></div> <script type="text/javascript"> var myFooterDisabled = new YAHOO.widget.LogReader("nofooter", {footerEnabled:false}); myFooterDisabled.setTitle("Footer Disabled"); </script> </body>

#### Example: Oldest On Top

Log a simple message

By default, new messages get prepended at the top of the console. In this example, new messages get appended at the bottom of the console.

#### Sample Code

<body> <div id="oldestOnTop"></div> <script type="text/javascript"> var myOldestOnTop = new YAHOO.widget.LogReader("oldestOnTop", {newestOnTop:false}); myOldestOnTop.setTitle("Oldest On Top"); </script> </body>

#### Example: Undraggable

Log a simple message

Although the Drag and Drop Utility is available on the page, draggability of this LogReader has been disabled.

#### Sample Code

<body> <div id="undraggable"></div> <script type="text/javascript"> var myUndraggable = new YAHOO.widget.LogReader("undraggable", {draggable:false}); myUndraggable.setTitle("Undraggable"); </script> </body>

#### Example: Filtered Output

Log a simple message

The first LogReader will show only global info messages. The second LogReader will only show info messages coming from the "LogReader" class.

#### Sample Code

<body> <div id="filtered"></div> <script type="text/javascript"> var myFiltered1 = new YAHOO.widget.LogReader("filtered"); var myFiltered2 = new YAHOO.widget.LogReader("filtered"); myFiltered1.hideCategory("warn"); myFiltered1.hideCategory("error"); myFiltered1.hideCategory("time"); myFiltered1.hideCategory("window"); myFiltered2.hideCategory("warn"); myFiltered2.hideCategory("error"); myFiltered2.hideCategory("time"); myFiltered2.hideCategory("window"); myFiltered1.hideSource("LogReader"); myFiltered2.hideSource("global"); myFiltered1.setTitle("Filtered LogReader: Global Messages Only"); myFiltered2.setTitle("Filtered LogReader: LogReader Messages Only"); </script> </body>

#### Example: Buffered

Log a simple message

Output buffer has been increased to 3 seconds. Therefore, messages are printed to the screen every 3 seconds.

#### Sample Code

<body> <div id="paused"></div> <script type="text/javascript"> var myBuffered = new YAHOO.widget.LogReader("buffered", {outputBuffer:3000}); myPaused.setTitle("3 Second Output Buffer"); </script> </body>

#### Example: Paused

Resume this LogReader | Pause this LogReader | Log a simple message

Output has been paused.

#### Sample Code

<body> <div id="paused"></div> <script type="text/javascript"> var myPaused = new YAHOO.widget.LogReader("paused"); myPaused.pause(); myPaused.setTitle("Paused LogReader"); </script> </body>

#### Example: Collapsed

Log a simple message

The LogReader console has been collapsed.

#### Sample Code

<body> <div id="collapsed"></div> <script type="text/javascript"> var myCollapsed = new YAHOO.widget.LogReader("collapsed"); myCollapsed.collapse(); myCollapsed.setTitle("Collapsed LogReader"); </script> </body>

#### Example: Hidden

Show this LogReader | Hide this LogReader | Log a simple message

The entire LogReader console has been hidden.

#### Sample Code

<body> <div id="hidden"></div> <script type="text/javascript"> var myHidden = new YAHOO.widget.LogReader("hidden"); myHidden.hide(); myHidden.setTitle("Hidden LogReader"); </script> </body>

#### Example: Styled via Custom CSS

Log a simple message

The UI has been customized via custom CSS.

#### Sample Code

<head> <style type="text/css"> #styled {font-family:verdana;} #styled .info {background-color:blue;} #styled .warn {background-color:green;} #styled .error {background-color:red;} #styled .time {background-color:orange;} #styled .window {background-color:yellow;} </style> </head> <body> <div id="styled"></div> <script type="text/javascript"> var myStyled = new YAHOO.widget.LogReader("styled"); myStyled.setTitle("Styled via Custom CSS"); </script> </body>

## Configuration for This Example

You can load the necessary JavaScript and CSS for this example from Yahoo's servers. Click here to load the YUI Dependency Configurator with all of this example's dependencies preconfigured.

### Logger Control Examples:

### More Logger Control Resources:

- User's Guide (external)
- API Documentation
- Cheat Sheet PDF (external)

Copyright © 2010 Yahoo! Inc. All rights reserved.

Privacy Policy - Terms of Service - Copyright Policy - Job Openings