Reload jquery script after resize display

Question

I have a problem with jquery script if page size was changed. For example - if you open site on the phone, then open and close menu, then rotate phone from vertical to horizontal and open menu again - the block will not shown.

I use this script

return $(document).ready(function() {
  (function($) {
    if ($(window).width() < 960) {
      $('#header-menu').css('display', 'none');
      $('header.grid-container').css('display', 'none');
      return $('#toggle-mobile-menu').click(function() {
        $('#header-menu').toggle();
        return $('header.grid-container').toggle();
      });
    }
  })(jQuery);
});

I need some hook maybe, to reload script if screen was changed, without reload page. I tried to use $(window).resize() but it didn't work

user4563161 · Accepted Answer · 2015-05-21 09:33:43Z

1

It is impossible Jquery gets put into the DOM and would require a page refresh in order for the script to change.

You should consider using AJAX instead.

answered May 21, 2015 at 9:33

user4563161

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

3 Comments

user4563161 Over a year ago

You would have to refresh the page.

Donnie Over a year ago

thanks, okay will try to solve with AJAX, or will find another way. Thank you for your answer

user4563161 Over a year ago

You should have no problem solving it with AJAX, Good Luck

Radek Kowalewski · Accepted Answer · 2015-05-21 10:05:18Z

1

The problem is that your script is triggered only once after loading all DOM elements (Your are checking the screen width and if condition is done you are triggering the event). I suggest move styling to CSS (media queries) and use jquery only for binding events

CSS

@media (max-width: 960px) {
    #header-menu,
    .grid-container { display: none; }

    #toggle-mobile-menu { display: block; } // or whatever
}

JS

$(function(){
    $('#toggle-mobile-menu').on('click', function() {
        $('#header-menu').toggle();
        $('header.grid-container').toggle();
    }
});

answered May 21, 2015 at 10:05

Radek Kowalewski

1441 silver badge6 bronze badges

Collectives™ on Stack Overflow

Reload jquery script after resize display

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related