473,289 Members | 2,040 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,289 software developers and data experts.

Hidden doesn't hide table borders

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];
}
}
Jul 23 '05 #1
7 2710
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


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

--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)
Jul 23 '05 #2
In article <98**************************@posting.google.com >,
ga**@labdata.com (NeverLift) wrote:
The style
"visibility:hidden" in the body tag almost does it


Have you experimented with "display:none" ?

Cheers Martin

--
To reply by e-mail remove the "waste bin".
Jul 23 '05 #3
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.}

*** Sent via Developersdex http://www.developersdex.com ***
Don't just participate in USENET...get rewarded for it!
Jul 23 '05 #4
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.


[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

--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)
Jul 23 '05 #5
JRS: In article <98**************************@posting.google.com >, seen
in news:comp.lang.javascript, NeverLift <ga**@labdata.com> posted at
Sat, 29 May 2004 12:51:18 :
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.

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.


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.

--
© John Stockton, Surrey, UK. ??*@merlyn.demon.co.uk Turnpike v4.00 MIME. ©
Web <URL:http://www.merlyn.demon.co.uk/> - FAQish topics, acronyms, & links.
Check boilerplate spelling -- error is a public sign of incompetence.
Never fully trust an article from a poster who gives no full real name.
Jul 23 '05 #6
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}

*** Sent via Developersdex http://www.developersdex.com ***
Don't just participate in USENET...get rewarded for it!
Jul 23 '05 #7
Last post was sloppy, sorry. Not "length", of course, but "fileSize".

Just realized that is IE specific, will switch to some other property.
Such as "complete"? Duh.
Jul 23 '05 #8

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

13
by: Dan R Brown | last post by:
I have a large form that is generated dynamically in a jsp using xml / xslt. So, to break up this form into several "tabbed" sections, I break up the form using <div> tags. Each <div...
2
by: Jon | last post by:
Hi all, I am trying to create a page that contains a number of div elements, with links on the left side of the page allowing the user to select which div to display. Some of the pages contain...
4
by: NeverLift | last post by:
I've searched around and don't find the following incident discussed specifically. First, a comment from an experience programmer new to JavaScript: While I am new to javascript, I've...
1
by: le_sloth | last post by:
Hi I'm generating a series of reports from an application that will be published on a client's intranet. The idea is that each of these reports is arranged into major product groups,...
4
by: Konrad Viltersten | last post by:
As it isnow i have to use a syntax for my tables as: <table class = "some" border> and/or <table class = "some" noborder> Now, what i'd like to do is to make that border-thingy...
3
by: MLH | last post by:
How does one create a hidden module in Access 97? Why might one do so?
4
by: Magnus Blomberg | last post by:
Hello! I have a problem when using a hidden field to send a value to the server. Below you can see my code in simplyfied versions. What I'm trying to do is: 1. The user browses for a picture...
1
by: msg2ajay | last post by:
hi, i am working on <div> i have to hide some part of the table. I am not able to hide that table part can anybady tell me where is the error. <html> <head> <script...
3
by: KNN | last post by:
Hi I have some tables with hidden attribute set to 1. In the query desgn view , I do not see these tables as expected. But, If I choose the query wizard to create a new query, then i do see...
0
by: MeoLessi9 | last post by:
I have VirtualBox installed on Windows 11 and now I would like to install Kali on a virtual machine. However, on the official website, I see two options: "Installer images" and "Virtual machines"....
0
by: DolphinDB | last post by:
The formulas of 101 quantitative trading alphas used by WorldQuant were presented in the paper 101 Formulaic Alphas. However, some formulas are complex, leading to challenges in calculation. Take...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: Aftab Ahmad | last post by:
Hello Experts! I have written a code in MS Access for a cmd called "WhatsApp Message" to open WhatsApp using that very code but the problem is that it gives a popup message everytime I clicked on...
0
by: Aftab Ahmad | last post by:
So, I have written a code for a cmd called "Send WhatsApp Message" to open and send WhatsApp messaage. The code is given below. Dim IE As Object Set IE =...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.