Solved

Progress Bar/Dot

Posted on 2000-04-24
6
327 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
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
Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

 
LVL 10

Accepted Solution

by:
kollegov earned 50 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

Courses: Start Training Online With Pros, Today

Brush up on the basics or master the advanced techniques required to earn essential industry certifications, with Courses. Enroll in a course and start learning today. Training topics range from Android App Dev to the Xen Virtualization Platform.

Question has a verified solution.

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

Avoid defining the variables in the global scope; trying to define them in a local function scope. Because:   • Look-up is performed every time a variable is accessed.   • Variables are resolved backwards from most specific to least specific scope…
Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
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…

815 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

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now