Solved

Crossbrowser Progressbar

Posted on 2000-04-02
17
370 Views
Last Modified: 2012-06-27
I need a progressbar that works on both IE4 and NS4. I would prefer not to have images in it, to reduce DL time. Also I need to update the progressbar from an image preloader. I've tryed to use the DIV tags with some style properties, but I can't get it to work properly. Anyone that have a working example or a link ?

Basically what I want is to have my mainpage preload all images before I show the next page. The mainpage should show the progress of this, and I would like to include the preload feature with a single script line - like:

<script>imgpreload([...array of urls...]);</script>

The script should insert the progressbar at this position, and start loading the images while updating the progressbar. There may be additional parameters to indicate the width and height.

Regards

Regards
0
Comment
Question by:KE
[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
  • 7
  • 5
  • 4
  • +1
17 Comments
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 2678110
The best image preloader I have seen is using the images you preload as progress - No waste!

You need to include the script that actually does the job too - a oneliner will be huge ;-)

It could even be made to sort of work in IE3...

If you wish I can make you one like that (unless someone is going to answer this with something else while I work (hint, hint))

Michel
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 2678155
<html>
<head>
<title>Image preload progress bar</title>
<script language="JavaScript"><!-- // cloak
/* Image preload progress bar
   (c) 2000 Michel Plungjan michel@irt.org */
theImages = new Array(
'earth01.gif',
'earth02.gif',
'earth03.gif',
'earth04.gif',
'earth05.gif'
);

function makeProgress(pw,h) {
   var text ="";
   var w = parseInt(pw/theImages.length);
   if (w < 10) w = 10;
   if (document.images) {
      for (i=0;i<theImages.length;i++) {
         text += '<img \nname="img'+i+'" width='+w+' height='+h;
         if (i>0) text += ' src="blank.gif"'
         else text += ' src="'+theImages[i]+'"'
         if (i==(theImages.length-1)) text += '>';
         else text += ' onLoad="document.images[\'img'+(i+1)+'\'].src=theImages['+(i+1)+'];">';
      }
   }
   else {
      for (i=0;i<theImages.length;i++) {
         text += '<img src="'+theImages[i]+'" width='+w+' height='+h+'>';
      }
   }
   return text;
}


// uncloak --></script>
</head>
<body>


<script language="JavaScript"><!-- // cloak
document.write(makeProgress(400,32));
// uncloak --></script>
</body>
</html>
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 2678160
Just fill the array with images (remember ot not have a comma afte te last one) and give the function the width and height of the progress bar.

Michel
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 2678214
Sorry tiny bug (the script is triggered on the blank too)

I will fix it in a sec

Michel
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 2678324
Hmm I seem to have found a bug in IE5!!!

Can anyone fix this script for IE???

<html>
<head>
<title>Image preload progress bar</title>
<script language="JavaScript"><!-- // cloak
/* Image preload progress bar
   (c) 2000 Michel Plungjan michel@irt.org */
   
theImages = new Array(
'earth00.gif',
'earth01.gif',
'earth02.gif',
'earth03.gif',
'earth04.gif',
'earth05.gif'
);

function makeProgress(pw,h) {
   var text ="";
   var w = parseInt(pw/theImages.length);
   if (w < 10) w = 10;
   if (document.images) {
      for (i=0;i<theImages.length;i++) {
         text += '<img \nname="img'+i+'" width='+w+' height='+h;
         if (i>0) text += ' src="blank.gif"'
         else text += ' src="'+theImages[i]+'"'
         if (i==(theImages.length-1)) text += '>';
         else {
            text += ' onLoad="alert(\'hello\'+'+(i+1)+');loadNext('+(i+1)+');">';
         }
      }
   }
   else {
      for (i=0;i<theImages.length;i++) {
         text += '<img src="'+theImages[i]+'" width='+w+' height='+h+'>';
      }
   }
document.write('<x'+'mp>'+text+'</x'+'mp>');
   return text;
}
curImg = 1;
blanks = 0;
done = false;
window.loaded = false;
function loadNext(theIndex) {
   if (!window.loaded) return;
   alert(theIndex+ "!=" +curImg);
   if (theIndex != curImg) return;
   document.images['img'+curImg].src=theImages[curImg];
   curImg++;
}

// uncloak --></script>
</head>
<body onLoad="window.loaded=true;loadNext(1);">


<script language="JavaScript"><!-- // cloak
document.write(makeProgress(400,20));
// uncloak --></script>
</body>
</html>
0
 
LVL 10

Expert Comment

by:kollegov
ID: 2678709
Here is my solution:
--------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['pbar'];
    dddd.visibility = vis ? "show":"hide";
   }
 }

function setupProgressBar(top,left,width,color){
s='<style>'
s+='#pbar{width:'+width+';position:absolute;top:'+top+';left:'+left+';';
s+='background-color:'+color+';clip:rect(0,0,10,0);}</style>';
document.writeln(s);
s='<div ID="pbar">;&nbsp;</div>'
document.writeln(s);

barw=width;
bgcolor=color;
}
function showProgress(n){
 if(document.all){
  o=document.all['pbar'];
  w=Math.floor(barw*n);
  o.style.clip="rect(0,"+w+",10,0)";
 }
 if(document.layers){
  o=document['pbar'];
  w=Math.floor(barw*n);
  o.clip.width=w;
  o.bgColor=bgcolor
 }
}
---------------------------------------
This is general purpouse progress bar, you can use it to display anything.

There are 2 main functions
function setupProgressBar(top,left,width,color)
and
function showProgress(n)
where n is float from 0 to 1

