I'm trying to dynamically create 3 "furniture cards" on body load where each card implements the jQuery resizeable plugin, but only the first item seems to be resizable within its container (both width and height). The other two are only resizable in height.
Not sure if it's my code or if I'm mishandling the plug-in or if it's something even more complicated than that. Would appreciate help, thanks in advance.
script.js
$(function() {
$(".r").resizable({
containment: '.card'
});
});
//array of furniture items
furnitureCaption = ['chair', 'plant', 'table'];
//dynamically create furniture cards on load
function init() {
//get the element we are appending to
var container = document.querySelector('.container');
furnitureCaption.forEach((cap, i) => {
//create the element we are appending
var card = document.createElement('div');
card.className = "ui-widget-content card";
var cardDetail = document.createElement('div');
cardDetail.className = "ui-state-active r";
//set the background image based on picture url array
cardDetail.style.backgroundImage = "URL(./img/" + cap + ".png)";
cardDetail.style.backgroundSize = "100% 100%";
//make the span caption based on caption array
var spanTag = document.createElement('span');
spanTag.innerHTML = furnitureCaption[i];
//append and put on page
cardDetail.append(spanTag);
card.append(cardDetail);
container.append(card);
});
}
index.html
<body onload="init()">
<div class="container"></div>
</body>
style.css
.container {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
gap: 4em;
}
.card {
width: 150px;
height: 150px;
}
.card h3 {
text-align: center;
margin: 0;
margin-bottom: 10px;
}
.r {
width: 50px;
height: 50px;
min-width: 20px;
min-height: 20px;
}
.r,
.card {
padding: 0.5em;
}
span {
font-size: 1em;
}