Download
Download the log and play with the options or skin it yourself.
Features
Uses jQuery 1.2, with Jquery UI (draggable, droppable and resizable, versions 1.5) [The latest version of jQuery, included in zip.]
Minimize & Maximize [Gets out of your way. It remembers the last settings and scrolls with you. Vertical only. It always minimizes to bottom left corner.]
Snap [Log snaps to sides if specified. It scrolls with you when snapped. Vertical only.]
Drag and move [Grab blue side of log to drag anywhere.]
Resizer [Grab the arrows that appear east, southeast, and south.]
Browser-compatible [Ie 6+, Opera 9.5+, FF 2+, Chrome 1+, Safari 3+ supported.]
Usage
Main Usage
log.out(string) [primary function, takes any html string.]
log.clearUiLog() [clears the log, just as the pencil icon does.]
Optional Usage
log.positionLog(int) [dynamic position of log if you want, positions 1-4. See options below.]
log.hideUiLog() [dynamic hiding of log.]
log.showUiLog() [returns log to last settings.]
Options
Starter Options
position [integer (1-4), default position, top, bottom, left, right. Default is 2.]
zebraColor [hex color, the color of the zebra stripe. Defaults shown.]
bgColor [hex color, the color of the background and opposite zebra stripe. Defaults shown.]
minimized [boolean, to minimize the log at first, or not. Default is false.]
width [integer, width of log. Default is 570, min is 100]
height [integer, height of log. Default is 400, min is 80]
Other Options
resizer [boolean, tells log to use a resizing ui. Default is true.]
snap [boolean, to have the log snap to the center of 4 wall sides. Default is true, but no snapping puts in on the left side.]
logNumbers [boolean, to show enumeration of log entries. Default is false.]
opacity [0-1.0, to show opacity to see the view beneath. Default is 0.9.]
outerPadding [integer, distance from side of browser to settle when snapping. Default is 2.]
innerPadding [integer, padding on the left side of log. Default is 2.]
Detailed Options
pixelSnap [integer, Snap sensitivity. How far, in pixel from the wall before snap occurs? Default is 200.]
pixelThreshhold [integer, Snap sensitivity. How far, in pixel from other walls must you be for a snap to register? Default is 50.]
controlPanelBorder [css, you can override the basic styling. If you do this, then set the values in the code.]
controlPanelBackground [css, you can override the basic styling. If you do this, then set the values in the code.]
Changes from mooTools
No resizer... [Instead an intuitive resize cursor appears on right, bottom, and southeastern edges.]
No style on minimized log... [Too much hassle.]
No animation [Way too much hassle, and faster without it.]
Future Fixes
Using position:fixed [For ie7 and other browsers, this will stop the flickering as the scrolling causes a log redraw.]
Hints
Reduce flickering [By setting opacity to 1 if you plan on moving the log around a lot.]
Tests
iteration 1 (runs 50 times)
iteration 2 (runs once, but does 500 things)
show html output 1
show html output 2
copy html on screen and put it in log.