rame by Frame animation show/hide div with setinterval dont

This is the place for questions on any web related technologies

rame by Frame animation show/hide div with setinterval dont

Postby Hajad » Thu Feb 23, 2012 7:52 pm

This is a html5 document where i make a frame by frame animation (like a animated gif) with javascript by hiding and showing div's. It is working almost perfectly in all major browsers but Internet explorer 9. In IE it plays once then dissapear.

The reason why i want to do this is that in html 5 we can use svg (vector graphics) in browser with native support for svg, including IE 9.

The question is why does it not work in IE. Test this either like the example with four svg files or use any four gif's, jpg's or png files. If so, use an ordinary img tag in place of the embed used by me.

Greatful for any help with this and thanks.

Code: Select all
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Animated eyes</title>
<style type="text/css">
/*On div for every svg*/
#a {
   position:absolute;
   width:80px;
   height:50px;
   z-index:1;
   left: 0px;
   top: 0px;
}

#b {
   position:absolute;
   width:80px;
   height:50px;
   z-index:1;
   left: 0px;
   top: 0px;
}
#c {
   position:absolute;
   width:80px;
   height:50px;
   z-index:1;
   left: 0px;
   top: 0px;
}

#d {
   position:absolute;
   width:80px;
   height:50px;
   z-index:1;
   left: 0px;
   top: 0px;
}
#eye_wrapper{/*The div'sabove wrapped in this for easier placement*/
   position:absolute;
   width:80px;
   height:50px;
   z-index:2;
   left: 15px;
   top: 15px;
}
</style>



<script>
var eyes=["a","b","c","d"];

         
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";
         
         function dBort(){
         document.getElementById("d").style.display="none";
         if(document.getElementById("d").style.display="none"){
         eyes=["a","b","c","d"];
         }
         }
         setTimeout(dBort,1500);
         return;//close function
         if(document.getElementById("d").style.display="none"){
         var avbryt=setInterval(visaOga,100);
         }
         }
         }
         var avbryt=setInterval(visaOga,100);
      
</script>
</head>

<body>


<!--The div's invisible at start-->
<div id="eye_wrapper">
  <div id="a" style= display:none;>
    <embed src="0.svg" width="80" height="50" />
  </div>
 
  <div id="b" style= display:none;>
    <embed src="1.svg" width="80" height="50" />
   
   
  </div>
 
  <div id="c" style= display:none;>
    <embed src="2.svg" width="80" height="50" />
  </div>
  <div id="d" style= display:none;>
    <embed src="3.svg" width="80" height="50" />
  </div>
</div>


</body>
</html>
Hajad
 
Posts: 1
Joined: Thu Feb 23, 2012 7:48 pm
Flash Version: Adobe Flash CS5.5

Return to Related Technologies

Who is online

Users browsing this forum: No registered users and 1 guest