新秀：需要window.onresize

Question

I'm a rookie when it comes to programming, so I really need your help here. I need to change some code to fulfil my needs and I can't seem to do it in a proper way. What I need right now, is to take this script and make it work when the $(window).width > 480 . Also, I need this script to run every time the user resizes the window.

I apologise for my silly question, but I'm just starting to learn the basics about Javascript and Jquery, and I can't seem to find the answer to this question this time.

Here is the code

      $(window).load(function(){
    (function($) {

      $.fn.eqHeights = function() {

          var el = $(this);
          if (el.length > 0 && !el.data('eqHeights')) {
              $(window).bind('resize.eqHeights', function() {
                  el.eqHeights();
              });
              el.data('eqHeights', true);
          }
          return el.each(function() {
              var curHighest = 0;
              $(this).children().each(function() {
                  var el = $(this),
                      elHeight = el.height('auto').height();
                  if (elHeight > curHighest) {
                      curHighest = elHeight;
                  }
              }).height(curHighest);
          });
      };

      $('.articles_container').eqHeights();

  }(jQuery));
  });

Answer 1

To execute it on window resized, do this:

$(window).resize(function() {
   $('.articles_container').eqHeights();
}

Also, if you want to execute javascript upon media queries events, then use the sweet enquire.js javascript library.

Answer 2

The window has an .innerWidth property which I presume is still accessible through jQuery. so your code might be something like this:

$(window).resize(function() {
   if($(window).innerWidth < 480) return;
   $('.articles_container').eqHeights();
})