I posted a very long message regarding my experiences with JavaScript,
one reply was posted asking I post an example of the problem -- and
both are gone! Is there a moderator that removes such stuff?
In any case, here is the issue in brief:
I want to keep the page invisible while my onload script decides how
to format it, setting colors, downloads images, etc. The style
"visibility:hidden" in the body tag almost does it -- except non-zero
table borders still show. The workaround was to set them to zero in
the page itself and use javascript to set them to the desired value at
the same time that it makes the page visible.
But shouldn't the borders be rendered invisible by the body style
without that?
Here are stripped versions of the html and the script file it loads.
Copy both to your disk (watch out for wraparound line breaks!), naming
the script file "scripfile.js", doubleclick the .html file, and you'll
see it happen, since I put in an "alert" at the top of the script to
let you view the page before the startup code formats it and makes it
visible.
BTW: I'm on IE 6.0.
example.html:
-------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/1998/REC-html40-19980424/loose.dtd">
<html>
<head><meta content="text/html; charset=UTF-8">
<SCRIPT LANGUAGE="JavaScript" src="scriptfile.js">
</SCRIPT>
<title>Pricing</title>
<STYLE type="text/css">
</STYLE>
</head>
<body style="visibility: hidden" OnLoad="javascript
:startup()">
<basefont>
<table id="bprods" align="center" width="85" border="3" rules="rows"
cellspacing="0" cellpadding="0">
<colgroup align="right" valign="center">
<col width="35">
<col width="45">
<tr><td>Qty<td>Price</tr>
<tr><td><input type="text" size="1" maxlength=2 value="1"
onkeyup="setprice(this);" onblur="checkprice(this);"><td
class="pr">99.99</tr>
<tr><td><input type="text" size="1" maxlength=2 value="1"
onkeyup="setprice(this);" onblur="checkprice(this);"><td
class="pr">231.42</tr>
</table>
</body>
</html>
scriptfile.js:
--------------
// global variables
var prices = new Array();
var entered;
function startup() {
alert("startup");
// in the real page, there are graphics being downloaded, scripting of
them to be run,
// etc., that I don't want the user to see until it's all set up.
// also, the actual script selects the styles to apply, rather than
just applying
// the one set of styles here, and I don't want to display the raw
page without
// formatting while the graphics are being set up. the process of
setting up
// the graphics also chooses the styles, so I can't set them until the
downloads
// are complete. and yes, I figured out a way to wait for them to
complete,
// that's not germane to this problem.
// pick up the data for computing prices for selected quantities
var whereis;
if (document.getElementById("bprods") ) {
for (var i=1; i<bprods.rows.length; i++) {
whereis=bprods.rows[i].cells[1].sourceIndex;
// get rid of commas, any currency sign, other text not part of the
price
prices[whereis] =
Number(document.all[whereis].innerText.replace(/[^0-9.]/g,''));
document.all[whereis].innerText =
(Number(document.all[whereis-1].value)*prices[whereis]).toFixed(2);
}
}
// format the page
document.body.bgColor="#f0f0f0";
document.styleSheets[0].addRule("INPUT","border:solid; border-width:
1; border-color: purple; font-family: Arial; font-style: italic;
font-weight: bold; color:purple");
document.styleSheets[0].addRule("TD.pr","font-family: Arial
font-style: italic; font-weight: bold; color:purple");
document.styleSheets[0].addRule("BASEFONT","font-family: Times;
font-size: 10pt; color:darkblue; font-style: italic; font-weight:
bold");
document.body.style.visibility="visible";
}
function setprice(here) {
// get the value entered, if it is invalid, get rid of the
non-numerics -- which
// puts it back to the value before that last keystroke, so the price
// already on the page is valid -- issue an alert, and exit.
// otherwise, get the selling price and display it.
entered = here.value;
var vvv = entered.replace(/[^0-9]/g,'');
if (entered != vvv && entered != '') {
here.value=vvv;
alert("Please type a number");
}
else {
if (entered == '') {
document.all[here.sourceIndex+1].innerText='';
}
else {
document.all[here.sourceIndex+1].innerText=(Number(vvv)*prices[here.sourceIndex+1]).toFixed(2);
}
}
entered = '';
}
function checkprice(here) {
// called when focus disappears from the current INPUT element.
// if the entry is null or zero, make it 1 and restore the unit
price.
if (entered == '' && (here.value == 0 || here.value == "") ) {
here.value=1;
document.all[here.sourceIndex+1].innerText=prices[here.sourceIndex+1];
}
}
