JavaScript Forum

**dansgalaxy** · 06-07-2007, 06:13 PM

Hi,

i have seen on some site they have loading things

basically like what shows when u submit posts on here it shows a lil gif with loading page... or soemthing like that.

how would i do that and then when page loaded it goes
or even better is replaced with page loaded in: Xseconds.

does this make sense?...

Im no javscripter i only know the basics...

Thanks
Dan

**willcode4beer** · 06-20-2007, 03:55 PM

I'm not sure exactly what you mean but, I am inferring that they probably just pop up a floating div and count time.
If you know of a couple of sites, I could probably explain better or get a demo started for you

**dansgalaxy** · 06-20-2007, 04:47 PM

That would be great, erm i cant honestly think of a site off the top of my head which does this, i think yahoo does one some pages (sorry i know thats not very helpful..)

Ok just had quick browse and i found something like what i mean on on www.sourceforge.net hopefully you have downloaded something from it and u will know what i mean.

on the a download page when u have the link to "select a differant mirror" which when you click it it does this loading thing which fades the page and shows the loading animation of circle of dots going round. etc...

anyway im guessing i kind of want two ways to do this, how sourceforget doe sit but like u open the page and it shows a loading gif like that where it fades screen while all images and everything on the page loads (if possible)

and also a way to have it maybe as in the page so u can hav at the top of the page, a lil loading animation (which ill probally get preloaded on the very first page...) which shows loading page... and then once everythings laoded it shows loaded in: 0.74 seconds lik that

Lol
sorry if u dont know what i mean im rubbish at explaining.

Thanks,
Dan

**tripy** · 06-25-2007, 11:09 AM

In fact, it's pretty easy to do...
You can preview it there: http://webalis.com/wt/

I grabbed a gif from there:
http://www.napyfab.com/ajax-indicators/
for the loading indicator.

And here is the code:

HTML Code:

<html>
  <head>
    <title>test</title>
    <style type="text/css">
    #notice{
      position:absolute;
      align:center;
      width:100%;
      top:50%;
    }
    #notice img{
      margin:auto;
      display: block;
    }
    </style>
  </head>
  <body>
    <div id="notice" style="display:block"><img src="wait.gif" alt="loading..."/></div>
  </body>
  <script type="text/javascript">
  function toggleNotice(){
    if(document.getElementById('notice').style.display=="none"){
      var disp="block";
    }
    else{
      var disp="none";
    }
    
    //For seeing the effect in a empty page
    setTimeout('document.getElementById("notice").style.display="'+disp+'"',2000);
    
    //For the real effect
    //document.getElementById("notice").style.display=disp;
  }

  try{
    window.addEventListener('load', toggleNotice, true); 
  }
  catch(err){
    window.attachEvent('onload', toggleNotice);
  }
  </script>
</html>

**dansgalaxy** · 06-25-2007, 12:44 PM

Lol, easy but i only know basic javascript lol, thanks a bunch for that way cool.

ill be testing that now. ... tested perfect

TP coming your way.

Dan

**tripy** · 06-25-2007, 05:57 PM

Thanks !

**dansgalaxy** · 06-25-2007, 06:02 PM

Im happy to give when people are helpful

which has been happeing quite alot recently its rather nice i been giving LOADs of TP! :d and taking some... ><

Dan