BradyBunchHeadExample

Last edit March 8, 2013
This is a sample set of 3 files to demonstrate that a non-HOF version of the BradyBunchGridDiscussion example is technically feasible using existing browsers. It uses a "refresh" META tag in the HEAD section of an HTML document to create cycles. --top

File: brady_1.html:

	<body>
	<iframe width="400" height="30" src="brady_2_short.html" scrolling="No">
	</iframe>
	<iframe height="30" width="400" src="brady_2_long.html" scrolling="No">
	</iframe>
	<iframe height="30" width="400" src="brady_2_long.html" scrolling="No">
	</iframe>
	<iframe height="30" width="400" src="brady_2_long.html" scrolling="No">
	</iframe>
	<iframe height="30" width="400" src="brady_2_long.html" scrolling="No">
	</iframe>
	<iframe height="30" width="400" src="brady_2_short.html" scrolling="No">
	</iframe>
	<iframe height="30" width="400" src="brady_2_long.html" scrolling="No">
	</iframe>
	<iframe height="30" width="400" src="brady_2_short.html" scrolling="No">
	</iframe>
	<iframe height="30" width="400" src="brady_2_long.html" scrolling="No">
	</iframe>
	<iframe height="30" width="400" src="brady_2_short.html" scrolling="No">
	</iframe>
	<iframe height="30" width="400" src="brady_2_short.html" scrolling="No">
	</iframe>
	<iframe height="30" width="400" src="brady_2_short.html" scrolling="No">
	</iframe>
	</body>

File brady_2_short.html:

	<html>
	<head>
	<meta id="meta01" http-equiv="refresh" content="1">
	<script language="javascript">
		function bars() {   
			// draw simple sample bar chart with value
			var i = 0;
			var useBar = '';
			var barCount = Math.random() * 100;
			barCount = Math.round(barCount);
			for (i=0; i <= barCount ; i++) {
				useBar += '|';
			}
			return(useBar + ' ' + barCount);
		}
	</script>
	</head>
	<body style="margin-top:1" bgcolor="#eeeeff">
		<b>
		S:
		<script language="javascript">
			document.write(bars());
		</script>
		</b>
	</body>
	</html>

File: brady_2_long.html:

	<html>
	<head>
	<meta id="meta01" http-equiv="refresh" content="5">
	<script language="javascript">
		function bars() {   
			// draw simple sample bar chart with value
			var i = 0;
			var useBar = '';
			var barCount = Math.random() * 100;
			barCount = Math.round(barCount);
			for (i=0; i <= barCount ; i++) {
				useBar += '|';
			}
			return(useBar + ' ' + barCount);
		}
	</script>
	</head>
	<body style="margin-top:1" bgcolor="#ffffdd">
		<b>
		L:
		<script language="javascript">
			document.write(bars());
		</script>
		</b>
	</body>
	</html>

Copy them to the same folder and launch brady_1.html.
Notes

I don't claim it "better" than the HOF version (for existing browsers). But it's an alternative to consider if say the HOF version has a memory leak in certain browser versions.

This has two "panel" files, one with a short refresh cycle and one with a longer one. Ideally we'd want the period to be dynamic so that we don't need a separate file per speed type (example: "panel.html?speed=4"). However, it's tricky (or vendor-specific) to change META tags in client JS, so that's not addressed here.

It would be easier to do for server-generated code, which would output the META tag as http text. Most of my prior uses of the refresh tag were from server-side anyhow because it was stats and/or events stored in a constantly-changing database, such as store orders or help-desk-tickets. (Those cases were generally refreshed longer than a minute, sub-minute refreshes would be over-kill.)