Another WTV JS Bug Script
Note: If you see a reload image flash for an instant at the top of this screen, that means the JS bug detection script is working OK. If the reload image does not disappear shortly, the infamous "WebTV JS Bug" is present. Just reload (Cmd-R) until the image disappears!
This bug script consists of a simple javascript "onLoad" event handler in the body tag and a named (id) bug warning image at the top of the page.
The script for the body tag and image tag is:
<body bgcolor="#ccccff" onload="jsbug.style.visibility='hidden'"> <img id="jsbug" src="http://community-2.webtv.net/jaxred/images/scrapbookFiles/importD54.gif">
This script works by setting the reload warning image visibility to "hidden" when the document is loaded as long as javascript is "enabled"; and, allows the image to be "visible" when the WTV JS Bug "disables" the body tag javascript onload event handler.
The script can also be written with the onload event handler in the image tag like this:
<body bgcolor="#ccccff"> <img src="http://community-2.webtv.net/jaxred/images/scrapbookFiles/importD54.gif" onload="this.style.visibility='hidden'">
Note, that later MSN-TV upgrades (2.6.1 - 2.7) allows the image to be directly accessed without using a "named" division or the "document.all" collection indexing array for visibility. Also, this script does not use noframes tags.
But; as noted above, these scripts sometimes cause an objectionable flashing of the bug image. You will get the momentary bug image flash-over if the image is cached in your browser from previous visits during your current browsing session. But, when you initially access this webpage, the body content completely loads before the bug image file, so the the body tag onload event handler hides the image before it flashes on the page.
The momentary flash of the reload image is really not a good thing, because it may alarm a beginner who is not familiar with the way the bug scripts work! The momentary flash of the bug image is because the image tag immediately follows the body tag at the top of the webpage ahead of the page title heading, and appears briefly on the webpage before the body contents completely load and the "onload" event (handler Object) is triggered to set the image visibility to hidden.
Recently, The Professor, aka READYTEDDY@webtv.net, posted a script in the news:alt.discuss.clubs.public.arts-lit.design.tabledoc1 NG about problems using basic bug alerts in CSS stacked divisions - the alerts are buried under stacked layers unless a special script and CSS variation The Professor posted is used! The Professor's webpage is at: http://d21c.com/leprofesseur/g/css-js-bug.html.
Basically, The Professor's script calls a function in the body tag onload event handler that moves the bug warning image to a CSS "negative" position above the webpage contents when javascript is enabled. When the JS bug strikes, javascript is disabled, which causes the bug image to be displayed at the top of the webpage.
When using The Professor's basic script concept with CSS stacked divisions, you just have to put your image tag inside a positioned division and set the "z-index" above all the other stacked divisions, like this:
<body bgcolor="#ccccff" onload="jsbug.style.visibility='hidden'"> <div id="jsbug" style="position: absolute; top: 0px; left: 0px; z-index: 3;"> <img src="http://community-2.webtv.net/jaxred/images/scrapbookFiles/importD54.gif"> </div> <div style="position: absolute; top: 0px: left: 0px; right: 544px; z-index: 2; background-color: blue;"> ... another positioned division (layer) content here ... etc </div>
When the WTV JS bug strikes, javascript will be disabled so the body tag onload event handler will not hide the bug image division, which will be displayed above all the other stacked divisions by the top "z-index" position. If you do not use a stacking index (z-index) value to place the bug image division above other CSS positioned content, your bug warning image will be buried under other CSS layers! In this script, I moved the "id" attribute to the image container division.
This variation provides a solution to the "instant flash" problem in the first script above. As suggested by R_Endymion@webtv.net, Just put the "jsbug" positioned division code at the bottom of the webpage at the end of the body contents, so the image tag will be the last code to be loaded and executed on the webpage. This will allow the onload handler to hide the image before it loads (flashes) on the top of the webpage.
The advantage to using a CSS positioned division is that the bug image division code can be located at the bottom of the webpage so you do not get the premature image loading flash-over! The only objection to this approach is that the positioning of the bug image division covers the top few lines of text, if you have a large image, when the JS bug strikes; but, so what - you just heed the reload message to clear the bug image from webpage content!
Note: I put comment tags in the source code to show options for the image tag at the top of the page, or the division at the bottom of the webpage as discussed above. Just put enclosing comment tags, or remove the code for the option you don't like; and, be sure to remove the comment tags around the option code you want to use.
Test these scripts and any variations you devise to be certain they are reliable! The bug strikes when links are clicked; so, to get the WTV JS bug for testing this webpage script, put a link to this webpage in an email to yourself, or put a link on a webpage, or use a test post at the news:alt.discuss.test NG. Then click the test link at intervals until you get the WTV JS bug to appear.
And, also; as everyone is probably thinking the bug warning division in the second script above could contain a simple text warning, rather than an image, with visibility turned on by the occurance of the JS bug and the failure of the body tag onload event handler to hide the bug warning division text. The simple text warning says to reload the document until the browser's javascript error is "reset", javascript is "enabled", and the script turns off the warning division visibility. Write the script like this:
Body tag at top of document:
<body bgcolor="#ccccff" onload="jsbug.style.visibility='hidden'">
Bug warning division at bottom of document:
<div align="center" id="jsbug" style="position: absolute; top: 0px; left: 0px; z-index: 3;">WARNING: WTV JS Bug - Please Reload (Cmd-R)!</div>
Note: Remember to set the z-index property value of the bug warning division above any other stacked divisions! Also; it is not necessary, and even redundant, to use the noframes tags with these type of scripts.
There are many more viable variations to this basic concept. Customize and test the basic scripts for your own personal use. I'm sure others can follow-up on this basic bug script concept and the Professor's script for solving the problems with CSS positioned webpage content, and devise many more very effective bug scripts; but, remember: for simple webpages, the simplest bug script to use is with an image or warning text inside noframes tags!
JaxRed
The Thunderstone WebTV Source Code Viewer