PDA

View Full Version : Embed progress bar in conveyor belt



Jungleman
11-16-2005, 03:10 PM
Hi there,

I have installed the conveyor belt script in my website. It looks great! :)

http://www.junglephotos.com/portalpagetest.shtml

For an improvement I would like to embed an animated gif progress bar so that it lies inside the gray box that first appears before all images load. Here is the image source:

<IMG SRC="/homegifs/progressbar10.gif" WIDTH="237" HEIGHT="37" HSPACE="0" VSPACE="0" BORDER="0" NAME="ProgBar" ALT="Generating photos, Please Wait..." TITLE ="Generating photos, Please Wait...">

Could someone suggest how I do this? Where do I put this in the conveyor belt script? The idea is that once the images are loaded, the conveyor belt starts up and hides the progress bar gif.

Thanks jscheuer1 (Mad Professor) for helping to get the images to load faster, but I'd still like something to show in that space to keep our low bandwidth visitors occupied. :rolleyes:

Jungleman
11-18-2005, 02:07 PM
Sorry to bump this to the top of the queue but I was hoping that someone could help me out! Here is the progress bar script. How can I can I add this to the conveyor belt script so the progress bar is located within the conveyor belt area box? Please! I am really stuck... :confused:

<table align="center"><tr><td>
<div style="font-size:8pt;padding:2px;border:solid black 1px">
<span id="progress1">&nbsp;&nbsp;</span>
<span id="progress2">&nbsp;&nbsp;</span>
<span id="progress3">&nbsp;&nbsp;</span>
<span id="progress4">&nbsp;&nbsp;</span>
<span id="progress5">&nbsp;&nbsp;</span>
<span id="progress6">&nbsp;&nbsp;</span>
<span id="progress7">&nbsp;&nbsp;</span>
<span id="progress8">&nbsp;&nbsp;</span>
<span id="progress9">&nbsp;&nbsp;</span>
</div>
</td></tr></table>
<script language="javascript">
var progressEnd = 9; // set to number of progress <span>'s.
var progressColor = 'blue'; // set to progress bar color
var progressInterval = 1000; // set to time between updates (milli-seconds)

var progressAt = progressEnd;
var progressTimer;
function progress_clear() {
for (var i = 1; i <= progressEnd; i++) document.getElementById('progress'+i).style.backgroundColor = 'transparent';
progressAt = 0;
}
function progress_update() {
progressAt++;
if (progressAt > progressEnd) progress_clear();
else document.getElementById('progress'+progressAt).style.backgroundColor = progressColor;
progressTimer = setTimeout('progress_update()',progressInterval);
}
function progress_stop() {
clearTimeout(progressTimer);
progress_clear();
}
progress_update(); // start progress bar
</script>