CODEWITHSUNDEEP
javascriptjqueryhtml
LManer311
LManer311

Reputation: 77

jquery div slider not functioning correctly

I'm trying to create a div slider with next and back buttons. When you reach the end of the divs, the next button goes away and vice versa with back button. My issue is when I press the next button, the slider functions properly but when I press the back button immediately afterwards, it slides back a div but then does not decrease the current div counter. It instead increments it by one. Now if I click back again, it decreases the current div by and functions properly.

jQuery

var div_name = "1";
var current_div = 1;
var first_run = true;

$(function(){

    function scrollToNextAnchor(aid){
        // if this is the first time you've pressed the next button
        if (first_run == true) {
            $(".back").css('display','block');  //display the back button
            current_div = 2; //set the current div to 2
            first_run = false; //set first run to false
        }
        else {
            $(".back").css('display', 'block'); //display the back button
        }
        console.log("Current Div: " + current_div); //output to log

        var aTag = $("a[name='"+ aid +"']");  
        $('body').animate({
            scrollLeft: aTag.offset().left
        }, "slow",  //perform slide animation
        function() { 
            //this is where I need to put the .attr stuff
            var next_div = "#id" + (current_div + 1); //set next button to next div
            var prev_div = "#id" + (current_div - 1); //set back button to previous div

            if (current_div == 5) { //if you're on the last div
                $(".forward").css('display', 'none'); //remove the next button
                $(".back").attr('href', "#id4"); //make the back button the previous            current_div = 4; // set the current div to 4
            }
            else { 
                $(".forward").attr('href', next_div); //set next button to next div
                $(".back").attr('href', prev_div); //set back button to previous div
                current_div++;  //increment div by 1
            }
        });
    };

    function scrollToPrevAnchor(aid){
        $(".forward").css('display', 'block');  // display the next button
        console.log("Current Div: " + current_div); //output to console
        var aTag = $("a[name='"+ aid +"']");
        $('body').animate({
            scrollLeft: aTag.offset().left
        }, "slow", //perform animation
        function() { 
            //this is where I need to put the .attr stuff
            var next_div = "#id" + (current_div + 1); //set next button to next div
            var prev_div = "#id" + (current_div - 1); //set back button to previous div
            if(current_div == 1) { //if you're on the first div
                $(".back").css('display', 'none'); //remove the back button
            }
            else {  
                $(".forward").attr('href', next_div); //set next button to next div
                $(".back").attr('href', prev_div); //set back button to previous div
                current_div--; //decrease current div by 1
            }
        });
    };

    $(".forward").click(function() { //click the next button
        var div_name = $(this).attr("href");
        scrollToNextAnchor(div_name);
    });

    $(".back").click(function() { //click the back button
        var div_name = $(this).attr("href");
        scrollToPrevAnchor(div_name);
    });
});

HTML

<div class="next">
    <span style="font-size:48px;">
        <a class="forward" href="#id2">&nbsp;></a>
    </span>
</div>
<div class="prev">
    <span style="font-size:48px;">
        <a class="back" style="display:none;">&nbsp;<</a>
    </span>
</div>

Upvotes: 0

Views: 75

Answers (1)

Ian Clark
Ian Clark

Reputation: 9357

My issue is when I press the next button, the slider functions properly but when I press the back button immediately afterwards, it slides back a div but then does not decrease the current div counter.

This is because you're de/incrementing your current_div counter on animation complete, rather than immediately. The .animate() method takes the following arguments:

.animate( properties [, duration ] [, easing ] [, complete ] )

Perhaps you should also look at calling .stop() on your animated element prior to calling another animation.

Here are two quick fiddles demonstrating the differences between incrementing on animation complete and cancelling the previous animation and incrementing immediately, I hope they offer some insight.

Upvotes: 1

Related Questions