Example of usage with image prloading script:
----------------------------------------
<html>
<head>
<script src="progressbar.js"></script>
</head>
<script>
 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);
}

</script>

<body>
<script>
/* set bar with top,left,width,color */
setupProgressBar(100,20,200,"#000080");
//initial state
showProgress(0);

//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>

</html>


Script tested with NN4.7, MIE5.01
WinNT

Virtual_Max

0
 
LVL 10

Accepted Solution

by:
kollegov earned 150 total points
ID: 2678710
Here is my solution:
--------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['pbar'];
    dddd.visibility = vis ? "show":"hide";
   }
 }

function setupProgressBar(top,left,width,color){
s='<style>'
s+='#pbar{width:'+width+';position:absolute;top:'+top+';left:'+left+';';
s+='background-color:'+color+';clip:rect(0,0,10,0);}</style>';
document.writeln(s);
s='<div ID="pbar">;&nbsp;</div>'
document.writeln(s);

barw=width;
bgcolor=color;
}
function showProgress(n){
 if(document.all){
  o=document.all['pbar'];
  w=Math.floor(barw*n);
  o.style.clip="rect(0,"+w+",10,0)";
 }
 if(document.layers){
  o=document['pbar'];
  w=Math.floor(barw*n);
  o.clip.width=w;
  o.bgColor=bgcolor
 }
}
---------------------------------------
This is general purpouse progress bar, you can use it to display anything.

There are 2 main functions
function setupProgressBar(top,left,width,color)
and
function showProgress(n)
where n is float from 0 to 1

Example of usage with image prloading script:
----------------------------------------
<html>
<head>
<script src="progressbar.js"></script>
</head>
<script>
 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);
}

</script>

<body>
<script>
/* set bar with top,left,width,color */
setupProgressBar(100,20,200,"#000080");
//initial state
showProgress(0);

//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>

</html>


Script tested with NN4.7, MIE5.01
WinNT

Virtual_Max

0
 
LVL 10

Expert Comment

by:kollegov
ID: 2678712
Opppsss, sorry for duplicate
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 2679135
Any chance of fixing my script for IE? (much smaller)

Michel
0
 
LVL 3

Author Comment

by:KE
ID: 2679797
mplungjan: Very good solution. However I'm looking for a "solid" progress bar style - like in kollegov's example.

kollegov: Ány chance of having this work with relative positioning. I've tryed to implement a <div style="postion:relative"> around the current DIV tag, but then NS doesn't show anything (as usual :-).

Thanks to both of you, your help is REALLY appreciated - thanks !

Regards
0
 
LVL 3

Author Comment

by:KE
ID: 2679859
BTW. Can I have the progressbar in one include file, like: "progress.js" and the image loader in another, like "imgpreload.js" where I then reference "progressbar.js".

I don't know wether it's possible to include scripts within included scripts.

Regards
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 2679878
Using document.write you can, but you shouldn't...
Just include both files in the same page
Michel
0
 
LVL 10

Expert Comment

by:kollegov
ID: 2680098
It's more problems to fix it for MIE :)
As soon as I changed to relative clipping stopped working! Thus I changed clipping to changing width...
One more problem remains unsolved ...
In MIE <div> act as linebreaks..
It's not a problem if this will be nested somewhere in table, but makes a bit wired positioning inside text.

-----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.visibility = vis ? "show":"hide";
   }
 }

function setupProgressBar(top,left,width,color){

s='<style>'

if(document.layers){
 tag='layer';
 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='';
if(document.layers){
  s+='<ilayer ID="wrapper" height=25 width='+width+'>';
}

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

if(document.layers) {
  s+='<spacer type="block" width='+width+' height=20>';
  s+='<ilayer>'
}


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.wrapper.document['pbar'];
  w=Math.floor(barw*n);
  o.clip.width=w;
  o.bgColor=bgcolor
 }
}
------------


<html>
<head>
<script src="progressbar.js"></script>
</head>
<script>
 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);
}

</script>

<body>
loading progress:
<script>
/* set bar with top,left,width,color */
setupProgressBar(100,20,200,"#000080");
//initial state
showProgress(0);

//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>
isn't it cool ????
</body>

</html>

0
 

Expert Comment

by:mlapointe
ID: 2680690
If you replace the line tag='div'; with tag='span' in the code above you will not get the linebreak behaviour like you do with the div tag.
 
0
 
LVL 3

Author Comment

by:KE
ID: 2683196
Hmmm... Am I doing something wrong ?

This is my code for inserting the progressbar:

<table border="0" cellpadding="0" cellspacing="0">
      <tr>
            <td>TEST</td>
      </tr>
      <tr>
            <td>
<script>
// set bar with top,left,width,color
setupProgressBar(0,0,200,"#000080");
</script>
            </td>
      </tr>
</table>

Works fine with IE, but NS don't care about the table - the progressbar is positioned at the top-left corner (0,0) absolute...

Regards
0
 
LVL 3

Author Comment

by:KE
ID: 2683203
Adjusted points from 100 to 150
0
 
LVL 3

Author Comment

by:KE
ID: 2685862
Well, I solved the "relative" problem on my own, and everything is working now.

Thanks to everyone participating, very appreciated... I will let kollegov get the points as my solution is closest to his work - and also because I've used parts of his code.

Regards
0

Featured Post

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.

Question has a verified solution.

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

In this article, we'll look how to sort an Array in JavaScript, including the more advanced techniques of sorting a collection of records either ascending or descending on two or more fields. Basic Sorting of Arrays First, let's look at the …
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 …
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
Course of the Month11 days, 15 hours left to enroll

623 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