Streaming live at 10am (PST)

Catch CMS items with JavaScript

Hi,

I’m working on the website for the client and I have problem with CMS/JavaScript

I have dynamic list which shows 4 images. Then if user clicks on the image it shows him popup(which is inside of each image but has display-none). I added ID to popup. I want to make overflow hidden for body when pop-up is open(display-block).

The problem is that when I make: var pupUp = document.getElementById(“pupUpWraper”) it only works for first CMS image. How can I make it work for all pop-ups? Should I use getElementByClassName?

Best regards,
Michal Maciejewski

Here is my public share link: LINK
(how to access public share link)

Yes, IDs MUST BE UNIQUE. getElementsByClassName() will return an array of elements, so you will need to loop through the list.

1 Like

Hi @Michal_Maciejewski Michal, did you get this working? I’ve got a similar issue I’m trying to solve. I’m trying to show a div automatically when a Vimeo video (embedded) finishes playing. I have this working using the following script in the footer of the page:

<script>
var iframe = $('#player1')[0],
    player = $f(iframe);
player.addEvent('ready', function() {
    player.addEvent('finish', onFinish);
});
function onFinish(id) {
    document.getElementById("qr").style.display = "flex";
}
</script>

However, the videos are part of a collection list and only this action only works on the first element of the collection list. What am I missing to get this working on every video in the list? HELP!!! Maybe the legendary @samliew will save the day again? :wink:

Preview link:
https://preview.webflow.com/preview/ceva-ease-the-pressure?utm_medium=preview_link&utm_source=dashboard&utm_content=ceva-ease-the-pressure&preview=0d4754fdf620d42ad867eb1255ac1928&fbclid=IwAR2DiscUmF3AO_-XpH_jYaLIgS3TbocCfY67xtlx-X0fqnyzv4KSXPUQxF0&pageId=5e5fa862fe6ce8e064e2feda&mode=preview

I’ve also tried but not luck:

function onFinish(ClassName) {
document.getElementsClassName("qr").style.display = "flex";