0

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;
}
Feathercrown
  • 2,547
  • 1
  • 16
  • 30
crispy_onion
  • 3
  • 2
  • `$(".r").resizable();` only initializes the widget on the elements that exist at that time. New elements added after that don't have the widget added. – Barmar May 03 '22 at 04:40
  • When you create new elements in the loop, you need to configure the widget on each one. – Barmar May 03 '22 at 04:41
  • hmmm, i tried to put $(".r").resizable() inside my init() method so that it would run at the same time as the script but it doesn't seem to work? or should i be "styling" (since it's a css class) the widget when its being made? @Barmar – crispy_onion May 04 '22 at 08:08
  • Use `$(cardDetail).resizeable()` – Barmar May 04 '22 at 08:09

0 Answers0