2

I'm having an issue on how I can set multiple conditions. Basically I have three conditions that would read or listen to browser viewport. The first and second conditions are working but the third condition doesn't seem to trigger. Is it because of the conflict with the second condition?

    if($(window).width() > 1280) {
        console.log('desktop');
    }

    else if ($(window).width() < 1280) {
        console.log('tablet');
    }

    else if ($(window).width() < 780) {
        console.log('mobile');
    }
2
  • 1
    your 3rd condition is included in the 2nd one. So you can use the third one before second. Commented Oct 4, 2017 at 7:15
  • If/else is not like switch. In any requirements matching condition it returns. Commented Oct 9, 2017 at 22:52

8 Answers 8

2

It is because of your second else/if. If $(window).width() is less than 780, it is also less than 1280

Change it to

else if ( $(window).width() >= 780 && $(window).width() < 1280) {
    console.log('tablet');
}
Sign up to request clarification or add additional context in comments.

Comments

2

Your second condition also includes the third one. Because every value which is below 780 is also below 1280. You need something like windowWidth < 1280 && windowWidth >= 780 to give the range.

const windowWidth = $(window).width();

if(windowWidth  > 1280) {
    console.log('desktop');
} else if (windowWidth  < 1280 && windowWidth  >= 780 ) {
   console.log('tablet');
} else if (windowWidth  < 780) {
   console.log('mobile');
}

Also it will be good to keep the window into a variable, not every time use with jQuery.

7 Comments

The only answer that includes a good description to why the "error" occurs. Should be accepted
This is not a good answer. Both else if contain redundant checks on windowsWidth
If you saying that this is not a good answer, probably you have a better solution. Show it us. One line statement and donwvote, what an interesting world
@SurenSrapyan below is my answer
And how does your solution better than this one? Maybe in performance, maybe in readability or something else. Only that you have used width less one time? Also why you have the last statement with else, QO has else if, maybe he wants also to check 480 resolution?
|
2

Here is a more concise example, but the condition rely on the order, some people do not like this style, but I think it is OK, and we can add a comment.

//Do not change the condition order
if($(window).width() <= 780) {
    console.log('mobile');
}

else if ($(window).width() <= 1280) {
    console.log('tablet');
}

else {
    console.log('desktop');
}

Edited: The condition should be * than and equal to ....

Comments

1

There is flaw in your second condition...below is the fix..hope it helps!!

 if($(window).width() > 1280) {
            console.log('desktop');
        }

        else if ($(window).width() < 1280 && $(window).width() >= 780) {
            console.log('tablet');
        }

        else if ($(window).width() < 780) {
            console.log('mobile');
        }

Comments

1

It's because the condition before < 780 is also met (ie. If the width is equal to 600 its inferior to 1280). Change the condition order or, better, improve the second condition :

if($(window).width() >= 1280) {
    console.log('desktop');
}
else if ($(window).width() < 1280 && $(window).width() >= 780) {
    console.log('tablet');
}
else if ($(window).width() < 780) {
    console.log('mobile');
}

You also forgot a case, if the user's screen resolution is equal to 1280, you'll never enter any of your conditions. I change > to >= to include that case.

Comments

1

you can try this also, it will satisfy your second condition

if ($(window).width() > 1280) {
  console.log('desktop');
}
else if ($(window).width() < 1280) {
  if ($(window).width() < 780) {
    console.log('mobile');
  } else {
    console.log('tablet');
  }
}

or

if ($(window).width() > 1280) {
      console.log('desktop');
    }
    else {
      if ($(window).width() < 780) {
        console.log('mobile');
      } else {
        console.log('tablet');
      }
    }

Comments

1

The correct way to do this would be to move your third condition up to the second spot.

When doing this kind of checks always place the most restricting condition first.

In your case, the tidiest way is:

var w = $(window).width();

if (w < 780) {               // most restrictive condition. Excludes all the others...
    console.log('mobile');
} else if (w < 1280) {       // this one includes the one above but it will never be triggered if w < 780
    console.log('tablet');
} else {                     // all the other cases
    console.log('desktop');
}

Contrary to what many said, there is no need for this else if statement:

else if (windowWidth < 1280 && windowWidth >= 780) { ... }

This adds an unnecessary, redundant check.

It sure is a light operation, but imagine that, instead of windowWidth < 1280 you were checking

functionForCalculatingWidth() : int {
   // huge amount of lines with expensive computation
   return result;
}

you would be calling the same function twice. See why it is bad design?


In the same way, if you were to check conditions based on the largest element (plus let's add another fictional condition), you would do:

var w = $(window).width();

if (w > 1280) {
    console.log('desktop');
} else if (w > 990) {
   console.log('weird device');
} else if (w > 780) {
    console.log('tablet');
} else {
    console.log('mobile');
}

Comments

0

Hope this will satisfy you you can check this.

Different is this shows width in console easy to understand this logic if you cant understand let me know

Here is fiddle

$(window).bind("resize", function() {
  sizewindow = $(this).width();
  console.log(sizewindow)
  if (sizewindow < 780) {
    console.log('mobile');
  } else if (780 < sizewindow < 1280) {
    console.log('szechuan sauce');
    if (sizewindow > 1280) {
      console.log('rick and morty gone for 2 years sad af')
    }
  }

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

2 Comments

why downvote what did i do wrong why so hate low reputation users
see my comment to @SurenSrapyan answer. I have pretty much the same reputation as you btw. Please do not get offended as the guy above. We need to provide the best answer we can to OP, and both of you are inserting redundant condition checks.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.