Solved

Progress Bar/Dot

Posted on 2000-04-24
6
326 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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Trouble inserting a variable  in javascript 7 42
Animated .jpg? 13 62
Angular - example works but my data is different 13 12
how can i extend ? 2 22
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…
In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
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…

863 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

27 Experts available now in Live!

Get 1:1 Help Now