I'm trying to build a content slider. You can see what I have here :
http://musicwhynot.com/slide.php
There is no auto change. The only time a slide will change is when you click left or right.
In chrome, this page works perfectly.
When I head over to IE 10 or FF 26 it stops working right. You can go left once, but when you click the left button a second time, it does not show the animation. If you refresh the page, hit left, and then hit right: you see the 2 animations. You can go back and forth between the 1st slide and the 2nd slide, but try to move left or right a second time and it doesn't show the animation.
I'll attach my code. It includes a little php. I have this feeling I am missing one line. Just one thing and I'll be ok to move forward. After all day yesterday, and most of today using google I could really use a break!
Thanks so much.
Nick
<?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 {
from {left:0px;}
to {left:-<?php echo $slide_width; ?>px;}
}
@-webkit-keyframes right-to-left {
from {left:0px;}
to {left:-<?php echo $slide_width; ?>px;}
}
@-moz-keyframes right-to-left {
from {left:0px;}
to {left:-<?php echo $slide_width; ?>px;}
}
@keyframes left-to-right {
from {left:0px;}
to {left:<?php echo $slide_width; ?>px;}
}
@-webkit-keyframes left-to-right {
from {left:0px;}
to {left:<?php echo $slide_width; ?>px;}
}
@-moz-keyframes left-to-right {
from {left:0px;}
to {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) {
for (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").classList.remove("left-to-right");
document.getElementById("my-div").classList.remove("right-to-left");
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) {
for (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").classList.remove("left-to-right");
document.getElementById("my-div").classList.remove("right-to-left");
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() {
for (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>
