Brady Bunch Head Example

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.)