Question

I am building a responsive site, and as such require different functionality depending on the size of the window.

So if the screen is less than 964px wide, I want to disable my jquery call. If it’s more than 964px, I want to enable that same call.

This is what I got:
http://jsfiddle.net/frogfacehead/2Mdem/1/

Problem is, the disable part doesn’t work. Once it’s been enabled, it doesn’t disable even when the screen falls below 964px.

Any ideas?

Answer 1

Rather than using all those resources to attach the hover function to that element as the size of the page changes, why not check the size of the page during those callback functions?

$(".test").hover(function() {
            if (width > 964) {
                $(this).animate({
                    width: "100px"
                })
            }
        }, etc.

The problem is that you add a function to handle the hover event, but that function never gets removed. You are repeatedly adding it, as the width of the page changes. Just add it once, and then do your checks for what should happen within the handler of that function. As a bonus to working correctly, it should be a bit more efficient.