Brady Bunch Head Example

view on wiki.c2.com
last modified: 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.)

Loading...