Hey all,
I have two problems with the below javascript that I'm not sure why they're not behaving expected as they should. I'm almost positive it should work but it doesn't. First, the left button doesn't hide when the left most p tag (the first one) for group1 is active even though it should, and the right button doesn't hide when the right most p tag is active (the last one) for group1. As you can see, when the manageControls() function is called, a ternary operation is used to hide the left button, but it doesn't. I'm not sure why not and when at last p tag, it should hide last button but it doesn't.
Second problem: every 5 seconds it automates (courtesy of setInterval) a new p tag to fade in and the current p tag to fade out. But when I click on the right button during first p tag fade in, it correctly fades first p tag out and fades second p tag in. However, when fadeImg() is callled, it then fades the second p tag out and then fades it in AGAIN, and then it fades to the third. But in reality it should fade the third in and second out, not fading in and out the second twice:
<script>
$(".paging").show();
$(".paging a:first").addClass("active");
$("#group1 img:first").addClass("active");
$("#group1 p:first").addClass("active");
$(".slidernav a:first").addClass("active");
$active = $('.paging a.active');
$currLink = $(".slidernav a.active");
var imageWidth = $(".window").width();
var imageSum = $(".image_reel div").size();
var imageReelWidth = imageWidth * imageSum;
$(".image_reel p").css({
'opacity': '0',
'color': 'red'
});
$("#group1 p:first").animate({
opacity: 1,
left: 0
}, 800 );
$(".image_reel").css({'width' : imageReelWidth});
rotate = function(){
clearInterval(play);
var triggerID = $active.attr("rel") - 1;
var image_reelPosition = triggerID * imageWidth;
$(".paging a").removeClass('active');
$active.addClass('active');
$(".image_reel").animate({
left: -image_reelPosition
}, 500 );
clearInterval(playFade);
switch(triggerID){
case 0:
$next = $("#group1 img:first");
$nextgraph = $("#group1 p:first");
$currLink = $("#group1 div.slidernav a:first");
break;
case 1:
$next = $("#group2 img:first");
$nextgraph = $("#group2 p:first");
$currLink = $("#group2 div.slidernav a:first");
break;
case 2:
$next = $("#group3 img:first");
$nextgraph = $("#group3 p:first");
$currLink = $("#group3 div.slidernav a:first");
break;
case 3:
$next = $("#group4 img:first");
$nextgraph = $("#group4 p:first");
$currLink = $("#group4 div.slidernav a:first");
break;
}
if($next.length === 0){
$next = $(".image_reel img:first");
}
if($nextgraph.length === 0){
$nextgraph = $(".image_reel p:first");
}
fadeImg();
rotateSwitch();
};
//HERE'S THE FADEIMG FUNCTION - THIS IS WHERE PROBLEMS ARE OCCURRING I THINK!!!!
fadeImg = function(){
try {
$(".image_reel img").removeClass('active');
$next.addClass('active');
}
catch (e) {
console.log(e.message);
$nextGraph = $nextGraph.next();
return false;
}
$(".image_reel p").removeClass('active');
$nextgraph.addClass('active');
// alert($nextGraph.attr('class'));
$('.slidernav a').removeClass('active');
$currLink.addClass('active');
$(".image_reel img").animate({
opacity: 0
}, 500 );
$next.animate({
opacity: 1
}, 500 );
var triggerID = $active.attr("rel") - 1;
var image_reelPosition = triggerID * imageWidth;
$(".image_reel p").animate({
opacity: 0,
left: image_reelPosition + 500
}, 500 );
$nextgraph.animate({
opacity: 1,
left: image_reelPosition
}, 800 );
};
rotateSwitch = function(){
play = setInterval(function(){
$active = $('.paging a.active').next();
if ( $active.length === 0) {
$active = $('.paging a:first');
}
rotate();
}, 15000);
playFade = setInterval(function(){
$active = $('.paging a.active');
$currLink = $('.slidernav a.active').next();
$next = $(".image_reel img.active").parent().next().find('img');
$nextgraph = $(".image_reel p.active").next();
if($nextgraph[0].nodeName != "P"){
var nextgraphparent = $(".image_reel p.active").parent().attr("id");
$nextgraph = $("#" + nextgraphparent + " p:first");
}
if($next.length === 0){
var nextparent = $(".image_reel img.active").parent().parent().attr("id");
$next = $("#" + nextparent + " img:first");
$currLink = $("#" + nextparent + " .slidernav a:first");
}
fadeImg();
}, 5000);
};
rotateSwitch();
$(".paging a").click(function() {
$active = $(this);
clearInterval(play);
clearInterval(playFade);
rotate();
return false;
});
$nextGraph = $('#group1 p:first');
$('#group1 .slidernav').prepend("<a href='#' class='control' id='leftControl'>Back</a>").append("<a href='#' class='control' id='rightControl'>Forward</a>");
manageControls($nextGraph);
$('#group1 .slidernav a').bind('click', function(){
var triggerID = $active.attr("rel") - 1;
var image_reelPosition = triggerID * imageWidth;
$nextGraph = ($(this).attr('id')=='rightControl') ? $nextGraph.next() : $nextGraph.prev();
manageControls($nextGraph);
$(".image_reel p").animate({
opacity: 0,
left: image_reelPosition + 500
}, 500 );
$nextGraph.animate({
opacity: 1,
left: image_reelPosition
}, 800 );
clearInterval(playFade);
clearInterval(play);
fadeImg();
rotateSwitch();
});
function manageControls(currentGraph){
(currentGraph==$('#group1 p:first')) ? $('#leftControl').hide() : $('#leftControl').show();
(currentGraph==$('#group1 p:last')) ? $('#rightControl').hide() : $('#rightControl').show();
};
</script>
As you can see in the html, the #group1 div has three p tags:
<div class="image_reel">
<div id="group1">
<p class="first">Claim A</p>
<p class="second">Claim B</p>
<p class="third">Claim C</p>
<div class="slidernav">
</div>
</div>
<div id="group2">
<a href="#"><img src="images/reel_2.png" class="first" /></a>
<a href="#"><img src="images/reel_2b.png" class="second" /></a>
<a href="#"><img src="images/reel_2c.png" class="third" /></a>
<p class="first"> Claim A</p>
<p class="second"> Claim B</p>
<p class="third"> Claim C</p>
<div class="slidernav">
<a href="#fourth"> Claim A</a>
<a href="#fifth"> Claim B</a>
<a href="#sixth"> Claim C</a>
</div>
</div>
<div id="group3">
<a href="#"><img src="images/reel_3.png" class="first" /></a>
<a href="#"><img src="images/reel_3b.png" class="second" /></a>
<a href="#"><img src="images/reel_3c.png" class="third" /></a>
<p class="first"> Claim A</p>
<p class="second"> Claim B</p>
<p class="third"> Claim C</p>
<div class="slidernav">
<a href="#seventh"> Claim A</a>
<a href="#eighth"> Claim B</a>
<a href="#ninth"> Claim C</a>
</div>
</div>
<div id="group4">
<a href="#"><img src="images/reel_4.png" class="first" /></a>
<a href="#"><img src="images/reel_4b.png" class="second" /></a>
<a href="#"><img src="images/reel_4c.png" class="third" /></a>
<p class="first"> Claim A</p>
<p class="second"> Claim B</p>
<p class="third"> Claim C</p>
<div class="slidernav">
<a href="#tenth"> Claim A</a>
<a href="#eleventh"> Claim B</a>
<a href="#twelfth"> Claim C</a>
</div>
</div>
</div>
Thanks for any response.