How would I disable JQuery/Javascript once the browser window is shrinked to a certain length?

Question

Right now I am working on a website that is fluid, but I am having some problems with the Jquery/Javascript. As of right now, once the user begins to scroll down the page, js fades the navigation bar in and changes the color of the text within the navigation bar. A dummy site with the link can be found at . However, once the browser is resized to 960px, I want the Jquery to disable because the effects that it provides are no longer needed. One of my professors at school said I should use window.length feature, but after looking it up and trying some things, I can't seem to figure it out. He said its relatively easy, but I think I might just be screwing some things up in my syntax as I am very new to Javascript and Jquery.

Here is the js code:

$(function() {
var navigationIn = false;


if ($(window).width() > 960) {

    $('body').animate({scrollTop: 0}, 10, function() {
        $(window).scroll(function() {
        var pos = $(this).scrollTop();

    //console.log("color", color);
    if (pos > 5 && navigationIn == false) {
        $('#navigation').animate({
                opacity: .95,
            }, 500);
        $('.menu').animate({
                color: "000000",
            }, 250);
        $('#whitelogo').animate({
                opacity: 0,
            }, 500);
        $('#bluelogo').animate({
                opacity: 1,
            }, 500);
            navigationIn = true;
        } else if (pos < 5 && navigationIn == true) {
        $('#navigation').animate({
                opacity: 0,
            }, 500);
        $('.menu').animate({
                color: "FFFFFF",
            }, 250);
        $('#whitelogo').animate({
                opacity: 1,
            }, 500);
        $('#bluelogo').animate({
                opacity: 0,
            }, 500);
        navigationIn = false;
    }
}); 
});
} else if () {
    }
});

Disable JS and jQuery sounds like the wrong approach here. You are coding a responsive design. Your responsive design just needs to work at small sizes too. "Work" in your design might be that you stop doing a bunch of things in the design because the size has gotten too small for that functionality, but it doesn't mean you shut off your code. Your code just looks at the size and makes an intelligent decision. In jQuery, you can use `$( window ).width();` to get the width of the window viewport and adjust your logic accordingly. — jfriend00, May 20 '14 at 23:24
Okay well I'm not exactly sure how to do that because I am a noob at this my syntax skills are not the greatest. — user3658647, May 20 '14 at 23:43
It's just basic `if` logic in javascript. `if ($(window).width() > 960) { do one thing } else { do other thing}`. — jfriend00, May 20 '14 at 23:45
I don't understand your question about posting updated code? It depends upon what you're trying to do. You can use the Edit link in your original post to add additional code to your question if it's related to the same question you originally asked. — jfriend00, May 21 '14 at 00:19
I updated my code, and it still is not working. My question should not be that hard to understand. I edited it in my main question section. — user3658647, May 21 '14 at 00:20
You really should not edit your question into a whole new question with new/different code. That isn't how StackOverflow works. You can ADD on additional code if you want. Your `if` statement must be inside the `.scroll()` handler so it is evaluated EVERYTIME a scroll event occurs, not just once like you have it now. — jfriend00, May 21 '14 at 00:21
I moved it inside the .scroll(0) handler, but inspect element on google chrome keeps saying Uncaught SyntaxError: Unexpected token ). It said that even before I moved the if statement into the .scroll() handler — user3658647, May 21 '14 at 00:25
Obviously you have some sort of syntax error in your actual code. I have posted suggested code as an answer below. — jfriend00, May 21 '14 at 00:28

score 0 · Answer 1 · answered May 21 '14 at 00:26

Here's your code with the suggested if statement that avoids all your scroll animation if the window width is less than 960 pixels:

$(function () {
    var navigationIn = false;
    $('body').animate({
        scrollTop: 0
    }, 10, function () {
        $(window).scroll(function () {
            if ($(window).width() > 960) {
                var pos = $(this).scrollTop();

                //console.log("color", color);
                if (pos > 5 && navigationIn == false) {
                    $('#navigation').animate({
                        opacity: .95,
                    }, 500);
                    $('.menu').animate({
                        color: "000000",
                    }, 250);
                    $('#whitelogo').animate({
                        opacity: 0,
                    }, 500);
                    $('#bluelogo').animate({
                        opacity: 1,
                    }, 500);
                    navigationIn = true;
                } else if (pos < 5 && navigationIn == true) {
                    $('#navigation').animate({
                        opacity: 0,
                    }, 500);
                    $('.menu').animate({
                        color: "FFFFFF",
                    }, 250);
                    $('#whitelogo').animate({
                        opacity: 1,
                    }, 500);
                    $('#bluelogo').animate({
                        opacity: 0,
                    }, 500);
                    navigationIn = false;
                }
            }
        });
    });
});

Thank you so much! Again, this is very new and frustrating to me and I'm a huge beginner so thanks. — user3658647, May 21 '14 at 00:29
So within my code, I had the else if statement, and it looks as if thats what was screwing up the code. Why is that exactly? — user3658647, May 21 '14 at 00:33
@user3658647 - you didn't have your braces and parens matched appropriately - the empty `else` block was put in the wrong place. You can always paste a block of code like this in here http://www.jshint.com/ and have it show you everything it thinks is wrong or could be done better. Some of the errors it reports are not really errors, but all are worth understanding what it is suggesting. — jfriend00, May 21 '14 at 00:36

How would I disable JQuery/Javascript once the browser window is shrinked to a certain length?

1 Answers1