From: Gavin Kistner <gavin@...>
Date: 2004-09-15T21:54:45+09:00
Subject: [OT] Re: web-based progress bar

--Apple-Mail-1-981559773
Content-Transfer-Encoding: 7bit
Content-Type: text/plain;
	charset=US-ASCII;
	format=flowed

On Sep 15, 2004, at 6:29 AM, David Ross wrote:
> <Script language="Javascript">
> # add the if browser == IE here because some IEs turn
> # off the META REFRESH :(
>
> window.setTimeout('refresh()', 1*2500);
> function refresh(){
> 	window.location.href = window.location.href;
> 	window.setTimeout('refresh()', 1*2500);
> }
> </Script>

To make this HTML 4 compliant and cleaner:

<script type="text/javascript">
	setTimeout( function(){ location.reload(true) }, 2500 );
</script>


Note that you do not need to re-call the reload function, as the act of 
reloading the page will unload any such timeout you make.



If you're progressively writing the response, one way to make a 
progress bar is to use CSS to progressively overlap longer and longer 
elements on top of one another. For example (untested):
<style type="text/css">
	.progressbounds, .progressbar {
		position:absolute;
		height:1em;
		top: 50%; margin-top:-0.5em
		left: 20%;
	}
	.progressbounds {
		width:60%;
		margin:0 auto;
		border:1px solid black;
	}
	.progressbar {
		background:green;
		color:white;
		font-weight:bold;
		font-size:80%;
		text-align:center;
		overflow:hidden
	}
</style>

<div class="progressbounds"></div>
...
<div class="progressbar" style="width:10%">10%</div>
...
<div class="progressbar" style="width:25%">25%</div>
...
<div class="progressbar" style="width:50%">50%</div>
...
<div class="progressbar" style="width:80%">80%</div>
...
<div class="progressbar" style="width:100%">DONE</div>
<script type="text/javascript" 
src="http://phrogz.net/JS/FindRule2_js.txt"></script>
<script type="text/javascript">
	//Hide the progress bar in 10 seconds
	setTimeout( function(){
		FindRule2( '.progressbounds' ).style.display='none';
		FindRule2( '.progressbar' ).style.display='none';
	}, 10 * 1000 );
</script>



If you're not writing the page but want to show progress of a 
server-task, you'll need to use a cross-browser XMLHTTP library like 
XHConn ( http://xkr.us/code/javascript/XHConn/ ) to repeatedly make 
client-server queries to get the progress, and then just use JS to 
manipulate the DOM to change the width of your progress bar.
--Apple-Mail-1-981559773--