title: window resize with bxslider destroyed breaks style
body: <p>I'm trying to remove the styling and javascript of a <a href="http://bxslider.com/">bxslider</a> element when the browser window shrinks to a certain size and apply a different style to the list, but it's doing weird things.</p>
  
  <p>Scaling up from below 502px, everything looks and works fine, but when scaling back down again the slider disappears as it should but the new styling is broken. At the moment I just reload the page if it goes under 502px, which just feels horrible.</p>
  
  <p>Here's my code:</p>
  
  <p>EDIT: As requested, I've added the relevant HTML, javascript and CSS to a JSFiddle: <a href="http://jsfiddle.net/tYRJ2/2/">http://jsfiddle.net/tYRJ2/2/</a>. (The CSS isn't complete, but it shows the problem.)</p>
  
  <pre><code>var sliderActive = false;
  var slider;
  
  function createSlider() {
      slider = jQuery('.bxslider').bxSlider({
          adaptiveHeight: false,
          swipeThreshold: 40,
          controls: true,
          auto: true,
          pause: 6000,
          autoHover: true,
        });
        return true;
  }
  
  //create slider if new page is wide
  jQuery(document).ready(function(){
      if (window.innerWidth &gt; 502) {
          sliderActive = createSlider();
      }
  });
  
  //create/destroy slider based on width
  jQuery(window).resize(function () {
  
      //if wide and no slider, create slider
      if (window.innerWidth &gt; 502 &amp;&amp; sliderActive == false) {
          sliderActive = createSlider();
      }
  
      //else if narrow and active slider, destroy slider
      else if (window.innerWidth &lt;= 502 &amp;&amp; sliderActive == true){
          slider.destroySlider();
          sliderActive = false;
          location.reload();  //fudgey
      }
      //else if wide and active slider, or narrow and no slider, do nothing
  });
  </code></pre>
  
  <p>Any help is much appreciated!</p>