Disable event handler below a certain viewport width

Question

I'm currently trying to disable a script when the window width is less than 700px. I have looked at the advice on other posts but nothing has work as of yet.

window.onresize = function () {
    if(window.innerWidth < 700) {
        $(window).bind('scroll', function() {
            if ($(window).scrollTop() > 100) {
                $('#projectinfo').hide();
            } else {
                $('#projectinfo').show();
            }
        });
    }
}

Answer 1

The problem is that you never unbind your event handler once it has been attached to the window. I suggest you also do not bind the scroll event handler every time the window.resize event triggers, because this is an extremely costly event performance-wise. Also, you keep rebinding an already existing handler which, if it works at all, is still horribly bad practice.

What you probably really want is to decide on document.ready whether to attach the scroll handler or not. If the resize use case is really relevant (web users don't usually ever resize their browser window while viewing a specific page, it's just what web frontend developers keep doing to check the responsiveness of their work), first test if your scroll handler is currently attached to window and only add it if it is not and (&&) your window.innerWidth >= 700 . Otherwise, check again if the scroll handler exist, and unbind it in case it exists and window.innerWidth < 700 .

http://api.jquery.com/unbind/

Also, please note that you can name events when binding by using the event.name syntax when declaring the binding. Find this in the jQuery docs herefor:

Using Namespaces

Instead of maintaining references to handlers in order to unbind them, we can namespace the events and use this capability to narrow the scope of our unbinding actions. As shown in the discussion for the .bind() method, namespaces are defined by using a period ( . ) character when binding a handler:

 $("#foo").bind("click.myEvents", handler ); 

When a handler is bound in this fashion, we can still unbind it the normal way:

 $("#foo").unbind("click"); 

However, if we want to avoid affecting other handlers, we can be more specific:

 $("#foo").unbind("click.myEvent"); 

We can also unbind all of the handlers in a namespace, regardless of event type:

 $("#foo").unbind(".myEvent"); 

It is particularly useful to attach namespaces to event bindings when we are developing plug-ins or otherwise writing code that may interact with other event-handling code in the future.

Answer 2

unbind and bind perhaps

var $w = $(window);

function scrollHandler(e) {
  $('#projectinfo').toggle($w.scrollTop() > 100);
}

$(window).resize(function (e) {
  $w.width() < 700 ? $w.bind('scroll', scrollHandler) : $w.unbind('scroll', scrollHandler);
});

Obviously this needs some optimization improvements, but it's just to show the basic idea.

Answer 3

Do not use bind (it is deprecated), use on (and off ). Some other suggestions in comments

(function ($, w, d) {
    $(function () {
        var $projectinfo = $('#projectinfo');
        var $w = $(w);
        var useScroll;

        function useScroll() {
            if ($w.scrollTop() > 100) {
                // Don't use hide() and show(), add or remove a class, instead
                $projectinfo.addClass('hidden');
            } else {
                $projectinfo.removeClass('hidden');
            }
        });

        function checkWindowWidth() {
            var useScrollTop = $w.width() < 700;
            if (useScrollTop) { 
                $w.on('scroll', useScroll);
            } else {
                $w.off('scroll', useScroll);
            }
        };

        // On resize, just check once the viewport width
        $w.on('resize', function () {
            // You should use a 'debounce' function, for this
            checkWindowWidth();
        });


    })
})(jQuery, window, document);

See this: debounce , bind vs on