enable a function depending on window width and window resize

I have a function that I want to enable depending on my window width, to customize my menu for mobile and ipad windows... it works fine, but when I resize my window the function is not triggred again. let me explain, here is my function Code :

if ($(window).width() < 960) {
    $('.button_menu').css("display", "block");
   $('#bloc_menu').hide();
    $('.button_menu').click(function() {     
          $(this).next().slideToggle();
          return false;
    });

}

else {

    $('#bloc_menu').css("display", "block");
    $('.button_menu').css("display", "none");
}

if the window width is less than 960, then my menu is hidden, ad I have a button appearing, when clicking on the button, the menu appears.

and if my window is larger than 960, then the button is hidden, and my menu is displayed.

I have also some css rules :

#menu{list-style: none;}
.button_menu{display: none}

@media (max-width: 960px) {
#bloc_menu{margin-top: 10px;position: relative;border-top: 1px solid lightgrey;}

I just want to add a window resize listener but I can't find the solution to do it, can anybody help me with this ?

thanks a lot for your help,

Answers


To avoid it hiding after you have opened it use a flag and toggle it when you click on the button:

  var flag = 0;

  $('.button_menu').click(function() {     
          $(this).next().slideToggle();
          if(flag==0){ 
          flag=1;
          } else {
          flag=0;
          }
          return false;
    });

  $( window ).resize(function() {
    if ($(window).width() < 960) {
    $('.button_menu').css("display", "block");
    if(flag==0){
    $('#bloc_menu').hide();
    }
  }else{
    $('#bloc_menu').css("display", "block");
    $('.button_menu').css("display", "none");
  }
});

You need to use jquery's resize function:

$( window ).resize(function() {


your code...
});

This will trigger your code evertime the window is resized.


$( window ).resize(function() {

    if($(window).width() < 960) {
        $('.button_menu').css("display", "block");
        $('#bloc_menu').hide();
        $('.button_menu').off().click(function() {     
              $(this).next().slideToggle();
              return false;
        });
    }else{
        $('#bloc_menu').css("display", "block");
        $('.button_menu').css("display", "none");
    }
});

The resize function can be called multiple times, so it can add many click event listeners to your button. Once you click it would run all of them.

Place the off() function right before adding the event listener.


Need Your Help

Setting popup to open every 30 days

javascript jquery cookies

I'm trying to set a cookie which every 30 days (or any other set time period) will launch for example Stackoverflow.com.

perl pattern match Downloaded: 1 files, 8.7K in 0s (16.9 MB/s)

regex perl

I have the following string "Downloaded: 1 files, 8.7K in 0s (16.9 MB/s)" which I got from wget and want to pattern match it by making a regular expression of it.