[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 841
  • Last Modified:

Show ALERT-LIKE window for 10 seconds?

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
volking
Asked:
volking
  • 2
  • 2
  • 2
  • +4
4 Solutions
 
trevorhartmanCommented:
I would use a pop up with a setTimeout("this.close()", 1000 * 10); in the source

-Trevor
0
 
reggi635Commented:
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
 
trevorhartmanCommented:
on a redirect sometimes the window is blank for a large part of the time, so that might not work so well...
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
ZylochCommented:
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
 
ThogekCommented:
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
 
justinbilligCommented:
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
 
justinbilligCommented:
oh sorry i didnt read you request all the way =) stupid me
0
 
ZylochCommented:
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
 
_KM_Commented:
<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
 
dirakkk2Commented:
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

Independent Software Vendors: 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!

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