How to update variable values on resize inside click event jQuery

Question

I have a click event for my hamburger menu. To position this menu correctly I have used a couple variables. My only problem is when the screen size changes I need to update the values of these variables so that the menu always stays in the correct position. I have tried using a jQuery(window).resize function to reset the values but its not working and I don't get why.

jQuery("#button").click(function(){
    var nav = jQuery("#nav_container");
    var head_h = jQuery('#fullhead_wrap').height();
    var nav_height = jQuery(window).height() - head_h;

    jQuery(window).resize(function(){
        var new_head_h = jQuery('#fullhead_wrap').height();
        head_h = new_head_h;

        var new_nav_height = jQuery(window).height() - new_head_h;
        nav_height = new_nav_height;
    });

    jQuery("#button span").toggleClass("open");
    jQuery("body").toggleClass("overflow");
    jQuery('.header_nav li').toggleClass('link_fall');
    nav.toggleClass('menu_open');

    nav.height(nav_height);

    if(nav.hasClass('menu_open')){
        nav.css('top', head_h);
    }else{
        nav.css('top', '0');
    }
});

Every time you click on #button you install a new resize event listener. That crashes. Also try with html,body instead of window. — deEr.
– deEr., Commented Apr 13, 2018 at 8:57

Hubert Sadecki · Accepted Answer · 2018-04-13 09:12:07Z

1

The problem is that, you have nested resize event in click event. You should separate it to get it work.

var variables_which_are_used_by_both_events; //...
// put this variables here such as nav_height and head_h
// In some cases it's better to update their value in each event 

jQuery(window).resize(function(){
    var nav = jQuery("#nav_container");
    var head_h = jQuery('#fullhead_wrap').height();
    var nav_height = jQuery(window).height() - head_h;
});

jQuery("#button").click(function(){
    var nav = jQuery("#nav_container");
    var head_h = jQuery('#fullhead_wrap').height();
    var nav_height = jQuery(window).height() - head_h;
   // your code...
});

edited Apr 13, 2018 at 9:12

answered Apr 13, 2018 at 8:57

Hubert Sadecki

3233 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to update variable values on resize inside click event jQuery

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related