Solved

Show ALERT-LIKE window for 10 seconds?

Posted on 2004-07-30
10
835 Views
Last Modified: 2012-06-27
Using JavaScript, I need to show an Alert-LIKE window for 10 seconds then automatically close it without slowing movement to the NEXT webpage. We're developing a web-based corporate application. Our users are complaining about the lack-of-visual-feedback when moving to certain web-pages which take a long-time to load (10-15 seconds). Their request ... the instant a hyperlink is clicked, they want an alert-like message to show for 10 seconds. However, the alert-like message CANNOT require a user-click (it must simply time out and close itself) and it CANNOT delay the movement to the next web page!

Anyone have any suggestions?

Solutions must work in IE 5.5.





0
Comment
Question by:volking
  • 2
  • 2
  • 2
  • +4
10 Comments
 
LVL 8

Expert Comment

by:trevorhartman
ID: 11681748
I would use a pop up with a setTimeout("this.close()", 1000 * 10); in the source

-Trevor
0
 
LVL 4

Assisted Solution

by:reggi635
reggi635 earned 100 total points
ID: 11681788
Why not something like this:

<script>
      function Showprocessor() {
            document.all.VisibleForm.style.display = "none";
            document.all.UpdateMessage.style.display = "block";
            //document.frm.submit();
      }
</script>

<div id="UpdateMessage" style="display: none">
      <table height="200px" border="0" align="center">
            <tr>
                  <td height="75px">&nbsp;&nbsp;</td></tr>
            <tr>
                  <td valign="middle" align="center">
                        <img src="http://view.atdmt.com/CLH/view/trblftru00701185clh/direct/01/241204039" width="156" height="14" border="0">
                  </td>
            </tr>
            <tr>
                  <td valign="middle" align="center">
                        Processing.&nbsp;&nbsp;Please wait...
                  </td>
            </tr>
      </table>
</div>

<div id="VisibleForm">
      <!-- <form name="frm" action="URL" method="post"> -->
            <input type="Button" onclick="Showprocessor()" value="CONTINUE">
      <!-- </form> -->
</div>

You can add the same meesage that needs to show on the popup in the hidden section when its loaded.

REGGI
0
 
LVL 8

Expert Comment

by:trevorhartman
ID: 11681811
on a redirect sometimes the window is blank for a large part of the time, so that might not work so well...
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 36

Assisted Solution

by:Zyloch
Zyloch earned 100 total points
ID: 11681858
If you want it to look like an alert, here are some tips:

Through experimenting, I found that a color quite close to the alert was this:
#FDF5E6 or rgb(253,245,230);

Also, you should make the title something like:
<title>Microsoft Internet Explorer&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</title>
as you're going to resize the window anyways.

You should use window.open to open the window to this size approximately:
width=210,height=120

You can get the alert picture by taking screenshot of alert box and editing it in Paint with crop, etc.

You should set a margin for the <body>

Regards,
${Zyloch}
0
 
LVL 15

Assisted Solution

by:Thogek
Thogek earned 100 total points
ID: 11681954
To expand on trevorhartman's suggestion:

    <script language="JavaScript" type="text/javascript">
    function OpenProgressWindow() {
        var oWin = window.open('', '_blank', 'width=300,height=250,directories=no,location=no,menubar=no,resizable=no,scrollbars=no,status=no,toolbar=no');
        var oDoc = oWin.document;
        oDoc.open();
        oDoc.write('<html><body onload="setTimeout(\'window.self.close()\', 10*1000);">Add your message text or HTML markup here.</body></html>');
        oDoc.close();
    }
    </script>

    <a href="somewhere.html" onclick="OpenProgressWindow();">Click me!</a>

Of course, you can change to details (window size, popup document design, etc.) to suit whatever you need, including the option of making it look like a regular system/JavaScript dialog (as Zyloch suggested above), if you like.
0
 
LVL 15

Expert Comment

by:justinbillig
ID: 11684354
if you want it to act like an alert box dont use window.open because that will open the window modelessly meaning hte user can do stuff with the site while that window is open, if you want it to be like an alert box use window.showModalDialog( "PathToPage", objAnyValuesYouWantToPassToTheWindow, "Dialog Options )
0
 
LVL 15

Expert Comment

by:justinbillig
ID: 11684356
oh sorry i didnt read you request all the way =) stupid me
0
 
LVL 36

Expert Comment

by:Zyloch
ID: 11684584
But justin points out a good fact. You'd probably want to include something in the parent window, perhaps on onFocus in the parent body tag that tests if child window is opened, then set the focus to the child window.

Regards,
${Zyloch}
0
 
LVL 1

Accepted Solution

by:
_KM_ earned 200 total points
ID: 11688381
<script>
function Loading()
{
Popup = window.open("about:blank", "alert", "width=210,height=75");
Popup.document.write("<title>Loading...                                  </title><body bgcolor='#CCCCCC'><br><center><font size=+2>Please Wait...</font></center></body>");

}
function Finished()
{
Popup = window.open("about:blank", "alert", "width=210,height=120");
Popup.close();
}
</script>

<body onunload="Finished()">
<a href="http://www.somewhere.com/" onclick="Loading();">Load</a>
</body>


the only problem with that code is it will quickly flash up with a small popup for a fraction of a second as they leave the page if they dont use the link to leave - but you can put some form of validation in for that if you wanted
0
 

Expert Comment

by:dirakkk2
ID: 11691932
I think the simplest solution consists of creating a layer at the opening of the page
This layer will be designed and located as you like (This can even be an image)

then just call >>>setTimeout("get_element('myWaitingLayer').style.visibility='hidden';", 1000 * 10);
 
provided that the function get_element = document.all ?
      function (s_id) { return document.all[s_id] } :
      function (s_id) { return document.getElementById(s_id) };

Try this !

Yann
0

Featured Post

Secure Your Active Directory - April 20, 2017

Active Directory plays a critical role in your company’s IT infrastructure and keeping it secure in today’s hacker-infested world is a must.
Microsoft published 300+ pages of guidance, but who has the time, money, and resources to implement? Register now to find an easier way.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
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…

733 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