CODEWITHSUNDEEP
javascriptjquery
sameer manek
sameer manek

Reputation: 763

sliding through divs using next and previous buttons

I am trying to slide through 2 different divs on my page with 2 buttons - next and previous.

it is basically like a setup wizard that you see while installing a software.

so here is the mark up:

<div id="container">

        <div id="box1" class="box">
            <button id="nxt">Next</button>
            <button id="prv">Previous</button>
        </div>
        <div id="box2" class="box">
            <button id="nxt">Next</button>
            <button id="prv">Previous</button>
        </div>

    </div>

and here is the JQuery for both buttons:

$('#nxt').click(function() {

                    $(this).parent(".box").animate({left: '-150%'}, 500 );
                    $(this).parent(".box").next(".box").animate({left: '50%'},500);
        });
 $('#prv').click(function() {

            $(this).parent(".box").animate({left: '150%'}, 500 );
            $(this).parent(".box").prev(".box").animate({left: '50%'},500);
            });

I am able to do perform the "next" operation but not the "previous" one, there is a mistake with jquery, please help me with that.

you can also have a glance at this fiddle

Thank You

Upvotes: 1

Views: 4115

Answers (3)

Ivan Matveev
Ivan Matveev

Reputation: 235

You use same id for buttons in first div and in second div. It is not right and that's the source of problem. Check out this fiddle to see right version. 

$('#nxt').click(function() {
            $(this).parent(".box").animate({left: '-150%'}, 500 );
            $(this).parent(".box").next(".box").animate({left: '50%'},500);
});
$('#prv1').click(function() {
    $(this).parent(".box").animate({left: '150%'}, 500 );
    $(this).parent(".box").prev(".box").animate({left: '50%'},500);
});
#container {
    position: absolute;
    margin: 0px;
    padding: 0px;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.box {
    position: absolute;
    width: 50%;
    background-color: white;
    height: 500px;
    line-height: 300px;
    font-size: 50px;
    text-align: center;
    border: 2px solid black;
    left: 50%;
    top: 100px;
    margin-left: -25%;
}

#box2 {
    left: 150%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">

            <div id="box1" class="box">
                <button id="nxt">Next</button>
                <button id="prv">Previous</button>
            </div>
            <div id="box2" class="box">
                <button id="nxt1">Next</button>
                <button id="prv1">Previous</button>
            </div>

        </div>

Upvotes: 0

Atula
Atula

Reputation: 2173

you have just missed .animate({left: '-50%'} in $('#prv').click(function(){}

JSFiddle link

Upvotes: 0

Bhushan Kawadkar
Bhushan Kawadkar

Reputation: 28513

You must not use same ids for multiple elements. Use class attribute instead, see below markup and jquery;

HTML: Change id to class for previous and next buttons

<div id="container">
    <div id="box1" class="box">
       <button class="nxt">Next</button>
       <button class="prv">Previous</button>
    </div>
    <div id="box2" class="box">
       <button class="nxt">Next</button>
       <button class="prv">Previous</button>
    </div>

</div>

jQuery: make changes in jquery selector for class attribute and keep rest of the code as it is.

$('.nxt').click(function() {
    $(this).parent(".box").animate({left: '-150%'}, 500 );
    $(this).parent(".box").next(".box").animate({left: '50%'},500);
});

$('.prv').click(function() {    
    $(this).parent(".box").animate({left: '150%'}, 500 );
    $(this).parent(".box").prev(".box").animate({left: '50%'},500);
});

JSFiddle Demo

Upvotes: 1

Related Questions