css - After first onClick, animation no longer plays in FF 23, IE 10 -
i'm trying write basic content slider using css , javascript. there 1 php variable, sets width.
while in chrome, works correctly. click left many times want , each time shows animation correctly. click right moves right correctly. when switch firefox 23 or ie 10, stops working right.
the best way can explain it, click left, shows animation. click left again, , every time click left after, timeout changes slide. no animation. oddly enough, @ anytime click right button, shows correct animation first time, , again, time out changes slide, no animation. can go , forth. slide 1 slide 2, shows animation. slide 2 slide 1, shows animation.
it's there 1 thing i'm missing. switching 1 direction other key. "resetting" something... ?
thanks help, following code, locations , examples.
you can see live at: http://musicwhynot.com/slide.php working in chrome. fire fox , ie fail.
jsfiddle. doesn't work in browser , first time i've used it, @ least breaks code you. of course minus php : http://jsfiddle.net/769we/
and actual code:
<?php $slide_width=800; ?> <!doctype html> <html> <head> <style> .sliding_div { width:<?php echo $slide_width; ?>px; position:relative; animation-name: right-to-left; animation-duration: 1s; animation-timing-function: ease; animation-delay: 0s; animation-iteration-count: 1; animation-play-state:paused; backface-visibility: hidden; -moz-animation-name: right-to-left; -moz-animation-duration: 1s; -moz-animation-timing-function: ease; -moz-animation-delay: 0s; -moz-animation-iteration-count: 1; -moz-animation-play-state:paused; -moz-backface-visibility: hidden; -webkit-animation-name: right-to-left; -webkit-animation-duration: 1s; -webkit-animation-timing-function: ease; -webkit-animation-delay: 0s; -webkit-animation-iteration-count: 1; -webkit-animation-play-state:paused; -webkit-backface-visibility: hidden; } @keyframes right-to-left { {left:0px;} {left:-<?php echo $slide_width; ?>px;} } @-webkit-keyframes right-to-left { {left:0px;} {left:-<?php echo $slide_width; ?>px;} } @-moz-keyframes right-to-left { {left:0px;} {left:-<?php echo $slide_width; ?>px;} } @keyframes left-to-right { {left:0px;} {left:<?php echo $slide_width; ?>px;} } @-webkit-keyframes left-to-right { {left:0px;} {left:<?php echo $slide_width; ?>px;} } @-moz-keyframes left-to-right { {left:0px;} {left:<?php echo $slide_width; ?>px;} } </style> </head> <body style="background-color:grey;" onload="do_load();"> <center> <br /> <input type="button" onclick="move_last_slide();" value="<-" /> <input type="button" onclick="move_next_slide();" value="->" /><br /> <span id="output"></span> <br /><br /> <div style="overflow:hidden;width:<?php echo $slide_width; ?>px;height:400px;background-color:white;"> <div class="sliding_div" id="my-div"> <div id="div0" style="width:<?php echo $slide_width; ?>px;height:400px;position:absolute;top:0px;left:0px;display:inline-block;opacity:1;"> <table width="100%" height="100%" border="1"><tr><td align="center" valign="middle">0</td></tr></table> </div> <div id="div1" style="width:<?php echo $slide_width; ?>px;height:400px;position:absolute;top:0px;left:0px;display:inline-block;opacity:0;"> <table width="100%" height="100%" border="1"><tr><td align="center" valign="middle">1</td></tr></table> </div> <div id="div2" style="width:<?php echo $slide_width; ?>px;height:400px;position:absolute;top:0px;left:0px;display:inline-block;opacity:0;"> <table width="100%" height="100%" border="1"><tr><td align="center" valign="middle">2</td></tr></table> </div> <div id="div3" style="width:<?php echo $slide_width; ?>px;height:400px;position:absolute;top:0px;left:0px;display:inline-block;opacity:0;"> <table width="100%" height="100%" border="1"><tr><td align="center" valign="middle">3</td></tr></table> </div> </div> </div> </center> <script language="javascript" type="text/javascript"> var num_slides=3; // includes 0! var cur_slide=0; var last_slide; var next_slide; var in_motion=0; var slide_width = <?php echo $slide_width; ?>; function do_load() { change_slide(0) }; function change_slide(new_slide_num) { cur_slide = new_slide_num; if ( cur_slide < 0 ) { cur_slide=num_slides; } if ( cur_slide > num_slides ) { cur_slide = 0; } last_slide = cur_slide - 1; if ( last_slide < 0 ) { last_slide=num_slides; } next_slide = cur_slide + 1; if ( next_slide > num_slides ) { next_slide = 0; } document.getelementbyid("output").innerhtml = "cur_slide = " + cur_slide + ", num_slides = " + num_slides + ", next_slide = " + next_slide + ", last_slide = " + last_slide; }; function move_next_slide() { if (in_motion==0) { (var i=0;i<=num_slides;i++) { document.getelementbyid("div" + i).style.opacity="0"; } document.getelementbyid("div" + cur_slide).style.opacity="1"; document.getelementbyid("div" + cur_slide).style.left = ("0px"); document.getelementbyid("div" + next_slide).style.opacity="1"; document.getelementbyid("div" + next_slide).style.left = (slide_width + "px"); cur_slide++; change_slide(cur_slide); in_motion=1; document.getelementbyid("my-div").classlist.remove("sliding_div"); document.getelementbyid("my-div").offsetwidth = document.getelementbyid("my-div").offsetwidth; document.getelementbyid("my-div").classlist.add("sliding_div"); document.getelementbyid("my-div").style.webkitanimationname="right-to-left"; document.getelementbyid("my-div").style.mozanimationname="right-to-left"; document.getelementbyid("my-div").style.animationname="right-to-left"; document.getelementbyid("my-div").style.animationplaystate="running"; document.getelementbyid("my-div").style.webkitanimationplaystate="running"; document.getelementbyid("my-div").style.mozanimationplaystate="running"; settimeout("move_done()", 1000); } }; function move_last_slide() { if (in_motion==0) { (var i=0;i<=num_slides;i++) { document.getelementbyid("div" + i).style.opacity="0"; } document.getelementbyid("div" + cur_slide).style.opacity="1"; document.getelementbyid("div" + cur_slide).style.left = ("0px"); document.getelementbyid("div" + last_slide).style.opacity="1"; document.getelementbyid("div" + last_slide).style.left = "-" + slide_width + "px"; cur_slide--; change_slide(cur_slide); in_motion=1; document.getelementbyid("my-div").classlist.remove("sliding_div"); document.getelementbyid("my-div").offsetwidth = document.getelementbyid("my-div").offsetwidth; document.getelementbyid("my-div").classlist.add("sliding_div"); document.getelementbyid("my-div").style.webkitanimationname="left-to-right"; document.getelementbyid("my-div").style.mozanimationname="left-to-right"; document.getelementbyid("my-div").style.animationname="left-to-right"; document.getelementbyid("my-div").style.animationplaystate="running"; document.getelementbyid("my-div").style.webkitanimationplaystate="running"; document.getelementbyid("my-div").style.mozanimationplaystate="running"; settimeout("move_done()", 1000); } }; function move_done() { (var i=0;i<=num_slides;i++) { document.getelementbyid("div" + i).style.opacity="0"; } document.getelementbyid("div" + cur_slide).style.opacity="1"; document.getelementbyid("div" + cur_slide).style.left = "0px"; in_motion="0"; }; </script> </body> </html>
Comments
Post a Comment