Script not working till I reload the page

Question

Doing different size of sidebar at full screen and small screen but it not work until i reload the page at small screen or full screen

<script>
if ($(window).width() < 960) {
  function openNav() {
    document.getElementById("mySidebar").style.width = "70%";
  }

  function closeNav() {
    document.getElementById("mySidebar").style.width = "0%";
    document.getElementById("main").style.paddingLeft = "0";
    document.getElementById("table-name").style.marginRight = "0";
    document.getElementById("table-name").style.marginLeft = "0";
  }
} else if ($(window).width() > 960) {
  function openNav() {
    document.getElementById("mySidebar").style.width = "14%";
    document.getElementById("main").style.paddingLeft = "13%";
    document.getElementById("table-name").style.marginRight = "28px";
    document.getElementById("table-name").style.marginLeft = "26px";
  }

  function closeNav() {
    document.getElementById("mySidebar").style.width = "0";
    document.getElementById("main").style.paddingLeft = "0";
    document.getElementById("table-name").style.marginRight = "0";
    document.getElementById("table-name").style.marginLeft = "0";
  }
}
</script>

Answer 1

That is because you're above code will just run once - upon site load. In order to execute it as soon as the browser window's size has changed you have to use an rezise event listener.

$(window).resize(function() {
  if ($(window).width() < 960) {
    function openNav() {
      document.getElementById("mySidebar").style.width = "70%";
    }

    function closeNav() {
      document.getElementById("mySidebar").style.width = "0%";
      document.getElementById("main").style.paddingLeft = "0";
      document.getElementById("table-name").style.marginRight = "0";
      document.getElementById("table-name").style.marginLeft = "0";
    }
  } else if ($(window).width() > 960) {
    function openNav() {
      document.getElementById("mySidebar").style.width = "14%";
      document.getElementById("main").style.paddingLeft = "13%";
      document.getElementById("table-name").style.marginRight = "28px";
      document.getElementById("table-name").style.marginLeft = "26px";
    }

    function closeNav() {
      document.getElementById("mySidebar").style.width = "0";
      document.getElementById("main").style.paddingLeft = "0";
      document.getElementById("table-name").style.marginRight = "0";
      document.getElementById("table-name").style.marginLeft = "0";
    }
  }
});

Answer 2

Define all function outside of any method and then on the bottom call the function which will wire the appropriate functions(outside of any method and in a $(window).resize method)

  function openNavSmall() {
    document.getElementById("mySidebar").style.width = "70%";
  }

  function closeNavSmall() {
    document.getElementById("mySidebar").style.width = "0%";
    document.getElementById("main").style.paddingLeft = "0";
    document.getElementById("table-name").style.marginRight = "0";
    document.getElementById("table-name").style.marginLeft = "0";
  }

  function openNavBig() {
    document.getElementById("mySidebar").style.width = "14%";
    document.getElementById("main").style.paddingLeft = "13%";
    document.getElementById("table-name").style.marginRight = "28px";
    document.getElementById("table-name").style.marginLeft = "26px";
  }

  function closeNavBig() {
    document.getElementById("mySidebar").style.width = "0";
    document.getElementById("main").style.paddingLeft = "0";
    document.getElementById("table-name").style.marginRight = "0";
    document.getElementById("table-name").style.marginLeft = "0";
  }
var openNav;
var closeNav;
function chooseMode() {
    if ($(window).width() < 960) {
               openNav = openNavSmall();
               closeNav = closeNavSmall();
        } else if ($(window).width() > 960) {
               openNav = openNavBig();
               closeNav = closeNavBig();      
        }
    }



$( window ).resize(function() {
     chooseMode();
});
chooseMode();