Hidden doesn't hide table borders

N

NeverLift

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.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];
}
}
 
E

Evertjan.

NeverLift wrote on 29 mei 2004 in comp.lang.javascript:
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?
No

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
Click to expand...

Do not use css-styles and older attributes together.
[this is your problem]

set the <table border=0

pack all styles in the <style> and use css classes

Do not use OnLoad="javascript:startup()" but
OnLoad="startup()"

Do not use LANGUAGE="JavaScript" but
type="text/javascript"

==============================

<script type="text/javascript src="scriptfile.js">
</script>

<style type="text/css">
body {visibility:hidden;}
.mytable {border:solid 1px black;width:85px;}
.mytable td {border:dotted 1px black;text-align:center;padding:0;}
</style>

</head>
<body onLoad="startup()">
<table id="bprods" class="mytable" border="0" rules="rows"
cellspacing="0" cellpadding="0">
etc...
 
G

Gary Marquart

Well, what is interesting is that, in that code itself, unless one
specifies border="0" in the page definition -- they still bleed through
the hidden status of the body! Further, the tables continue to have no
borders after the startup completes and Hidden is changed, in spite of
the style entry -- unless the script explicitly sets the border value
back to some non-zero value.

So it seems my workaround is still needed, so I'll stick with what
works. Not a big deal, but I consider that allowing ANY of the content
of a hidden body to be rendered visible to be a bug. (Haven't tried it
in NN, just IE 6.0.)

But I thank you for clearing up some of my out-of-date context.

{aka NeverLift}

(frequently confused, but never deprecated)

{Some day I'm going to track down Peer and reset HIS connection.}
 
E

Evertjan.

Gary Marquart wrote on 30 mei 2004 in comp.lang.javascript:
Well, what is interesting is that, in that code itself, unless one
specifies border="0" in the page definition -- they still bleed through
the hidden status of the body! Further, the tables continue to have no
borders after the startup completes and Hidden is changed, in spite of
the style entry -- unless the script explicitly sets the border value
back to some non-zero value.
Click to expand...

[please quote a relevant pert of the posting you answer upon, for the sake
of other readers. This is not email]

I always specify border=0 except when testing for my own eyes only.

Did you try to set [as sugested by someone else]

body {display:none;}

instead of the visibility?

It seems a much better choice in your case
 
D

Dr John Stockton

JRS: In article <[email protected]>, seen
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?
Click to expand...

No.

Obviously you do not understand the tools that you are using for News.

Google can be used in a satisfactory manner for News; but if you have a
computer of your own you would do better, IMHO, to install a proper
newsreader and use a proper news service using News protocols.


BTW: I'm on IE 6.0.
Click to expand...

So who cares? What is important is what the readers of your page are
using. Here (see FAQ, regularly posted) we assume, as default, that
script is for the Internet, and should therefore be written for any
reasonably recent browser. That the failure is visible in IE 6.0 may be
significant; that you use 6.0 is not. If you are composing for an
intranet which is 6.0 only, you should say so.



A low-grade trick to achieve the appearance of what you want *might* be
to start the page with a very tall blank element - conceivably a 1*1 GIF
with height=9999 - and to remove or shrink the element when all else is
ready.
 
G

Gary Marquart

Applause, applause, for Martin. Setting display works like a charm,
but do ignore what the book says about the default value.

Put "display:none" in the BODY style, restored the table attributes to
get them they way I want them in the final result -- i.e., with borders.
Removed resetting the borders from the script.

Inserted strategic alerts to halt the startup process so I could see the
incremental effects:

On load, screen space is totally white. No table borders, nothing.

During the page formatting, had occasion to set the body background
color. Whether I used

document.body.bgColor="#f0f0f0";
or
document.body.style.backgroundColor="#f0f0f0";

the color was immediately visible. I can live with that :). (Theory:
If I were using a background image spec, bet that would have been
visible then as well.)

Now, to make the page visible, used the CSS manual's declaration of the
default value of display, "inline". Curious effect: The page was
rendered correctly except it was not centered within the window, but
rather hard left. Everything within the body box was correctly placed
relative to that box, but the box was againsat the left edge. Narrowing
the window obtained scroll bars like it should (was checking that the
browser didn't decide to start narrowing elements and word wrapping - at
this stage I trust nothing to be like I expect . . .)

But setting display to "block" created the page exactly as expected.

And away we go.

BTW: Although a relative newbie (a couple of weeks pushing
HTML/javascript/DHTML/DOM around, no formal training) (not new to
programming per se - 40+ year veteran of the wars), I've gotten pretty
deep into the few parts of this environment that I needed to stretch.
One of these: Precaching images, and also not allowing the script to
progress until all were loaded, whether the browser found them in its
local cache or had to go to the server. With IE's multithreading of
server requests -- and I assume NN does the same -- this is kinda cute
to accomplish, especially since I fully expect some of the images to be
missing, and that the downloading is in process or that the image
doesn't exist on the server are indistinguishable states; both give a
length of -1. To those of you who have done it before, it may be
considered a Grade 2 exercise. But I'll post if there's a request.

{aka NeverLift}
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Can someone tell me if this a real tracker? Or is it one designed to show you a different message at certain times, ie. acting like one? 0
Only one table shows up with the information 2
Filter table rows based on multiple checkboxes value 2
Sort by number of characters 1
How to add dropdown selected data to table using jquery 2
How to have two html audio players on one page? 0
Image shifts to the right when export the page to pdf 4
I need help fixing my website 2

Members online

No members online now.
Total: 27 (members: 0, guests: 27)
Robots: 232

Forum statistics

Threads
473,756
Messages
2,569,535
Members
45,008
Latest member
obedient dusk

Latest Threads

Top