Menu
Hello,
I am having a problem, I am using an animated gif to show the progress of an upload on my site. The animated gif is basically there to let people know that the file is being uploaded, even though it has nothing to do with the progress.
So here is what happens, the form page loads and the progress bar image is hidden (using CSS). The user then clicks submit and (by using javascript/ CSS) the form is hidden and the display for the image is changed to display (not the acutal image but the iframe that it is in). While the file is being uploaded (all on the same page).
In firefox, netscape, opera, the animated gif continues to run and show the progress bar after the user clicks submit; there are no pauses in the animation. But in internet explorer, the animation pauses until the page is finished uploading the file from the form.
Does anyone know a reason for this? I may have posted in the wrong thread but I figured graphics section might help. Any suggestions?
Thanks
[CODE]<script language="javascript">
function showLoader() {
document.upload_form.submitform.disabled = true;
document.getElementById("uploader_image").innerHTML = "Please wait...<br><img src='../../images/loading.gif'>";
}
function submitForm() {
document.upload_form.submit();
}
</script>
<p><form name="upload_form" action="upload_doc_post.php" enctype="multipart/form-data" method="post" onSubmit="showLoader();">
Give your file a title:<br>
<input type="text" name="name" size="25" style="height:25px; font-size:22px;"></p>
<p>Your file:
<input type="file" name="uploadfile" size="65"></p>
<p><input type="button" name="submitform" value="Upload File" onClick="submitForm(); showLoader();">
</form></p>
<div id="uploader_image" style="width:90%; height:50px; "> </div>[/CODE]I found an even better solution to your problems... though this thread is probably too old for anyone to be checking still.
My animated gift would stop working also... even in firefox. I chose to not use a submit button through the form like i would normally. Instead, I use a input type='button' and have it run a script that shows the loading image... then submits the form. You have to have a double catch.
Here's my code and it magically works in IE7 and Firefox 2. Notice that the button invokes the showLoader() functions and so does the onSubmit call from the form. This makes the page ASSURE itself the image is shown.
[CODE]<script language="javascript">[/QUOTE]
function showLoader() {
document.upload_form.submitform.disabled = true;
document.getElementById("uploader_image").innerHTML = "Please wait...<br><img src='../../images/loading.gif'>";
}
function submitForm() {
document.upload_form.submit();
}
</script>
<p><form name="upload_form" action="upload_doc_post.php" enctype="multipart/form-data" method="post" onSubmit="showLoader();">
Give your file a title:<br>
<input type="text" name="name" size="25" style="height:25px; font-size:22px;"></p>
<p>Your file:
<input type="file" name="uploadfile" size="65"></p>
<p><input type="button" name="submitform" value="Upload File" onClick="submitForm(); showLoader();">
</form></p>
<div id="uploader_image" style="width:90%; height:50px; "> </div>[/CODE]
I have yet another solution for this problem. It entails re-establishing the parent node of the containing block for the gif.
Here is an example. This is the containing block for the gif.
<div style="display:none">
<img id="progress" src="/images/snake_transparent.gif" alt=""/>
</div>
In your onsubmit() handler make sure you do this.
<input type="button" value="Upload" onclick="document.form.submit(); document.getElementById('progress').parentNode.style.display = 'block';">
Notice the use of parentNode. It's really simple. Give it a try.[/QUOTE]
[code=html]
<table>
<form id="form" action="" onsubmit="document.getElementById('submit').innerHTML='<div style='color:#666666;'>Please Wait...</div>'; document.getElementById('pass').innerHTML='<div>Password:</div>';" method="post">
<tr>
<td id="pass">
<div style="color:#FF0000;font-weight:bold;">Password:</div>
<div style="color:#FF0000;">is invalid! </div>
</td>
<td><input type="password" name="psword" /></td>
<td id="submit"><input type="submit" id="submit" name="submit" value="Login" /></td>
</tr>
</form>
</table>
[/code][CODE]<table>
<form id="form" action="" method="post">
<tr>
<td id="pass">
<div style="color:#FF0000;font-weight:bold;">Password:</div>
<div style="color:#FF0000;">is invalid! </div>
</td>
<td><input type="password" name="psword" /></td>
<td id="submit">
<input type="button" name="submit" value="Login" onclick="document.form.submit();
document.getElementById('prog').parentNode.style.display = 'block'; [[COLOR="Red"]make sure this goes before the next code or it won't work in IE[/COLOR]]
document.getElementById('pass').innerHTML='<div>Password:</div>';
document.getElementById('submit').innerHTML='';"/></td>
<td>
<div style="display:none;">
<img id="prog" src="/images/snake_transparent.gif" alt=""/> [[COLOR="Red"]replace with your gif[/COLOR]]
</div></td>
</tr>
</form>
</table>[/CODE][code=html]<form name="form2" action="" method="post">[/code][code=html]<img id="prog" src="/images/snake_transparent.gif" alt=""/>[/code][code=html]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml" lang = "en">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<script type="text/javascript">
//<![CDATA[
function submit1(){
document.form.submit();
document.getElementById('prog').parentNode.style.display = 'block';
document.getElementById('pass').innerHTML='<div>Password: </div>';
document.getElementById('submit').innerHTML='';
return false;
}
function checkEnterKey(e){
if (e.keyCode == 13) {
submit1();
return false;
}
}
//]]>
</script>
<div>Table Version</div>
<form name="form" action="" method="post">
<table>
<tr>
<td id="pass">
<div style="color:#FF0000;font-weight:bold;">
Password:
</div>
<div style="color:#FF0000;">
is invalid!
</div>
</td>
<td>
<input type="password" name="psword" onkeydown="checkEnterKey(event)"/>
</td>
<td id="submit">
<input type="button" name="button" value="Login" onclick="submit1()"/>
</td>
</tr>
<tr>
<td>
<div style="display:none;">
<img id="prog" src="/images/snake_transparent.gif" alt=""/>
</div>
</td>
</tr>
</table>
</form>
<script type="text/javascript">
//<![CDATA[
function submit2(){
document.form2.submit();
document.getElementById('prog2').parentNode.style.display = 'inline';
document.getElementById('pass2').innerHTML='<div>Password: </div>';
document.getElementById('submit2').innerHTML='';
}
function checkEnterKey2(e){
if (e.keyCode == 13) {
submit2();
return false;
}
}
//]]>
</script>
<hr/>
<div>Div version</div>
<form name="form2" action="" method="post">
<div id="pass2">
<div style="color:#FF0000;font-weight:bold;">
Password:
</div>
<div style="color:#FF0000;">
is invalid!
</div>
</div>
<div>
<input type="password" name="psword" onkeydown="return checkEnterKey2(event)"/>
</div>
<div id="submit2">
<input type="button" name="button" value="Login" onclick="submit2()"/>
</div>
<div style="display:none;">
<img id="prog2" src="/images/snake_transparent.gif" alt=""/>
</div>
</form>
</body>
</html>[/code][CODE]<?php
// Add two second delay before returning.
sleep(2);
// Redirect back to original page. "test.html" is my originating page.
header("location: http://" . $_SERVER['SERVER_NAME'] . '/test.html' );
?>[/CODE][code=html]<form name="form" action="yourscript.php" method="post">
<form name="form2" action="yourscript.php" method="post">[/code]0.1.9 — BETA 5.19