Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Progress Bar/Dot

Posted on 2000-04-24
6
Medium Priority
?
333 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:cstsang
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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
Build and deliver software with DevOps

A digital transformation requires faster time to market, shorter software development lifecycles, and the ability to adapt rapidly to changing customer demands. DevOps provides the solution.

 
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:cstsang
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

The top UI technologies you need to be aware of

An important part of the job as a front-end developer is to stay up to date and in contact with new tools, trends and workflows. That’s why you cannot miss this upcoming webinar to explore the latest trends in UI technologies!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses how to implement server side field validation and display customized error messages to the client.
In this blog, we’ll look at how improvements to Percona XtraDB Cluster improved IST performance.
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…

660 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