Responsive JavaScript: "Refresh" page depending on screen width?

Question

i've made a responsive website with a horizontal menu. I wanted to make the menu a toggle drop down when a lower screen resolution is reached. The JQuery-Toggle works fine and i tried this to "make it responsive":

if (document.documentElement.clientWidth < 768) {

    $(document).ready(function(e){

       $('#menubutton').on('click',function(){

          $('#main-nav').slideToggle();

       });

    })
}

This works also fine but not by changing the windowsize directly in the browser – i have to resfresh the page manually to load the Script!

Is there a way to "refresh" the page when the needed screen width is reached (768 px)? …and vise versa!

thanx, Jochen

Answer 1

maybe instead of refreshing the page on every resize, you can do:

var mainNavActivated = false;
$(document).ready(function(e){
   $('#menubutton').on('click',function(){
        if(mainNavActivated || document.documentElement.clientWidth < 768){
            window.mainNavActivated=true;
            $('#main-nav').slideToggle();
        }
   });
})

which is binding click anyway and making it work when the window is "narrow"