473,659 Members | 3,592 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

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:hid den" 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="JavaS cript" src="scriptfile .js">
</SCRIPT>
<title>Pricin g</title>
<STYLE type="text/css">

</STYLE>

</head>
<body style="visibili ty: hidden" OnLoad="javascr ipt: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><inpu t type="text" size="1" maxlength=2 value="1"
onkeyup="setpri ce(this);" onblur="checkpr ice(this);"><td
class="pr">99.9 9</tr>
<tr><td><inpu t type="text" size="1" maxlength=2 value="1"
onkeyup="setpri ce(this);" onblur="checkpr ice(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.getEl ementById("bpro ds") ) {
for (var i=1; i<bprods.rows.l ength; 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.repl ace(/[^0-9.]/g,''));
document.all[whereis].innerText =
(Number(documen t.all[whereis-1].value)*prices[whereis]).toFixed(2);
}
}
// format the page
document.body.b gColor="#f0f0f0 ";
document.styleS heets[0].addRule("INPUT ","border:solid ; border-width:
1; border-color: purple; font-family: Arial; font-style: italic;
font-weight: bold; color:purple");
document.styleS heets[0].addRule("TD.pr ","font-family: Arial
font-style: italic; font-weight: bold; color:purple");
document.styleS heets[0].addRule("BASEF ONT","font-family: Times;
font-size: 10pt; color:darkblue; font-style: italic; font-weight:
bold");
document.body.s tyle.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.sourceInde x+1].innerText='';
}
else {
document.all[here.sourceInde x+1].innerText=(Num ber(vvv)*prices[here.sourceInde x+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.sourceInde x+1].innerText=pric es[here.sourceInde x+1];
}
}
Jul 23 '05 #1
7 2748
NeverLift wrote on 29 mei 2004 in comp.lang.javas cript:
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:hid den" 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="javascr ipt:startup()" but
OnLoad="startup ()"

Do not use LANGUAGE="JavaS cript" but
type="text/javascript"

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

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

<style type="text/css">
body {visibility:hid den;}
.mytable {border:solid 1px black;width:85p x;}
.mytable td {border:dotted 1px black;text-align:center;pa dding: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.co m (NeverLift) wrote:
The style
"visibility:hid den" in the body tag almost does it


Have you experimented with "display:no ne" ?

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.javas cript:
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.c om> 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.demo n.co.uk Turnpike v4.00 MIME. ©
Web <URL:http://www.merlyn.demo n.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:no ne" 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.b gColor="#f0f0f0 ";
or
document.body.s tyle.background Color="#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 indistinguishab le 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
40717
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 style="display:none"> can be displayed by setting the style attribute to "display:", or hidden with "display:none". This gives the illusion that the person filling out the form is switching from page to page...without the overhead of extra hits on the server,...
2
5286
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 tables with border styles used to block off the columns and the headers, but not the individual rows. The pages will be displayed using IE 5.5 and later in the finished app. Now to the problem, which is a little awkward to describe:
4
1951
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 programmed in a dozen other languages for decades, and now have been working in javascript intensively for several weeks. My first comment -- which has nothing to do with this problen -- is on how its richness makes it so difficult to provide adequate...
1
4003
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, sub-groups and product lines. All of this is to be in a table with one header. Example here:
4
8929
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 appear/desappear using javascript. Is it solvable that way? I tried to rely on CSS but i didn't find any good info on this matter...
3
3737
by: MLH | last post by:
How does one create a hidden module in Access 97? Why might one do so?
4
3623
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 at the network from their computer using control File1. 2. The user clickes the button Commit picture (with id CliBtn) a. The script is running at the client to get the sharename of the file
1
6432
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 type="text/javascript"> function callme(){ document.getElementById("hid").style.visibility="visible"; }
3
2878
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 these hidden tables. How to hide these tables in the query wizard. Thanks
0
8428
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
0
8851
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
0
8748
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
1
8531
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
0
7359
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
0
5650
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
0
4175
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
0
4335
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
2
1978
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.

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.