Jquery "Add Attribute" per "Class Name" not working until browser width is changed

Design help Custom code
1

Hi Wonderful Webflow Community :slight_smile:

I am attempting to use a line of JQuery code to add an attribute to a CMS item based on its class. In the example below I am not actually using a collection list but its the same idea. The code does work, but it only works after I resize the browser window.

Please don’t mind the fact that the site looks rough when the code is actually running lol

<script src=https://code.jquery.com/jquery-1.11.3.min.js></script>

<script>

$('.Div-Block-2, .green').attr('data-scroll-speed','-5');

</script>

I’m not sure why, but the code does work when I change the width or height of the browser by even 1 pixel after it is live. So when I publish, the code doesnt run immediately, but it does run when I go to inspect the element and the browser width changes. I am #confused :joy:

I think it could have something to do with the element with the classes that the code is applied to being “in-view” or not, but I am not sure.

Here is my site Read-Only: https://preview.webflow.com/preview/parallax-scroll-grid?utm_medium=preview_link&utm_source=designer&utm_content=parallax-scroll-grid&preview=63f634b9992376ce231b34c4e8227a67&workflow=preview`Preformatted text`

2

Don’t load your own version of jQuery since it is already loaded by default by Webflow.

$('.Div-Block-2, .green') – the issue is probably the fact that your selector is wrong. Webflow converts class names to lowercase with hyphens for spaces when published on the front end. Update your selector accordingly.

1 Like