title: Run jQuery script on window resize
body: <p>I have a bit of script that will run various functions on a window resize,</p>
  
  <pre><code>$.event.add(window, 'load', resizeFrame);
  $.event.add(window, 'resize', resizeFrame);
  
  function resizeFrame(){
      // various scripts //
  }
  </code></pre>
  
  <p>This works absolutely fine, and the scripts I run in there work also. I then have a separate script that sets the height of various divs on document load, which also works just fine.</p>
  
  <pre><code>var h = 0,
      target = $('.home #content .items-row .item article');
  
  target.each(function(){
      if (h &lt; $(this).height()){
          h = $(this).height();
      }
  }); 
  target.each(function () {
      $(this).css("height", h + 'px');
  });
  $('.testimonials .items-row').each(function () {
      $('.span4 article', this).css('height',
          Math.max.apply( Math, 
              $.map($('.span4 article', this), function(x) {
                  return $(x).height();
              })
          )
      );
  });
  </code></pre>
  
  <p>However when i try to combine the two, my divs will resize once on load, but not again on window resize. This is how i have combined the two,</p>
  
  <pre><code>function articleResize(){
      var h = 0,
          target = $('.home #content .items-row .item article');
  
      target.each(function(){
          if (h &lt; $(this).height()){
              h = $(this).height();
          }
      }); 
      target.each(function () {
          $(this).css("height", h + 'px');
      });
  
      $('.testimonials .items-row').each(function () {
          $('.span4 article', this).css('height',
              Math.max.apply( Math, 
                  $.map($('.span4 article', this), function(x) {
                      return $(x).height();
                  })
              )
          );
      });
  }
  
  $.event.add(window, 'load', resizeFrame);
  $.event.add(window, 'resize', resizeFrame);
  
  function resizeFrame(){
      articleResize();
  }
  </code></pre>
  
  <p>If anyone has any clues it would be greatly appreciated.</p>
  
  <p><strong>EDIT</strong></p>
  
  <p>as background here is the <code>resizeFrame</code> in its entirety,</p>
  
  <pre><code>function resizeFrame(){
  
      var screenWidth = $(window).width();
  
      function phoneEnable(){
          $('#MainNav ul.nav').prependTo('.sidr-inner').addClass('nav-list nav-collapse');
          $('#MainSocial ul.roundIcons').prependTo('.sidr-inner');
      };
      function phoneDisable(){
          $('#sidr ul.nav').prependTo('#MainNav').removeClass('nav-list nav-collapse');
          $('#sidr ul.roundIcons').prependTo('#MainSocial');
      }
  
      if (screenWidth &gt;= 980){
          phoneDisable();
      } else{
          phoneEnable();
      };
  
          var highestBox = 0;
      $('.blog-featured .item article', this).each(function(){
          if($(this).height() &gt; highestBox)
          highestBox = $(this).height();
          });
      $('.blog-featured .item article',this).height(highestBox);
  
      articleResize();
  };
  </code></pre>