desperate to figure this out - need progress bar (barber pole) to work

G

Guest

I got an animated gif that is a barber pole spinning that I want to
use as a progress bar.

The problem is that is stops spinning (shows 1 frame) when my browser
is processing a submited request that might take 5-8 seconds.

I tried to putting the gif in a sepearate page and referencing it
using iframe thinking that if the gif is on another page & calling it
from my main page, it would not be affected by my submittals and
continue to give the spinning effect.

Does any one know how i can implement a progress bar (preferably
barber-pole) on a webpage.

Ticketmaster.com seems to do it. The thing is, I can't figure out if
they're really processing info while their progress bar spins while
nothing is being done & then simply redirects the user. Please look to
see what i am talking about... Look for some availiable tickets &
check to see if some seats are available and see how they simulate
this.

http://www.ticketmaster.com/event/0...rtistid=865616&majorcatid=10002&minorcatid=32


Any help would be appreciated.

Thanks

7078895
 
V

vMike

Here is an example of a progress. I adapted this from someone elses code so
I can't take credit for it, but maybe you can use it. It is javascript.

<%@ Control %>

<div id="waiting">
<table id="msgCell" align="center"><tr><td>
Processing please wait ...
</td></tr><tr><td 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>

</td></tr></table>
</div>

<script language="javascript">
var progressEnd = 9; // set to number of progress <span>'s.
var progressColor = 'blue'; // set to progress bar color
var progressInterval = 500; // set to time between updates (milli-seconds)

var progressAt = 0; //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_stop()
}
else

{document.getElementById('progress'+progressAt).style.backgroundColor =
progressColor
progressTimer = setTimeout('progress_update()',progressInterval);}}

}

function progress_stop() {
progress_clear();
window.clearTimeout(progressTimer);
// hideobj('waitingDiv','');
//hideobj('waiting','none')
}
function startMsg() {
// hideobj('waitingDiv','none');
progress_update();
}


function hideobj(objname,type) {
var div1=document.getElementById(objname);
div1.style.display = type;

}
</script>
 
G

Guest

Mike, thanx. If gotten ver for with this.

only thing, how do is get the progress bar to be in it's orginal state
like when the page 1st loads?

I have a link that calls you progress_update function to start the
process and show your progress bar but if when it's done, if the user
click the same link again, nothing happens.

Any advice?

/ra
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,756
Messages
2,569,535
Members
45,008
Latest member
obedient dusk

Latest Threads

Top