title: JS / jQuery Detecting orientation change and only allow functions based on that
body: <p>Little new to JS / jQuery but think ive managed to work things out so far correctly...</p>
  
  <p>I enable a click function if on mobile or if on tablet (portrait) however I have noticed if on tablet I turn it to change the orientation to landscape it still lets me click and fires the functionality.</p>
  
  <p>How can I adjust my code below so if changed to landscape on tablet, it won't fire the JS click stuff?</p>
  
  <pre><code>// mobile
  var isMobile = window.matchMedia("only screen and (max-width : 40em)");
  
  // tablet
  var isTablet = window.matchMedia("only screen and (max-width : 60em)");
  var isTabletPortraitOnly = window.matchMedia("only screen and (max-width : 60em) and (orientation : portrait)");
  
  /* mobile cart slideout */
  // open the lateral panel
  if(isMobile.matches || isTabletPortraitOnly.matches){
    var $miniCart = $('#cart_over');
    var $cartLink = $('.mini-cart');
    var $siteContent = $('.top-header-container, .main-content, footer');
  
    $cartLink.on('click', function(event){
      event.preventDefault();
      if ($miniCart.hasClass("cart-slide-in")) {
        $miniCart.addClass("cart-slide-out");
        $siteContent.addClass("content-slide-in");
      } else if ($miniCart.hasClass("cart-slide-out")) {
        $miniCart.removeClass('cart-slide-out');
        $miniCart.addClass("cart-slide-in");
      } else {
        $miniCart.addClass("cart-slide-in");
      }
  
      if ($siteContent.hasClass("content-slide-out")) {
        $siteContent.addClass("content-slide-in");
        $siteContent.removeClass("content-slide-out");
      } else if ($siteContent.hasClass("content-slide-in")) {
        $siteContent.addClass("content-slide-out");
        $siteContent.removeClass("content-slide-in");
      } else {
        $siteContent.addClass("content-slide-out");
      }
    });
  
    //clode the lateral panel
    $('#cart_close').on('click', function(event){
  
      if ($miniCart.hasClass("cart-slide-in")) {
        $miniCart.removeClass('cart-slide-in');
        $miniCart.addClass('cart-slide-out');
        $siteContent.removeClass("content-slide-out");
        $siteContent.addClass("content-slide-in");      
        event.preventDefault();
      }
    });
  }
  </code></pre>
  
  <p><strong>UPDATE</strong></p>
  
  <p>I managed to work this out... </p>
  
  <pre><code>$(window).bind('orientationchange', function(event) {
    alert('new orientation:' + orientation); 
  });
  </code></pre>
  
  <p>However it returns 90 or -90 for landscape and 0 or 180 for portrait... I guess maybe close but no so I just use a if statement so if 90 or -90 do this... or is there a better way to just do if portrait or landscape?</p>
  
  <p><strong>UPDATE 2</strong></p>
  
  <p>I thought maybe if I add condition into a function and also set on load and orientation change might work as would check again... but not sure it is.... think I'm on the right track any ideas with the following?</p>
  
  <pre><code>function cartSlide(){
    if(isMobile.matches || isTabletPortraitOnly.matches){
      var $miniCart = $('#cart_over');
      var $cartLink = $('.mini-cart');
      var $siteContent = $('.top-header-container, .main-content, footer');
  
      $cartLink.on('click', function(event){
        event.preventDefault();
        if ($miniCart.hasClass("cart-slide-in")) {
          $miniCart.addClass("cart-slide-out");
          $siteContent.addClass("content-slide-in");
        } else if ($miniCart.hasClass("cart-slide-out")) {
          $miniCart.removeClass('cart-slide-out');
          $miniCart.addClass("cart-slide-in");
        } else {
          $miniCart.addClass("cart-slide-in");
        }
  
        if ($siteContent.hasClass("content-slide-out")) {
          $siteContent.addClass("content-slide-in");
          $siteContent.removeClass("content-slide-out");
        } else if ($siteContent.hasClass("content-slide-in")) {
          $siteContent.addClass("content-slide-out");
          $siteContent.removeClass("content-slide-in");
        } else {
          $siteContent.addClass("content-slide-out");
        }
      });
  
      //clode the lateral panel
      $('#cart_close').on('click', function(event){
  
        if ($miniCart.hasClass("cart-slide-in")) {
          $miniCart.removeClass('cart-slide-in');
          $miniCart.addClass('cart-slide-out');
          $siteContent.removeClass("content-slide-out");
          $siteContent.addClass("content-slide-in");      
          event.preventDefault();
        }
      });
    }
  }
  
  // open the lateral panel
  if(isMobile.matches || isTabletPortraitOnly.matches){
    cartSlide();
  }
  
  $(window).bind('orientationchange', function(event) {
    cartSlide();
  });
  </code></pre>