CODEWITHSUNDEEP
jqueryif-statementwindowwidth
beefchimi
beefchimi

Reputation: 1308

jQuery Window Width else if statement

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.

Upvotes: 4

Views: 44491

Answers (3)

Mahn
Mahn

Reputation: 16585

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);
});​

Upvotes: 18

Jack
Jack

Reputation: 9388

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.

Upvotes: 2

adeneo
adeneo

Reputation: 318172

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

Upvotes: 2

Related Questions