Link to home
Start Free TrialLog in
Avatar of NukemWhumpus
NukemWhumpus

asked on

Animated GIFs and Dynamic Layers

I have a webpage where there are two layers, an animated GIF and a button.

The layer that the GIF resides on is hidden until you click on the button.

The problem I am having is that the image will not animate in IE(only tried 6) but works just fine in NN.

The image works in IE in a page with just the image. (ie. <img src="animated.gif"> )
It works fine in IE if you access just the image (ie. http://site.com/animated.gif )


--I am using Javascript to swap out the layers *the script works just fine to swap out layers*
--I created the image in Adobe Image Ready
--The image is set to loop indefinately so the wait time with the hidden layer isn't *I dont think* an issue.
any ideas?

TIA,
Pete
Avatar of tomfisher
tomfisher


If gifs don't animate at all you might have Animations disabled in IE.
Try going to Tools > Internet Options > Advanced
and check Play Animations in Web Pages.
Send some script so we can see the implementation. I've used animated gif's with layers and haven't had any problems. Do you use visibility or display to show/hide layers?
Avatar of NukemWhumpus

ASKER

Here are the chunks of code I'm using.



<script language="javascript">
<!--
function doIt1(hideIt, showIt)
{
    if (document.getElementById){
      document.getElementById('Layer1').style.visibility = (hideIt) ? 'hidden' : 'visible';
      document.getElementById('Layer2').style.visibility = (showIt) ? 'hidden' : 'visable';
    }
    else if (document.all){
       document.all['Layer1'].style.visibility = (hideIt) ? 'hidden' : 'visible';
       document.all['Layer2'].style.visibility = (showIt) ? 'hidden' : 'visible';
    }
    else if (document.layers){
      document.layers['Layer1'].visibility = (hideIt) ? 'hide' : 'show';
      document.layers['Layer2'].visibility = (showIt) ? 'hide' : 'show';
    }
}
//-->
</script>


<div id="Layer2" style="visibility:visible; position:absolute; top: 176px; z-index:1;">
      Some text goes in here.
      This is what gets replaced on click.
      <input type="submit" onclick="doIt1(false, true)">
</div>

<div id="Layer1" style="visibility:hidden; position:absolute; top: 176px; z-index:1;">
                This is the new layer that shows after clicking on submit.
                Some more text.
      <img src="images/animated.gif">
</div>

the divs are each of the respective layers, as you can see. when the button on Layer1 is clicked it is to call the javascript function to swap out the layers.

I'm not having any problem swapping out the layers just as I want, its just that the image on the second layer wont animate.

As far as disabled animations in IE, the image animates if I go to http://site.com/animated.gif or if I create a page with just the image, but I can not see it in this context.

~Pete
ASKER CERTIFIED SOLUTION
Avatar of dutchfoxer
dutchfoxer
Flag of Netherlands image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
I tried your solution with no luck.
This is totally baffling me.
Thanks for the help though.

Any other suggestions from anyone?
Well you can put the page in question with the images online somewhere..... this way we can have a look.

If for all of us there are no problems with that page /image then it must be your Browser and/or settings, dont you think?

Else we can see what else is causing it.

Can you put it online somewhere?
Ok, to me, this has just become even more bizarre.

Its not possible to view the page, becasue the image is to be shown when a user submits a value, but the user must be logged in.
I tried to change the page to make it possible to view with out having to log in just to demonstrate the image, but then it worked. Is it possible that dynamic content could have caused the problem? I am using JSP technology with this page.

To swap the layers the javascript is called when submitting a form. I noticed when trying to reconstruct the page that the image will animate if <input type="button"> is used but will not animate if I use <input type="submit" src...> or <input type="button" ...>

As far as my browser causing the issue, I've tried to view it on different machines using IE, and with no luck. I've even tried machines of other people, with no luck.

~Pete
Here is the image I'm working with if that helps:

http://webapps.paydq.com/cableone/images/wait.gif
That is a nice working animated gif.

But the problem is solved right? Because when you use <input type="button"> it worked.

Otherwise we need to access the full code on the page, you found out youreself that the problem might be caused due to the code in the HTML.

If we test the code you posted above, we have no problems.....  if you put the above code, exactly as it is, in a normal HTML file and look at it in your browser, do you see the animation then?
Its still not fixed, because I found out that it only wont animate when you submit the form.

I have recreated the page as best I could.

http://webapps.paydq.com/cableone/tiles/pages/test.html

the form submits to a non-existant webpage, just so it has to wait to time out so that you can see the animation.

Thanks,
Pete
well, it works fine in netscape, but maybe you should put all your js in the head so it loads before you click and not while? maybe writing out the shorthand conditionals?
Okay, after more testing, I found out that the problem lies in the fact that I'm submitting a form. The image stops animating when the form is submitted, regardelss of layers. I've even tried other animated images.

Any new ideas, or should I ask in a HTML forum?

Thanks,
Pete
put return false; at the end of your onClick string. im pretty sure thats what you do for links/buttons with nothing happening after.
Why not with a href then? Then the form is not required.

<a href="#" onclick="doIt1(false, true)">click here</a>
The actual page is to submit user data to a controller. This is why I can't have it just as a link.

So if I understand correctly....
* you show a form and a submit button
* when submitting
    + you send the form details to a CGI script
    + you unhide the animated gif, which is actually a "please wait" notification
* the CGI script then sends back another Html page so the animated gif is replaced with a new page

Correct?

If so, then some alternatives...

option 1> Javascript, changing the submit button to display another text, like sending

<HEAD>

<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
function submitForm(s)  {
s.value = "  Sending...  ";
return true;
}
//  End -->
</script>
</HEAD>

<BODY>
<center>
<form name=myform onSubmit="return submitForm(this.submitbutton)">
Name:  <input type=text name=firstname size=20>
<input type=submit name=submitbutton value="All Done">
</form>
</center>

option 2> Use the above code to put       " doIt1(false, true) "    not in onclick but in onsubmit, just test it

option 3> Changing the order of actions so first the animation is displayed and after that you tell the browser to make contact with the CGI script:

<form name="theForm">
<input type=text name="formInput">
<a href="javascript:doIt1(false,true);document.theForm.submit();">Submit</a>
</form>
HTTP Status 404 - /cableone/tiles/pages/test.html
Oops, sorry. I took that down. I never figured out how to make the image continue to animate. I had to use multipal images, and then set up a Javascript array to rotate the image that is shown.


var imgAr = new Array();
imgAr[0] = new Array("wait1.gif", "wait2.gif", "wait3.gif", "wait4.gif", "wait5.gif"); //place name of images to rotate
 
// preload the images
if (document.images) {
 var rImg = new Array();
 for (var i=0; i<imgAr.length; i++) {
    rImg[i] = new Array();
    for (var j=0; j<imgAr[i].length; j++) {
      rImg[i][j] = new Image();
    rImg[i][j].src = "../images/" + imgAr[i][j];
     // NOTE: the path to the images!
     // change it as needed, or include path in imgAr items and remove it here.  
    }
  }
}
 
function initImgRotation() {
  // create rotating image objects here
  // arguments: image name, rotation speed, array number
  new rotateImgObj('img1',600,0);
 
// no need to edit code below this line!
///////////////////////////////////////////////////////////////////////////////////////
  for (var i=0; i<rotateImgObj.ar.length; i++) {
     rotateImgObj.ar[i].timer = setTimeout(rotateImgObj.ar[i].obj + ".rotate()",3000);
  }
}
 
rotateImgObj.ar = new Array(); // holds all rotating image objects defined
// constructor for rotating image objects
function rotateImgObj(nm,s,num) {
  this.speed = s; this.num = num; this.ctr=0; this.timer=0;
  this.imgObj = document.images[nm];
  this.obj = nm + "object"; eval(this.obj + "=this");
  rotateImgObj.ar[rotateImgObj.ar.length] = this;
}
 
rotateImgObj.prototype.rotate = rotateImg;
// controls rotation
function rotateImg() {
  if (this.ctr < rImg[this.num].length-1) this.ctr++;
  else this.ctr = 0;
  this.imgObj.src = rImg[this.num][this.ctr].src;
  this.timer = setTimeout(this.obj + ".rotate()",this.speed);
}
Also I gave the points to dutchfoxer for the most help. Although it wasnt the solution I was looking for he did help out quite a bit.
aaaahhh... now i've got it.... "wait*.gif"....

so you have form to be sent in the SAME page you have animation...

then there's no way to keep it animating in IE.

you see, just clicking "stop" button in IE causes it to stop all animation...

if you really need to have "wait please" animation displayed in the time between user clicked "submit" and the page get reloaded, try to put flash animation there. I think it will keep running up to the end of the page.