CODEWITHSUNDEEP
javascriptjqueryif-statement
andy
andy

Reputation: 2754

else if statement not working in jquery

I removed the variable names and just put the values in for simplicities sake.

Can't work out why this doesn't work properly, the else statement works fine, the if statement works fine but the else if part doesn't.

 if (scrollTop > 200) {

    $('.vote-next-hover').css({

        position: 'fixed',
        top: '50px',
        width: statuscontain,

    });

 } 

 else if (scrollTop > 5500) {

     $('.vote-next-hover').css({

        position: 'absolute',
        top: '',
        width: '',

     });

 } 

else {

  $('.vote-next-hover').css({

        position: 'relative',
        top: '',
        width: '',
    });

}

Scroll 200px, fires the if statement, scroll back to less than 200 and it fires the else statement, but at no point does it fire the else if statement.

I thought it would sort of be - Condition 1 met, fires - Condition 2 met, fires - Condition 3 met, fires?

Upvotes: 1

Views: 5587

Answers (5)

aprasty
aprasty

Reputation: 1

This logic error

$('#crud_interval').bind("change", function() {

if( $('#crud_interval').val() ==='Daily' ) { //not running
    $('#crud_weekly_day').hide();
    $('#crud_monthly_date').hide();
} else if( $('#crud_interval').val() ==='Weekly' ) { //not running
    $('#crud_weekly_day').show();
    $('#crud_monthly_date').hide();
} else {
    $('#crud_weekly_day').hide();
    $('#crud_monthly_date').show();
}

});

Upvotes: -2

raina77ow
raina77ow

Reputation: 106483

You should swap the if and else if clauses. See, if scrollTop value is greater than 5500, it's definitely greater than 200 - therefore it will pass the very first check quite well, making the second one meaningless.

So if (scrollTop > 5500) should go first in your code, followed by else if (scrollTop > 200) check.

I wonder did you know that the same branching logic could be written with... switch?

var hoverStyle = { position: 'relative', top: '', width: '' };
switch (true) {
  case scrollTop > 5500:
    hoverStyle.position = 'absolute';
    break;
  case scrollTop > 200:
    hoverStyle = { position: 'fixed', top: '50px', width: statuscontain };
}
$('.vote-next-hover').css(hoverStyle);

Some people even consider it more readable than if-elseif-else. But of course the same restrictions apply there - the less common cases should go first (or should be re-checked later).

As a sidenote, I really think there's no point duplicating $('.vote-next-hover').css() call within the branches. It's enough to separate only different parts of code - in this case, setting up the .css() param.

Upvotes: 4

Buzinas
Buzinas

Reputation: 11733

"Scroll 200px, fires the if statement, scroll back to less than 200 and it fires the else statement, but at no point does it fire the else if statement."

This is a logic error. Since any number higher than 5500 is also higher than 200, and when you use else if you're saying that the first criteria was not true.

You should change your code to:

if (scrollTop > 5500) {
    $('.vote-next-hover').css({
        position: 'absolute',
        top: '',
        width: '',
    });    
}
else if (scrollTop > 200) {                      
    $('.vote-next-hover').css({
        position: 'fixed',
        top: '50px',
        width: statuscontain,
    });

}
else {
    $('.vote-next-hover').css({

        position: 'relative',
        top: '',
        width: '',
    });    
}

Upvotes: 0

Quintec
Quintec

Reputation: 1114

The if/else if/else block should only run one of the three choices. For example:

var test = 4;
if (test === 4) { //true
    test = 3;
} else if(test === 3) {//does not do, already did one
    test = 0
} else {
    test = “something”
}

So you need three if blocks, not if/else if/else.

Upvotes: 1

Blair McMillan
Blair McMillan

Reputation: 5349

Say you have scrolled to 6000, 6000 is greater than 200, so the first condition is met. Then because you have an else if it doesn't test the second condition.

You have two options:

Add the scrollTop > 5500 check to inside the > 200 check, or replace the order of the if, else if to put the > 5500 check first, then then > 200 check.

if (scrollTop > 200) {
    if (scrollTop > 5500) {
        $('.vote - next - hover ').css({
            position: 'absolute ',
            top: '',
            width: '',
        });
    } else {
        $('.vote - next - hover ').css({
            position: 'fixed ',
            top: '50px ',
            width: statuscontain,
        });
    }
} else {
    $('.vote - next - hover ').css({
        position: 'relative ',
        top: '',
        width: '',
    });
}

Upvotes: 0

Related Questions