Solved

Show ALERT-LIKE window for 10 seconds?

Posted on 2004-07-30
10
826 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
 
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
IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 
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

Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

Join & Write a Comment

Suggested Solutions

The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
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…

708 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

21 Experts available now in Live!

Get 1:1 Help Now