Animated gif not displaying

[Lectrician]

I have a div fixed in the middle of the screen which is set to hidden.

There is a div inside this hidden div which will recieve an animiated gif through innerHTML.

When you click submit on a form, I use javascript to check the form, and then finally alter the div to make it visible and user the innerHTML element to put an animated gif in.

Everything works fine if I use just text or static images, but with an animated gif I am finding it sometimes works and sometimes wont display.

In IE8 I can right click where the image should be, select "show picture", and it then shows.

It is behaving like this in firefox, IE8 and google chrome.

Any ideas?

I will post the code later if this would help, but wondered if there was a known issue?

Thanks in advance.

[xclamationdesign]

Hmm...? Can we see some code please?

Is there any reason you are using a <div> inside a hidden <div>?

[Lectrician]

Thanks,

Here is the javascript which is called using 'on submit'. The $imagesdir is a perl string as the javascript is part of my perl forum. The image path is correct, and the image does appear sometimes.

<script language="javascript" type="text/javascript"> 
<!--
function checkForm() {
if (document.getElementById('albumname').value == "") {
alert("Please give your Album a name!");
document.getElementById('albumname').focus()
return false
}
 if (document.getElementById('image1').value != ""){
  imagePath=document.getElementById('image1').value.substring(document.getElementById('image1').value.length-4,document.getElementById('image1').value.length);
  if (imagePath != '.jpg' && imagePath != '.png' && imagePath != '.gif' && imagePath != 'jpeg' && imagePath != '.JPG' && imagePath != '.PNG' && imagePath != '.GIF' && imagePath != 'JPEG'){
  alert('Image 1 is not a supported image file.');
 return false
 }
 }
 if (document.getElementById('image2').value != ""){
  imagePath=document.getElementById('image2').value.substring(document.getElementById('image2').value.length-4,document.getElementById('image2').value.length);
  if (imagePath != '.jpg' && imagePath != '.png' && imagePath != '.gif' && imagePath != 'jpeg' && imagePath != '.JPG' && imagePath != '.PNG' && imagePath != '.GIF' && imagePath != 'JPEG'){
  alert('Image 2 is not a supported image file.');
 return false
 }
 }
 if (document.getElementById('image3').value != ""){
  imagePath=document.getElementById('image3').value.substring(document.getElementById('image3').value.length-4,document.getElementById('image3').value.length);
  if (imagePath != '.jpg' && imagePath != '.png' && imagePath != '.gif' && imagePath != 'jpeg' && imagePath != '.JPG' && imagePath != '.PNG' && imagePath != '.GIF' && imagePath != 'JPEG'){
  alert('Image 3 is not a supported image file.');
 return false
 }
 }
 if (document.getElementById('image4').value != ""){
  imagePath=document.getElementById('image4').value.substring(document.getElementById('image4').value.length-4,document.getElementById('image4').value.length);
  if (imagePath != '.jpg' && imagePath != '.png' && imagePath != '.gif' && imagePath != 'jpeg' && imagePath != '.JPG' && imagePath != '.PNG' && imagePath != '.GIF' && imagePath != 'JPEG'){
  alert('Image 4 is not a supported image file.');
 return false
 }
 }
 if (document.getElementById('image5').value != ""){
  imagePath=document.getElementById('image5').value.substring(document.getElementById('image5').value.length-4,document.getElementById('image5').value.length);
  if (imagePath != '.jpg' && imagePath != '.png' && imagePath != '.gif' && imagePath != 'jpeg' && imagePath != '.JPG' && imagePath != '.PNG' && imagePath != '.GIF' && imagePath != 'JPEG'){
  alert('Image 5 is not a supported image file.');
 return false
 }
 }
if (document.getElementById('image1').value == "" && document.getElementById('image2').value == "" && document.getElementById('image3').value == "" && document.getElementById('image4').value == "" && document.getElementById('image5').value == "") {
alert("Please select atleast one image to upload!")
return false
}
document.getElementById("container").style.filter = "alpha(opacity=50); -moz-opacity:0.5; opacity:0.5;";
document.getElementById("uploadsubmit").value = "Wait";
document.getElementById("uploadsubmit").disabled = true;
document.getElementById("cancel").disabled = true;
document.getElementById("savedalbum").disabled = true;
document.getElementById("ImageAlert").style.visibility = "visible";
document.getElementById("ImageAlertText").innerHTML = '<br />Uploading Images<br />Please Be Patient<br /><br />';
 document.getElementById("ImageAlertPic").innerHTML = '<br /><img src="$imagesdir/Rotate.gif"><br /><br />';
return true
}
//--> 
</script>

Here is the div.

<div id="ImageAlert" style="visibility:hidden; position:fixed; background-color:#AAAAAA; width:200px; top:30%; left:41%">
 <div id="ImageAlertText" style="background-color:#EEEEEE; text-align:center; padding: 3px; margin:1px;"> </div>
 <div id="ImageAlertPic" style="background-color:#FFFFFF; text-align:center; margin:1px;"> </div>
</div>

I know the code may be a little rough around the edges - I am a keen DIY coder! Still learning!

The code actually does work at times which is odd.

[Lectrician]

The tip is to show the image after submitting the form.

I removed the onsubmit command and changed the submit button to a standard button. This button called the above code, with a document.form.submit() command before the stack of document.getElementById commands. I also removed the return true.

This works perfectly now.