CODEWITHSUNDEEP
javascript
FlyingUnderpants
FlyingUnderpants

Reputation: 101

Javascript skips else if?

Well obivously this will be a stupid mistake of mine because why sould a else if not work?

But well I made a mistake somewhere which I can't find and now my javascript just 'skips' my else if statement in my code. 

$(window).resize(function(){

    if ($(window).width() <= 1080) {
        responsiveLength = 2;
        maxMargin = -((imgLength - responsiveLength) * imgWidth);
        imgWrapper.css('margin-left','0');
    } else if ($(window).width() <= 700){
        console.log($(window).width());
        maxMargin = -((imgLength - 0) * imgWidth);
        imgWrapper.css('margin-left','0');
    } else {
        responsiveLength = 3;
        maxMargin = -((imgLength - responsiveLength) * imgWidth);    
        imgWrapper.css('margin-left','0');
    }

});

Thanks in advance

Upvotes: 2

Views: 68

Answers (3)

gurvinder372
gurvinder372

Reputation: 68413

It won't reach else-if since $(window).width() <= 1080 implies $(window).width() <= 700 as well.

I think you want to do

if ($(window).width() <= 1080 && $(window).width() > 700) {
    responsiveLength = 2;
    maxMargin = -((imgLength - responsiveLength) * imgWidth);
    imgWrapper.css('margin-left','0');
} else if ($(window).width() <= 700){
    console.log($(window).width());
    maxMargin = -((imgLength - 0) * imgWidth);
    imgWrapper.css('margin-left','0');
} else {
    responsiveLength = 3;
    maxMargin = -((imgLength - responsiveLength) * imgWidth);    
    imgWrapper.css('margin-left','0');
}

or reverse the order

if ($(window).width() <= 700) {
    responsiveLength = 2;
    maxMargin = -((imgLength - responsiveLength) * imgWidth);
    imgWrapper.css('margin-left','0');
} else if ($(window).width() <= 1080){
    console.log($(window).width());
    maxMargin = -((imgLength - 0) * imgWidth);
    imgWrapper.css('margin-left','0');
} else {
    responsiveLength = 3;
    maxMargin = -((imgLength - responsiveLength) * imgWidth);    
    imgWrapper.css('margin-left','0');
}

Upvotes: 1

Tushar
Tushar

Reputation: 87203

Arrange the conditions from lowest resolution to highest.

if ($(window).width() <= 700) {
    ....
} else if ($(window).width() <= 1080) {
    ....
} else {
    ....
}

Upvotes: 3

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167192

You need to swap these two because 700 is less than 1080 and never goes there.

if ($(window).width() <= 700) {
  console.log($(window).width());
  maxMargin = -((imgLength - 0) * imgWidth);
  imgWrapper.css('margin-left','0');
} else if ($(window).width() <= 1080) {
  responsiveLength = 2;
  maxMargin = -((imgLength - responsiveLength) * imgWidth);
  imgWrapper.css('margin-left','0');
} else {
  responsiveLength = 3;
  maxMargin = -((imgLength - responsiveLength) * imgWidth);    
  imgWrapper.css('margin-left','0');
}

Alternate solution, make sure the window size is more than 700px:

if ($(window).width() <= 1080 && $(window).width() > 700) {

Logic Explained

Let's consider the logic here.

  • ScreenSize: 600px
    LessThan 1080? Yes.
    Goes to first block.

  • ScreenSize: 1000px
    LessThan 1080? Yes.
    Goes to first block.

  • ScreenSize: 1600px
    LessThan 1080? No.
    Goes to third block.

Upvotes: 1

Related Questions