Improve company productivity with a Business Account.Sign Up

x
?
Solved

Progress Bar/Dot

Posted on 2000-04-24
6
Medium Priority
?
340 Views
Last Modified: 2008-02-01
I have an web application. It take about 1-2 min. to run. I want to have an javascript that can show a series of "." on browser when the application running. I have tried it by using the setTimeout function. However, it only display only 1 dot. Besides,it clear the screen.

Is it possible to keep the current screen and don't clear the screen?
0
Comment
Question by:KNVB HK
6 Comments
 
LVL 8

Expert Comment

by:xabi
ID: 2746470
I recoment you to create a animated gif with a simulated progress bar. It should be the easiest and more compatible way to do what you want. Yo can also do it with DHTML, but I recommend you an animated gif.

xabi
0
 
LVL 22

Expert Comment

by:CJ_S
ID: 2746673
take a look at
http://www.htmlguru.com
for an example
0
 
LVL 1

Expert Comment

by:Subhuman
ID: 2746948
CJ_S - That looks good.

cstsang - what language is your web application coded in? You might be able to create a progress bar in your application and remove the need for a script/gif.
0
Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
LVL 10

Accepted Solution

by:
kollegov earned 150 total points
ID: 2747370
Here is one I created for showing images preloadiding progress:

------file: progressbar.js ------
/* CrossBrowser progress bar
  * copyright Virtual_Max, 2000
  * http://come.to/vmax 
  * Can be used/modified absolutely free untill this
  * statement presents in all copies and derivatives
  */

 var barw;
 var bgcolor;

 function progressShow(vis)
  {
   if(document.all)
    {dddd=document.all['pbar'].style;
     dddd.visibility = vis ? "visible":"hidden";
    }
   if(document.layers)
    {//dddd=document.wrapper.document['pbar'];
     dddd=document['pbar'];
     dddd.visibility = vis ? "show":"hide";
    }
  }

function setupProgressBar(top,left,width,color){
 s='<style>'

 if(document.layers){
  tag='ilayer';
  s+='#pbar{width:'+width+';position:absolute;top:0;left:0;';
 }

 else{
  tag='div';
  s+='#pbar{width:'+width+';position:relative;top:0;left:0;';
 }

 s+='background-color:'+color+';clip:rect(0,0,20,0);}</style>';
 document.writeln(s);

 s='';
 s+='<'+tag+' ID="pbar" width='+width+' POSITION=RELATIVE>sdasdad</'+tag+'>';


 document.writeln(s);  

 barw=width;
 bgcolor=color;
 }

 function showProgress(n){
  if(document.all){
   o=document.all['pbar'];
   w=Math.floor(barw*n);
   // what idot invented this order of clip ???
   // top,right,bottom,left
   o.style.clip="rect(0,"+w+",10,0)";
   o.style.width=w;
  }
  if(document.layers){
   o=document['pbar'];
   w=Math.floor(barw*n);
   o.clip.width=w;
   o.clip.height=20
   o.bgColor=bgcolor
  }
 }




 ims = new Array();

//preload images
 function startImageLoader(){
   args = startImageLoader.arguments
   for(var i=0;i<args.length;i++){
     ims[i]=new Image();
     ims[i].errored=false;
     ims[i].onerror=new Function("ims["+i+"].errored=true");
     ims[i].src=args[i];
   }
  updateProgress();
 }

 function updateProgress(){
   var cnt=0;
   for(var i=0;i<ims.length;i++){
     if(ims[i].complete || ims[i].errored) cnt++;
     
   }
   if(ims.length>0){
     showProgress(1.0*cnt/ims.length);
     window.status=""+cnt;
   }
   if(cnt<ims.length){
    setTimeout("updateProgress()",200);
   }
   else{
      onComplete();
   }
 }

function onComplete(){
   // do here whatever you need when
   // loading complete
   alert("Done!");
   progressShow(false);
}

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


---------file: test.html ------

<script src="progressbar.js"></script>
<body>
Hello world
<!--table border="1" cellpadding="0" cellspacing="0" width=220>
<tr><td width=220>TEST</td></tr>
<tr><td-->
<script>
   setupProgressBar(100,20,200,"#000080");
   showProgress(0);
</script>
<!--/td>
</tr-->
</table>


<script>
//preload this images
//you can specify as much as needed
startImageLoader(
  "http://www.geocities.com/virtual_max/vmaxtree/icons/arrow_gold.gif",
  "http://www.geocities.com/virtual_max/vmaxtree/icons/arrow_cyan.gif",
  "http://www.geocities.com/virtual_max/vmaxtree/icons/movie_gray.gif",
  "http://www.geocities.com/virtual_max/vmaxtree/icons/folder_cyan.gif",
  "http://www.geocities.com/virtual_max/vmaxtree/icons/ofolder_cyan.gif",
  "http://www.geocities.com/virtual_max/vmaxtree/icons/folder_mokko.gif
);
</script>

</body>

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

This one was tested with NN4, MIE5 (Win95)

Virtual_Max
0
 
LVL 7

Author Comment

by:KNVB HK
ID: 2749856
hay kollegov:

    I cannot download the image files.
 
0
 
LVL 10

Expert Comment

by:kollegov
ID: 2750904
You actually do not need to download
THIS images
(Sorry I forgot, geocities will deny access from page which are not on geocities to prevent 'remote' use of images hosted on geosite).

Just put any images you need instead
of my ones.

Also above example only do preload
and shows preloading progress, it do not show images...

Or you can get this images from my site
http://www.geocities.com/virtual_max/
together with VMaxTree applet package..
(they are included in .zip file)


Virtual_Max

0

Featured Post

Get your problem seen by more experts

Be seen. Boost your question’s priority for more expert views and faster solutions

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Article by: DanRollins
This article describes a JavaScript program that creates a maze made of hexagonal cells.  In Part 2 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7850-Hex-Maze-Part-2.html), we'll extend the program by adding a depth-…
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
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…

580 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