title: In Responsive Web Design, how can I use Javascript or jQuery to stop a function and reset when the users downsizes their window?
body: <p>I have a responsive layout and I've created a fading panels animated element with jQuery. I set the jQuery function to only activate if the user is above a certain screen size. However, if I scale the window down, the function still runs.</p>
  
  <p>Here's what I'd like to achieve:</p>
  
  <ol>
  <li>When the user scrolls bellow a browser width of 1440px, stop that fading panels animation.</li>
  <li>Once the animation is stopped, I want to reset the area to display the 1st panel.</li>
  <li>If the user scrolls back up above that screen size, start the animation again.</li>
  </ol>
  
  <p>Here is my code, thanks in advance for your time:</p>
  
  <pre><code>// Get the viewport size!
  var viewport = $(document).width();
  
  if (viewport &gt;= 1140) {
  
  var InfiniteRotator = 
  {
      init: function() 
      {
          // hard set height of container
          $('#circles').height('286.717px');
  
          // initial fade-in time
          var initialInterval = 3000;
  
          // interval between items
          var itemInterval = 5000;
  
          // cross-fade time
          var fadeTime = 2000;
  
          // count number of items
          var numberOfItem = $('.rotating-item').length;
  
          // set current item
          var currentItem = 0;
  
          // create loop
          var infiniteLoop = setInterval(function() { 
  
              // initial fade out
              $('.rotating-item').eq(currentItem).fadeOut(fadeTime);
  
              // set counter
              if (currentItem == numberOfItem -1) {
                  currentItem = 0;
              } else {
                  currentItem++;
              }
  
              // next item fade in
              $('.rotating-item').eq(currentItem).fadeIn(fadeTime);
  
          }, itemInterval);
      }
  }
  
  // go Go GO!
  InfiniteRotator.init();
  }
  </code></pre>
  
  <p>Please note: I used this great tutorial to create the fading panels: <a href="http://trendmedia.com/news/infinite-rotating-images-using-jquery-javascript/" rel="nofollow">http://trendmedia.com/news/infinite-rotating-images-using-jquery-javascript/</a></p>