Welcome to WebmasterWorld Guest from 54.80.188.87

Forum Moderators: not2easy

Message Too Old, No Replies

Making an item visible/invisible on page

Show or hide a progress bar

     
3:42 am on Mar 14, 2016 (gmt 0)

New User

joined:Mar 14, 2016
posts: 2
votes: 0


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.
4:12 am on Mar 14, 2016 (gmt 0)

Administrator from US 

WebmasterWorld Administrator not2easy is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Dec 27, 2006
posts:4017
votes: 246


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.
4:13 am on Mar 14, 2016 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:Apr 9, 2011
posts:15183
votes: 681


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".
4:53 am on Mar 14, 2016 (gmt 0)

New User

joined:Mar 14, 2016
posts: 2
votes: 0


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!
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members