Simple Progress Bar (was Upload Progress)
| From: | Jacob Miller | Date: | Tue, 10 Sep 2002 01:54:46 +0000 |
| Subject: | Simple Progress Bar (was Upload Progress) | ||
| Groups: | php.general | ||
| Request: | Send a blank email to php-general+get-115801@lists.php.net to get a copy of this message | ||
Well, for lack of a better solution (and mainly lack of time to invent one) I decided to go with a simple indeterminate progress bar. I've already found more uses for this than just uploading files and thought some of you might have a use for it in your scripts which take a while to complete.
- Jacob
//
// In the referring page (i.e. submitting a form):
<head>
<script type="text/javascript">
var progress_window;
function open_progress_window(caption) {
progress_window = window.open("progress.php?caption=" + caption, "progress_window", "width=350, height=120, menubar=no, statusbar=no, toolbar=no");
}
function close_progress_window() {
if (progress_window != null) {
progress_window.close();
}
}
</script>
<body onUnload="close_progress_window();">
<form onSubmit="open_progress_window('Work+In+Progress...');">
<!-- form vars here -->
</form>
</body>
//
// Source for progress.php
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title><?php echo $caption; ?></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<style type="text/css">
body {
background: #ffffff;
color: #000000;
font-family: Arial, sans-serif;
}
td.ProgressOn {
background: #0000ff;} td.ProgressOff {
background: #ffffff;} td.PageHeader {
font-weight: bold;
font-size: 18px;
text-align: center;
padding-bottom: 10px;
}
</style>
<script type="text/javascript">
function begin_progress() {
var i = 0;
setTimeout("update_progress(" + i + ", true)", 100);
}
function update_progress(i, forward) {
if (forward) {
if (i == 0) { off = i; }
else { off = (i - 1); }
} else {
if (i == 19) { off = i; }
else { off = (i + 1); }
}
eval("document.all.td" + off + ".className = \"ProgressOff\";");
eval("document.all.td" + i + ".className = \"ProgressOn\";");
if (forward) {
if (i == 19) {
forward = false;
i--;
} else {
i++;
}
} else {
if (i == 0) {
forward = true;
i++;
} else {
i--;
}
}
setTimeout("update_progress(" + i + ", " + forward + ")", 100);
}
</script>
</head>
<body onLoad="begin_progress();">
<table border="0" width="100%" height="100%" cellpadding="0" cellspacing="0">
<tr>
<td align="center" valign="middle">
<table border="0" cellpadding="5" cellspacing="0">
<tr>
<td class="PageHeader"><?php echo $caption; ?></td>
</tr>
<tr>
<td>
<table border="0" cellpadding="5" cellspacing="0" style="border: 1px inset;">
<tr>
<?php
for ($i = 0; $i < 20; $i++) {
echo "<td class=\"ProgressOff\" id=\"td".$i."\"> </td>\n";
}
?>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>