Execute a resize function only when a certain condition is met
I am dynamically resizing some boxes and this functionality is placed inside my images module. It works well, but since these fields are only present on one part of the website, it throws an error that it cannot read the height property from undefined, which is obvious because the associated file runs window.resize but does not find the boxes that block my other functions / modules.
So my question is, is there a way to fire this resize event only if there are elements on the page that match a specific class / id (e.g. .box-image) ... with some kind of conditional expression
Thanks so much for all the possible hints.
EDIT: It throws the error twice, the first time because of the height property in the constructor, as it sets the initial height right after 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'});
});
}
});
}
}
source to share
Simple check before using a 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'
});
});
}
});
}
}
source to share
Bring your var imageHeight = images[0].height;
in an 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'});
});
}
});
}
}
source to share
I am guessing that only your loop is not working ...
I am assuming that you only want to change height
elements that have a class content-box
if there is an element with a class in it box-image
.
First, there is no need for $()
around element
in this loop ...
element
is the variable that contains the element content-box
while the loop loops through the collection held by the variable boxes
.
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 don't need to be $()
around boxes
either, since this is already a valid jQuery collection.
(You also did this at constructor()
).
source to share