Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New to the CF scene
    Join Date
    Feb 2012
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts

    frame by frame animation dont work in IE9 working in all other browsers

    I' am trying to do a frame by frame animation, lik an animated gif. I am using svg (vector graphics) and IE9 has native support for svg. The code functions in every other browser but IE9 plays the animation once then nothing. If you would like to try and not have svg files you can use whatever gif,jpg or png just put an img-tag where i have embed.
    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Animation</title>
    <style type="text/css">
    /*One div per image all uses this class*/
    .eyesPos {
    	position:absolute;
    	width:80px;
    	height:50px;
    	z-index:1;
    	left: 0px;
    	top: 0px;
    }
    
    
    #eye_wrapper{/*This is a master div for easy placement of the others*/
    	position:absolute;
    	width:80px;
    	height:50px;
    	z-index:2;
    	left: 275px;
    	top: 200px;
    }
    </style>
    
    
    
    <script>
    var eyes=["a","b","c","d"];//Image id in this array
    var startAnim=setInterval(visaOga,100);//Animation speed
    			
    function visaOga(){
    		document.getElementById(eyes.splice(0,1)).style.display="block";
    		if(eyes.length==0){
    			document.getElementById("a").style.display="none";
    			document.getElementById("b").style.display="none";
    			document.getElementById("c").style.display="none";
    			
    			dBort = function(){
    			document.getElementById("d").style.display="none";
    			eyes=["a","b","c","d"];
    			}
    			setTimeout(dBort,1500);//So last image is shown 1.5 sec
    			return;//Aborts - dBort -. Sequence can start over
    			if(document.getElementById("d").style.display=="none"){
    			startAnim;//Strts sequence if last image invisible
    			}
    			}
    			}
    
                </script>
    </head>
    
    <body>
    
    
    <!--Images in own div invisible at start-->
    <div id="eye_wrapper">
      <div class="eyesPos" id="a" style= display:none;>
        <embed src="0.svg" width="80" height="50" />
      </div>
      
      <div class="eyesPos" id="b" style= display:none;>
        <embed src="1.svg" width="80" height="50" />
        </div>
      
      <div class="eyesPos" id="c" style= display:none;>
        <embed src="2.svg" width="80" height="50" />
      </div>
      
      <div class="eyesPos" id="d" style= display:none;>
        <embed src="3.svg" width="80" height="50" />
      </div>
    </div>
    
    
    
    
    
    </body>
    </html>

  • #2
    Senior Coder Logic Ali's Avatar
    Join Date
    Sep 2010
    Location
    London
    Posts
    1,028
    Thanks
    0
    Thanked 207 Times in 202 Posts
    Code:
      if(document.getElementById("d").style.display=="none")
         {
           startAnim;//Strts sequence if last image invisible
         }
    The above code is never executed and would have no effect even if it were.

    I think the trouble is that during the delay before dBort is executed, the outer function is still being called repeatedly, which keeps the array at 0, which generates multiple timeouts for dBort.

    The whole algorithm needs to be re-thought, preferably without any array manipulation.

  • #3
    New to the CF scene
    Join Date
    Feb 2012
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks for your replay. You are absolutely right about the if statement., was some leftover code in my experimenting. You have some sugestions i am gonna try, thanks. But the big question remains. Why does it not work in IE9 when it works everywere else?. And also why do you think i am better off without the Array?

  • #4
    New to the CF scene
    Join Date
    Feb 2012
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Working but i don't like it

    OK! now it's working. I would like to know if anyone has a more structured way of doing this. It's to many functions and setInterval it must be a better way. Or am I wrong? Is this the way in javascript to do this kind of animation?

    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Knubert ögon</title>
    <style type="text/css">
    /*En div per öga, fyra stycken, använder denna klass*/
    .eyesPos {
    	position:absolute;
    	width:80px;
    	height:50px;
    	z-index:1;
    	left: 0px;
    	top: 0px;
    }
    
    
    /*Omsluter de andra divarna för enklare placering*/
    #eye_wrapper{
    	position:absolute;
    	width:80px;
    	height:50px;
    	z-index:2;
    	left: 275px;
    	top: 200px;
    }
    </style>
    
    <script>
    var startAnim1=setInterval(visaOga1,0);
    var startAnim2=setInterval(visaOga2,100);
    var startAnim3=setInterval(visaOga3,200);
    var startAnim4=setInterval(visaOga4,300);
    setInterval(dBort,3500);			
    function visaOga1(){
    	document.getElementById("a").style.display="block";
    	clearInterval(startAnim1);
    }
    function visaOga2(){
    	
    	document.getElementById("a").style.display="none";
    	document.getElementById("b").style.display="block";
    	clearInterval(startAnim2);
    }
    function visaOga3(){
    	
    	document.getElementById("b").style.display="none";
    	document.getElementById("c").style.display="block";
    	clearInterval(startAnim3);
    }
    function visaOga4(){
    	
    	document.getElementById("c").style.display="none";
    	document.getElementById("d").style.display="block";
    	clearInterval(startAnim4);
    }
    
    function dBort(){
    document.getElementById("d").style.display="none";
    startAnim1=setInterval(visaOga1,0);
    startAnim2=setInterval(visaOga2,100);
    startAnim3=setInterval(visaOga3,200);
    startAnim4=setInterval(visaOga4,300);
    }
    </script>
                
    </head>
    
    <body>
    
    
    <!--Ögonen i varsin - div - dolda från början-->
    <div id="eye_wrapper">
      <div class="eyesPos" id="a" style= display:none;>
        <embed src="0.svg" width="80" height="50" />
      </div>
      
      <div class="eyesPos" id="b" style= display:none;>
        <embed src="1.svg" width="80" height="50" />
        </div>
      
      <div class="eyesPos" id="c" style= display:none;>
        <embed src="2.svg" width="80" height="50" />
      </div>
      
      <div class="eyesPos" id="d" style= display:none;>
        <embed src="3.svg" width="80" height="50" />
      </div>
    </div>
    
    
    
    
    
    </body>
    </html>

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    Try this:
    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Knubert ögon</title>
    <style type="text/css">
    /*En div per öga, fyra stycken, använder denna klass*/
    .eyesPos {
    	position:absolute;
            display: none;
    	width:80px;
    	height:50px;
    	z-index:1;
    	left: 0px;
    	top: 0px;
    }
    
    
    /*Omsluter de andra divarna för enklare placering*/
    #eye_wrapper{
    	position:absolute;
    	width:80px;
    	height:50px;
    	z-index:2;
    	left: 275px;
    	top: 200px;
    }
    </style>
    
    <script type="text/javascript">
    var eyeDivs = [ ];
    var currentEye = 0;
    
    function animate( )
    {
        eyeDivs[currentEye].style.display = "none";
        currentEye = ( currentEye + 1 ) % eyeDivs.length;
        eyeDivs[currentEye].style.display = "block";
    }
    
    function startEyes( )
    {
        for ( var e = 0; e < 9999; ++e )
        {
            var eye = document.getElementById("eyes"+e);
            if ( eye == null ) break; // stop when no more eyesN found
            eyeDivs[e] = eye; // save a reference to eyesN
        }
        eyeDivs[0].style.display = "block"; // start first one
        setInterval( animate, 100 );
    }
    
    window.onload = startEyes;
    
    </script>
    </head>
    <body>
    <!--Ögonen i varsin - div - dolda från början-->
    <div id="eye_wrapper">
      <div class="eyesPos" id="eyes0">
        <embed src="0.svg" width="80" height="50" />
      </div>
      
      <div class="eyesPos" id="eyes1">
        <embed src="1.svg" width="80" height="50" />
        </div>
      
      <div class="eyesPos" id="eyes2">
        <embed src="2.svg" width="80" height="50" />
      </div>
      
      <div class="eyesPos" id="eyes3">
        <embed src="3.svg" width="80" height="50" />
      </div>
    </div>
    </body>
    </html>
    You can add as many <div class="eyesPos"> as you want using this code.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #6
    New to the CF scene
    Join Date
    Feb 2012
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Great now we are getting somerwere. But it's one problem. In my example i have a delay so that last image stays before repeating. Any sugestions?

  • #7
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    Trivial.
    Code:
    <script type="text/javascript">
    var eyeDivs = [ ];
    var currentEye = 0;
    var shortDelay = 100;
    var longDelay = 3500; // change as you wish
    
    function animate( )
    {
        eyeDivs[currentEye].style.display = "none";
        currentEye = ( currentEye + 1 ) % eyeDivs.length;
        eyeDivs[currentEye].style.display = "block";
        setTimeout( animate, ( currentEye >= eyeDivs.length - 1) ? longDelay : shortDelay;
    }
    
    function startEyes( )
    {
        for ( var e = 0; e < 9999; ++e )
        {
            var eye = document.getElementById("eyes"+e);
            if ( eye == null ) break; // stop when no more eyesN found
            eyeDivs[e] = eye; // save a reference to eyesN
        }
        eyeDivs[0].style.display = "block"; // start first one
        setTimeout( animate, 100 );
    }
    
    window.onload = startEyes;
    
    </script>
    Change shortDelay and longDelay there to however long you want them to be.

    The >= is really going to be a test for ==, but I like being paranoid.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    Hajad (02-27-2012)

  • #8
    New to the CF scene
    Join Date
    Feb 2012
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Smile Thanks a million - Old Pedant

    Wow! you got it. Thank you so mucht. One small "typo" in the code if someone else following this. It's missing one parenteces in the end of the line...
    Code:
    setTimeout( animate, ( currentEye >= eyeDivs.length - 1) ? longDelay : shortDelay;
    Should be...
    Code:
    setTimeout( animate, ( currentEye >= eyeDivs.length - 1) ? longDelay : shortDelay);
    I hope that i don't affend you for pointing that out.
    Thanks again!

  • #9
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    Oops...that's what comes from trying to write code in this silly little tiny <textarea> window. Sometimes, I actually use notepad, but this time I was lazy. Sorry! Good catch.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •