jQuery resize() function doesn't work

Question

jQuery resize function doesn't work. I want to give custom scroll to in 767 width device but it doesn't work. Generally above 767 device scroll works. How can I resolve it? If I give only one single condition with $(window).resize function then it also work but when I give else condition then again it won't work.

    var about_us = $('#aboutus_area').offset();
    var testimonial = $('#testimonial').offset();
    var contact = $('#contact').offset();
    $('.aboutus_area').on('click',function(e){
        e.preventDefault();
        $('html,body').animate({ scrollTop : about_us.top },500);
    });

    $('.testimonial').on('click',function(e){
        e.preventDefault(); 
        $('html,body').animate({ scrollTop : testimonial.top },500);
    });

    $('.contact').on('click',function(e){
        e.preventDefault(); 
        $('html,body').animate({ scrollTop : contact.top },500);
    });  

$(window).resize(function(){

    if( $(window).width()<768 ){

        navbar = $('.navbar-collapse').height();
        var about_us = $('#aboutus_area').offset().top+navbar;
        var testimonial = $('#testimonial').offset().top+navbar;
        var contact = $('#contact').offset().top+navbar;
        $('.aboutus_area').on('click',function(e){
            e.preventDefault();
            $('html,body').animate({ scrollTop : about_us },500);
        });

        $('.testimonial').on('click',function(e){
            e.preventDefault(); 
            $('html,body').animate({ scrollTop : testimonial },500);
        });

        $('.contact').on('click',function(e){
            e.preventDefault(); 
            $('html,body').animate({ scrollTop : contact },500);
        });         

    }

});

Answer 1

I think what is happening is that the click event listeners defined at the top of the script are attached to the objects, and then every time the resize event fires, it attaches additional ones - but the original ones are not destroyed just because you attached others. You could try killing any click event handlers before assigning the new ones and see if that helps.

There may be a much easier solution, however. As the events you really care about are the clicks, why not check the window width when the click event fires off?

That would look something like the following:

$('.aboutus_area').on('click', function (e) {
    e.preventDefault();

    var top = $('#aboutus_area').offset().top;

    //If window is < 768px wide, adjust scroll position
    if ($(window).width() < 768) {
        top += $('.navbar-collapse').height();
    }

    $('html,body').animate({scrollTop: top}, 500);
});

$('.testimonial').on('click', function (e) {
    e.preventDefault();

    var top = $('#testimonial').offset().top;

    //If window is < 768px wide, adjust scroll position
    if ($(window).width() < 768) {
        top += $('.navbar-collapse').height();
    }

    $('html,body').animate({scrollTop: top}, 500);
});

$('.contact').on('click', function (e) {
    e.preventDefault();

    var top = $('#contact').offset().top;

    //If window is < 768px wide, adjust scroll position
    if ($(window).width() < 768) {
        top += $('.navbar-collapse').height();
    }

    $('html,body').animate({scrollTop: top}, 500);
});

Since a lot of that code is duplicative, you could shorten it down with a loop, which might look something like this:

var elements = ["aboutus_area", "testimonial", "contact"];

elements.forEach(function (key) {
    $('.' + key).on('click', function (e) {
        e.preventDefault();

        var top = $('#' + key).offset().top;

        //If window is < 768px wide, adjust scroll position
        if ($(window).width() < 768) {
            top += $('.navbar-collapse').height();
        }

        $('html,body').animate({scrollTop: top}, 500);
    });
});

Disclaimer: I haven't tested the above code, so it might be best to treat is as pseudo-code, as opposed to code you can just drop and it would just work. Might need a tweak or two to work in your project, but I think the idea is sound.

Hope this helps!