Solved

Progress Bar/Dot

Posted on 2000-04-24
6
331 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
[Live Webinar] The Cloud Skills Gap

As Cloud technologies come of age, business leaders grapple with the impact it has on their team's skills and the gap associated with the use of a cloud platform.

Join experts from 451 Research and Concerto Cloud Services on July 27th where we will examine fact and fiction.

 
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

Salesforce Made Easy to Use

On-screen guidance at the moment of need enables you & your employees to focus on the core, you can now boost your adoption rates swiftly and simply with one easy tool.

Question has a verified solution.

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

In my daily work (mainly using ASP.net), I need to write a lot of JavaScript code. One of the most repetitive tasks I do are the jQuery Ajax calls. You know: (CODE) I don't know if for you it's the same, but for me is soooo tedious to write the …
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
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…
Suggested Courses

635 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