Execute resize function only if a certain condition is met

Question

I am dynamically resizing some boxes, and this functionality is placed inside my Images module. It works well, but since these boxes are present only on one part of the website, it throws me an error that it can't read the height property of undefined, which is obvious because the bundled file fires the window.resize but does not find the boxes, which blocks my other functionalities/modules.

So my question would be - is there a way to fire this resize event only if there are elements on the page that meet the certain class/id's (for example .box-image)... with some kind of conditional statement?

Many thanks for all possible hints.

EDIT: It throws error two times, first time because of the height property in the constructor, since this sets the initial height just after the reload.

class Images {
    constructor() {
        //make boxes same size as images initally and on resize
        var images = $('.box-image');
        var imageHeight = images[0].height;
        var boxes = $('.content-box');
        $(boxes).css({'height': imageHeight + 'px'});
        this.events();
    }

    events() {
       $(window).resize(function() {
            var images = $('.box-image');
            var imageHeight = images[0].height;
            var boxes = $('.content-box');

            if(images.length > 0) {
                $(boxes).each(function (i, element) {
                    $(element).css({'height': imageHeight + 'px'});
                });
            }
        });
    }
}

Answer 1

An easy check before using the variable:

if (images && images.length > 0) { .. }

 class Images { constructor() { //make boxes same size as images initally and on resize var images = $('.box-image'); if (images && images.length > 0) { var imageHeight = images[0].height; var boxes = $('.content-box'); $(boxes).css({ 'height': imageHeight + 'px' }); this.events(); } } events() { $(window).resize(function() { var images = $('.box-image'); if (images && images.length > 0) { var imageHeight = images[0].height; var boxes = $('.content-box'); $(boxes).each(function(i, element) { $(element).css({ 'height': imageHeight + 'px' }); }); } }); } } 

Answer 2

Bring your var imageHeight = images[0].height; into your if statement like this

class Images {
    constructor() {
        //make boxes same size as images initally and on resize
        var images = $('.box-image');
        var imageHeight = images[0].height;
        var boxes = $('.content-box');
        $(boxes).css({'height': imageHeight + 'px'});
        this.events();
    }

    events() {
       $(window).resize(function() {
            var images = $('.box-image');
            var boxes = $('.content-box');

            if(boxes && images.length > 0) {
                var imageHeight = images[0].height;
                $(boxes).each(function (i, element) {
                    $(element).css({'height': imageHeight + 'px'});
                });
            }
        });
    }
}

Answer 3

I guess this only is your each loop not working...

I assume that you want to change the height of elements which has content-box class only if there is an element having box-image class inside it.

First, no need for $() around element in that loop...

element is a variable which holds a content-box element while the loop cycles throught the collection held by the boxes variable.

class Images {
  constructor() {
    // Make boxes same size as images initally and on resize
    var images = $('.box-image');
    var imageHeight = images.height();
    var boxes = $('.content-box');
    boxes.css({'height': imageHeight + 'px'});
    this.events();
  }

  events() {
   $(window).resize(function() {
      var images = $('.box-image');
      var boxes = $('.content-box');

      // If there is at least one image in the page
      if(images.length > 0) {

        // Loop all content-box
        boxes.each(function (i, element) {

          // Check if it has a box-image child
          var childImage = element.find("'.box-image'");
          if( childImage.length > 0 ){
            var imageHeight = childImage.height();
            element.css({'height': imageHeight + 'px'});
          }
        });
      }
    });
  }
}

And no need for $() around boxes too, since this is already a valid jQuery collection.
(You also did it in constructor() ) .