Creating Items on Page Using Corvid

Ask the community
,
1

I’ve been using a combination of repeaters and Corvid code to create an effect where sequential items in the repeater have a varied color overlay effect. The color overlay is separate from the repeater, existing as series of invisible boxes that establish a mouse-over area to trigger a colored box (that is hidden on load) appearing over an item on the repeater.

I’d like to set it up so that the repeater can load more rows of items on the page while preserving this varied color overlay for the new rows. Is there a way to have objects (like the ones I use to create my color overlay) not exist at all upon initially loading the page, but be created (similar to OOP) or called to position when loading more items in the repeater, entirely within that function?

2

Corvid doesn’t support these DOM modifications. If you want an overlay effect, you can simply put a box inside your repeater container and bring it to the front. Then you can change its color through code using rgba values to preserve transparency.

The code would probably be an array of rgba values connected to your repeater’s forEachItem property, using the index.

3

Thank you David for your response! I can see how I could use that to establish a single color overlay for items in my repeater, however I’m trying to create an effect with three different color overlays all in the same repeater. The repeater in question is laid out like a grid, three columns wide.

Is that possible using the “forEachItem” code?

4

Yes, for example I might create an array of three rgba color values:

let colors = ['rgba(186, 212, 85, 0.6)', 'rgba(110, 85, 212, 0.6)', 'rgba(85, 186, 212, 0.6)'];

Then cycle through them in the forEachItem based on the index property:

$w.onReady(function () {
    $w('#repeater1').forEachItem(($item, itemData, index) => {
 let determine = index % colors.length;
        $item('#box1').style.backgroundColor = colors[determine];
    })
});