jQuery stop left animation before div moves off screen

Question

I have created a basic slider for a form, once one section of the form is complete, the user clicks 'Next' and the next section slides in....if the user wants to go back they click prev etc.

My porblem is that if a user starts out by clicking "Prev" then the form slides the wrong way and shows blank, so I need to disable the buttons when on the first and last section of the form.

My code for the slider is simple:

$(document).ready(function(){
//next/prev buttons

$("#calc_next").click(function(){
    $("#calc_container").animate({
        left: '-=800'
    });
});
$("#calc_prev").click(function(){
    $("#calc_container").animate({
        left: '+=800'
    });
});

You can see an example of my work here http://www.samskirrow.com/projects/distr/index3.html

and a jsfiddle here http://jsfiddle.net/5udRZ/

Math chiller · Accepted Answer · 2013-09-10T11:09:07.003

0

set a if statement inside $("#calc_prev").click(function(){ like so

$("#calc_prev").click(function(){
    if($("#calc_container").position().left >= 0 ) 
        {return;}
    else { 
        $("#calc_container").animate({
            left: '+=800'
        });
    }
});

edited Sep 10 '13 at 11:09

answered Sep 10 '13 at 10:37

Math chiller

4,123
6
28
44

@SamSkirrow well i cant test it if you dont make a fiddle.... can you find out which parts _do_ work (use `console.log()` on each line) its hard to work in the dark over here. – Math chiller Sep 10 '13 at 10:50
@SamSkirrow kk i got it use `$("#calc_container").position().left` instead of `$("#calc_container").attr("left")` gonna edit in a sec – Math chiller Sep 10 '13 at 11:08
prev animation could be in progress when you check left pos and you will get wrong value to compare – Pavel Nazarov Aug 09 '18 at 15:50

jQuery stop left animation before div moves off screen

1 Answers1