Streaming live at 10am (PST)

Change BG Color of a Div in Collection Item to Color of the Active Collection Item


I have an animation where I have a div block shrink to reveal a collection item image. However, I want the background color of the div to match the background color of the ACTIVE collection item. Since this div is nested within the collections list, if I check off "get BG color from [cms collection]) it will pull the color from the specific collection item and not the active collection page.

Is there a way to do this? I’m trying custom javascript but no luck, maybe the code is wrong? I also made sure I changed the div id on the div block I want to change. In the second screen shot the black box is what I want to match with the active background color. Anything helps!

Thank you in advanced!

Here is my site Read-Only: LINK
([how to share your site Read-Only link][2])

1 Like

@ForumModerators Would this be possible to do?

Interesting question.
It sounds like something that should be doable.
What do you get in the console when you add this:

console.log('{BG Color}');

(where the {BG Color} you should put the dynamic field you added in your JS)

So, I went and created a mock up of your idea, and it seems to work :smiley: so…
I guess the part of ‘getElementById’ in your code is what breaks it.
You need to target ALL the divs, and ID is a singular element on a page. If you gave a div in a collection list an ID, it will probably brake the code.
Try ‘querySelectorAll’ and use classname.

@avivtech Hi Aviv! Thank you for your response. This is what I got from it. I think I might be inputing the code incorrectly? But I noticed that at least the background color is being captured in the code, but its just not applying on my .reveal-img class.

Here’s my read-only link if it makes things easier for you. Thank you so much for the help!

The ‘console.log’ code was supposed to go individually with no attachment to anything. Just to check what will you get :smile:

You can go back to your original end of the code, it should work (with the querySelectorAll)

Just tried it and still no luck. This is the code I inputed, is this correct?


    document.querySelectorAll('.reveal-img').style.backgroundColor = '[BG-Color-CMSField]';

I’m getting this error.

Figured it out!! So excited ahaha I ended up trying this method

$(document).ready(function() {
    $('.reveal-img').css("background-color", "[cms-field-you-want-to-use]");

Worked like a charm. Thank you for the help earlier @avivtech

1 Like