Solved

Crossbrowser Progressbar

Posted on 2000-04-02
17
333 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
  • 7
  • 5
  • 4
  • +1
17 Comments
 
LVL 75

Expert Comment

by:Michel Plungjan
Comment Utility
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
Comment Utility
<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
Comment Utility
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
 
LVL 75

Expert Comment

by:Michel Plungjan
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
Opppsss, sorry for duplicate
0
Find Ransomware Secrets With All-Source Analysis

Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

 
LVL 75

Expert Comment

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

Michel
0
 
LVL 3

Author Comment

by:KE
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
Adjusted points from 100 to 150
0
 
LVL 3

Author Comment

by:KE
Comment Utility
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

Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Suggested Solutions

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 …
Article by: DanRollins
This article describes a JavaScript program that creates a maze made of hexagonal cells.  In Part 2 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7850-Hex-Maze-Part-2.html), we'll extend the program by adding a depth-…
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…

771 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

10 Experts available now in Live!

Get 1:1 Help Now