Making an item visible/invisible on page

Show or hide a progress bar

[Bluenose]

Hello

I have a Web page that allows users to upload their files to a server.

I have the following TextBox (VB.NET): :

 Label2.Text = "Please upload your file(s)"

The CSS that adds style to Label2.Text is:

.upload
{
color:#05C6FC;
font-family:'Segoe UI','trebuchet ms', 'News Cycle', Helvetica;
font-size:1.1em;
margin-left:0;
    margin-top:30px;
 text-align:center;
    position: Absolute;
}

When the 'Upload' button is clicked, I would like to replace that 'Please upload your file(s)' text (that is, to make it invisible) with a Progress Bar. The Progress Bar itself is in JavaScript (it shows the percentage of the file being uploaded), but is stylised in CSS as follows:

#numValue 
{
  color: #05C6FC;
  font-family: 'Segoe UI','trebuchet ms', 'News Cycle', Helvetica;
  font-size: 14px;
  padding-top: 10px;
  text-align: center;
 }

#prog
{
  color:#05C6FC;
  margin-left:100px;
  width:250px;
  margin-left:auto;
  margin-right:auto;
  text-align:center;
}

 p.progress 
 {
  color: #05C6FC;
  font-family: 'Segoe UI','trebuchet ms', 'News Cycle', Helvetica;
  font-size: 14px;
  padding-top: 25px;
  text-align: center;
}

I am still working on positioning the bar in page but I just wondered if it is possible to do in CSS what I have indicated above? The Progress Bar would need to be invisible at all times until the 'Upload' button has been pressed; at all other times, the 'Please upload your file(s)' would be shown.

If it is possible to do that in CSS, I can post the rest of the code.

Thank you.

[not2easy]

Hello Bluenose and welcome to the forums. Funny you should ask this now because there was a nice discussion this weekend about toggle methods to hide or show text that might help you out, next door in the HTML forum: [webmasterworld.com...]

I hope it helps you, but we're here if you need some fine tuning.

[lucy24]

In CSS terms, are you asking about
display: none
or about
visibility: hidden
(which in CSS3 is essentially identical to "color: transparent")
?

The first -- they're easy to confuse, ask me how I know -- means "draw the whole page exactly as if the element didn't exist". The second means "it's there, but nobody can see it".

[Bluenose]

Talk about 'rapid response'!

Many thanks to you both. I will pop over to the HTML forum - thanks not2esy - and explore 'visibility' hidden, Lucy.

The text would be visible until a button was clicked, in which case it would become, I suppose: 'visibility:hidden' and something else, namely the Progress Bar would become visible. I suppose normally, then, that that, too would have its 'visibility: hidden'.

Thanks again to you both!