[Last Call] Learn how to a build a cloud-first strategyRegister Now

  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 287
  • Last Modified:

Need browser-independant "please wait" layer

I'm kind of an IE-only web developer, but now I need something really browser independant that will work across a wide range of modern (less than 4 years old) browsers.

There's a file upload thing on my web page. <input type="file"....>, and when the submit button is clicked, the page just sits there, apparently frozen, until the upload completes. The moment the upload button is clicked, i want some kind of div/span/layer to pop up front and center (NOT a whole new browser window), that says "please wait...blahblah", and then goes away once the page posts back saying the upload is done.
  • 4
  • 2
1 Solution
It is very difficult for the client to ascertain file upload size and packet tramission rates.

Here's a generic sample of a popup window to simulate a progress bar when the submit button is clicked

<input type="submit" on Click="window.open('progress.htm')">

then of course you can close the window once the finsihed upload destination page has loaded.

(maybe even with a timer if you need it)    example:

<BODY onLoad="setTimeout(window.close, 5000)">

Other than that is you're using PHP/ASP or similar you can always find some file upload progress bars to suit your need.

Hope this helps

SweatCoderAuthor Commented:
Onyx23, if you read my original post you'll see that I do NOT want to pop open a new browser window. I want a layer/div/span, either embedded in the page, or floating on top of the page. I've done this very thing for IE, but it uses window.createPopup(), which doesn't work on other browsers. Nor do I need to get upload size or transmission rates. also, it's not "on Click", it's "onClick".

So I'm not sure you're understanding what I need. The upload works fine, including processing it on the server side. I am merely looking for a client-side "please wait" layer that displays until the postback occurs.
Uuuuh...   ok

Use a layer then.........
// build you layer
<div id="yourLayer" style="position:absolute; width:??px; height:??px; z-index:??; left: ???px; top: ???px; visibility: hidden;"></div>

onSubmit= "showHideLayers('yourLayer','','show')"

onLoad= "showHideLayers('yourLayer','','hide')"
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

The on Click was a simple mistake and since you caught it it should not have been such a big deal to you.

For someone asking help you seem a little abrasive with your responses.
There are BETTER approach methods  and MATURE ways to address and solicit help.
SweatCoderAuthor Commented:
Onyx23, "div" is IE-specific, right? As mentioned in my original post, I need something that works in IE, Netscape, Firefox, Mozilla, Mac browsers, etc. So the code I'm looking for will have browser checks and do the right thing, accordingly.

I already know how to do the IE stuff for this--I've done that before.
AQll you have to do is:

Access the HTML inside a DIV tag (or any other tag for that matter) by writing:

document.all.divID.innerHTML = "your new text"

Where divID is the ID of the DIV tag you want to change. Or you can do it this way whichever YOU prefer :

document.all["divID"].innerHTML = "your new text"

The  "divID" is the evaluated as a string which will make it CROSS BROWSER capable.

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 4
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now