Need browser-independant "please wait" layer

Posted on 2006-06-02
Last Modified: 2008-03-06
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.
Question by:SweatCoder
    LVL 3

    Expert Comment

    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="'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

    LVL 11

    Author Comment

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

    Expert Comment

    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')"
    LVL 3

    Expert Comment

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

    Author Comment

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

    Accepted Solution

    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.

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Looking for New Ways to Advertise?

    Engage with tech pros in our community with native advertising, as a Vendor Expert, and more.

    This article shows how to create and access 2-dimensional arrays in JavaScript.  It includes a tutorial in case you are just trying to "get your head wrapped around" the concept and we'll also look at some useful tips for more advanced programmers. …
    This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
    The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
    The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

    760 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    9 Experts available now in Live!

    Get 1:1 Help Now