Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Regular Coder
    Join Date
    Sep 2002
    Location
    South East UK. 35 miles east of London, in sight of the River Thames.
    Posts
    300
    Thanks
    10
    Thanked 0 Times in 0 Posts

    Creating a page loading progress indicator

    Hi All,

    In one of my applications, the user completes a search form and posts it to a database. Because of the amount of data returned, it can take upto 15 seconds to load the results page. How do I create a simple progress timer/rotating image that will disappear when the results page is ready to display?

    I've searched the forum and found one other thread but couldn't work out what to do.

    Regards

    Gary

  • #2
    Senior Coder shyam's Avatar
    Join Date
    Jul 2005
    Posts
    1,563
    Thanks
    2
    Thanked 163 Times in 160 Posts
    Code:
    <html>
     <head>
      <title>loading...</title>
    <script type="text/javascript">
    function showContent() {
    	document.getElementById('loading').style.display = 'none';
    	document.getElementById('content').style.display = 'display';
    }
    window.onload = showContent;
    </script>
     </head>
     <body>
       <div id="loading"><!-- loading img here --></div>
       <div id="content"><!-- main content here --></div>
     </body>
    </html>
    Last edited by shyam; 10-16-2007 at 05:47 PM. Reason: syntax error
    You never have to change anything you got up in the middle of the night to write. -- Saul Bellow

  • #3
    Senior Coder angst's Avatar
    Join Date
    Apr 2004
    Location
    Toronto, Ontario
    Posts
    2,114
    Thanks
    15
    Thanked 122 Times in 122 Posts
    you can grab images from: http://www.ajaxload.info/

    also, this isn't an asp question, you should go to the javascript forum for more help.

  • #4
    Regular Coder
    Join Date
    Sep 2002
    Location
    South East UK. 35 miles east of London, in sight of the River Thames.
    Posts
    300
    Thanks
    10
    Thanked 0 Times in 0 Posts
    Hi Shyam & Angst,

    Sorry, forgot to mention that my application is written in asp hence posting it here. Didn't realise the solution maybe javascript.

    The solution worked a treat and does it's job but conflicts with another javascript function and displays a javascript error message. The other function hides the div "hiddendiv" when the page loads.

    I guess the two scripts need combining?

    Also, as I have posted to the wrong forum, how do I transfer this thread?

    Regards

    Gary

    ---------------------------------------

    <script language="JavaScript">
    function showHideContent(id, show)
    {
    var elem = document.getElementById(id);
    if (elem)
    {
    if (show)
    {
    elem.style.display = 'block';
    elem.style.visibility = 'visible';
    }
    else
    {
    elem.style.display = 'none';
    elem.style.visibility = 'hidden';
    }
    }
    }

    function showContent() {
    document.getElementById('loading').style.display = 'none';
    document.getElementById('contents').style.display = 'display';
    }
    </script>


    <BODY onload="showContent();showHideContent('hiddendiv', false);">


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •