Log in

View Full Version : Frame by Frame animation show/hide div with setinterval dont work in IE


Hajad
02-23-2012, 06:44 PM
I tried to post this before, it seems that it dissapered so i try again appologies if it's posted twice.

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.



<!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>
mitchmalis
02-23-2012, 07:49 PM
You may want to try my show/hide the coding is in the post right above yours. It works great, but trying for a radio button also...
Mitch
Hajad
02-26-2012, 10:32 PM
Well! Now it's working but i don't like it. I had to use one function wit one setInterval for every image. I must be a better way, anyone? Here's what i got so far.


<!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>