jQuery Window Width else if statement

Question

I am wondering why my last else if statement never gets executed. I am trying to do this:

$(document).ready(function() {
    function checkWidth() {
        var windowSize = $(window).width();

        if (windowSize <= 479) {
            console.log("screen width is less than 480");
        }
        else if (windowSize = 480 && windowSize <= 719) {
            console.log("screen width is less than 720 but greater than or equal to 480");
        }
        else if (windowSize = 720 && windowSize <= 959) {
            console.log("screen width is less than 960 but greater than or equal to 720");
        }
        else if (windowSize >= 960) {
            console.log("screen width is greater than or equal to 960");
        }
    }

    // Execute on load
    checkWidth();
    // Bind event listener
    $(window).resize(checkWidth);
});

Everything gets logged in the console except for the last else if. What am I doing wrong?

Thanks,

UPDATE:

For anyone still interested, I highly recommend the enquire.js plugin:

http://wicky.nillia.ms/enquire.js/

Hands down best approach I've found to recognizing media queries in JS.

Yes I have a screen that is wider than 960 pixels. I can console.log(windowSize) and get the right measurements. If I remove the two else if statements prior to ( >= 960 ) the last statement gets executed properly. Please help me understand why this isn't working with all of them. — beefchimi
– beefchimi, Commented Aug 23, 2012 at 1:23
You need to change the single = to a double == whenever you're not using a second operator. — Nicholas Cardot
– Nicholas Cardot, Commented Aug 23, 2012 at 1:24

Mahn · Accepted Answer · 2012-08-23 01:28:59Z

18

You are missing a couple >= in your code, and windowSize is not being compared but assigned a new value as a result of statements like windowSize = 480. Try this version instead:

$(document).ready(function() {
    function checkWidth() {
        var windowSize = $(window).width();

        if (windowSize <= 479) {
            console.log("screen width is less than 480");
        }
        else if (windowSize <= 719) {
            console.log("screen width is less than 720 but greater than or equal to 480");
        }
        else if (windowSize <= 959) {
            console.log("screen width is less than 960 but greater than or equal to 720");
        }
        else if (windowSize >= 960) {
            console.log("screen width is greater than or equal to 960");
        }
    }

    // Execute on load
    checkWidth();
    // Bind event listener
    $(window).resize(checkWidth);
});

edited Aug 23, 2012 at 1:28

answered Aug 23, 2012 at 1:23

Mahn

16.7k17 gold badges66 silver badges82 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Paul S. Over a year ago

You don't even need the "windowSize >= 480" etc bits because you already know this from the previous if.

beefchimi Over a year ago

Thank you guys so much. Everyone who contributed. I realize my mistake now. I really appreciate the help. I'll accept this as the correct answer as soon as I can (you guys are quick!)

adeneo · Accepted Answer · 2012-08-23 01:24:02Z

2

You're missing a greater than sign :

else if (windowSize = 720

and using just the equal sign ?

Try this instead:

$(document).ready(function() {
    function checkWidth() {
        var windowSize = $(window).width();

        if (windowSize < 480) {
            console.log("screen width is less than 480");
        }
        else if (windowSize < 720) {
            console.log("screen width is less than 720 but greater than or equal to 480");
        }
        else if (windowSize < 960) {
            console.log("screen width is less than 960 but greater than or equal to 720");
        }
        else {
            console.log("screen width is greater than or equal to 960");
        }
    }

    // Execute on load
    checkWidth();
    // Bind event listener
    $(window).resize(checkWidth);
});

FIDDLE

answered Aug 23, 2012 at 1:24

adeneo

319k29 gold badges410 silver badges392 bronze badges

3 Comments

Nicholas Cardot Over a year ago

That won't work because if your screen size is EXACTLY 480,720, or 960 it won't know what to do.

Nicholas Cardot Over a year ago

I accidentally hit the edit button instead of the comment button just below it. I just hit the backspace and then clicked the comment button. Did it lock it up or something?

adeneo Over a year ago

@NicholasCardot - Nope, I'm just slow! And I do the same thing all the time, hit that damn edit button when trying to leave a comment!

Jack · Accepted Answer · 2012-08-23 01:24:42Z

2

It's because of your else if statements. You're checking with a single equal sign, which is assigning the value.

if ( windowSize = 480 && windowSize <= 719 )

when you should be doing

if ( windowSize == 480 && windowSize <= 719 )

or >=, if that's the intended logic.

answered Aug 23, 2012 at 1:24

Jack

9,4182 gold badges36 silver badges47 bronze badges

Collectives™ on Stack Overflow

jQuery Window Width else if statement

3 Answers 3

2 Comments

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related