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

gobeano · February 3, 2021, 10:56pm

Hi,

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])

gobeano · February 4, 2021, 7:55pm

@ForumModerators Would this be possible to do?

avivtech · February 4, 2021, 10:12pm

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)

avivtech · February 4, 2021, 10:14pm

So, I went and created a mock up of your idea, and it seems to work 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.

gobeano · February 4, 2021, 10:37pm

@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!

https://preview.webflow.com/preview/vg-portfolio-redesign?utm_medium=preview_link&utm_source=designer&utm_content=vg-portfolio-redesign&preview=ea13c8c02c060cd2bd0494959ce6a461&pageId=601a3fec57eddee3fa998ffe&itemId=601a720fa21eec44f9d0b8c3&mode=preview

avivtech · February 4, 2021, 10:38pm

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

avivtech · February 4, 2021, 10:39pm

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

gobeano · February 5, 2021, 12:35am

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

<script>

Webflow.push(function(){
    document.querySelectorAll('.reveal-img').style.backgroundColor = '[BG-Color-CMSField]';
});
    
</script>

I’m getting this error.

gobeano · February 5, 2021, 3:17am

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