andy-h
2/12/2014 - 8:11 PM

Template for an on-page JavaScript log

Template for an on-page JavaScript log

log.htm
content_copyfile_download
<html>
<head>
	
	<title>Log</title>
	
	<style type="text/css" media="all">
		#log {
			padding:0.5em;
			overflow:auto;
			font-family:"Envy Code R", "Consolas", "DejaVu Sans Mono", "Anonymous Pro", "Courier New", monospace;
			font-size:80%;
			background-color:#EEE;
			color:#000;
		}
		#log div {
			transition-property:background-color, color;
			transition-duration:0.75s, 0.25s;
			transition-delay:0.01s, 0.2s;
		}
		#log div:hover {
			background-color:#AAA;
			color:#FFF;
		}
	</style>
	<script type="text/javascript">
		function log(entry, appendToTop){
			var log = document.getElementById("log"),
				existing = log.innerHTML;
			log.innerHTML = appendToTop ? "<div>"+entry+"</div>"+existing : existing+"<div>"+entry+"</div>";
		}
	</script>
	
</head>
<body>
	
	<div id="log"></div>
	
</body>
</html>