Unable to select slider dots with JS in Webflow Embed

Hi all I have come across one thing I’m not able to solve. I can’t grab slider dots with JS I have tried almost everything but no joy. In the console everything is fine, I have tried even “DOMContentLoaded”, the console doesn’t show any error. So does anyone know how to grab dots?

This simple slide example is on the second page. in the first page is code for one forum member that works in Chrome scripts but it cant work in Webflow because of dots

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

really none know the answer to this issue?

Hey Stan

Maybe Webflow is using Jquery for the slider. Can you try to add the code in the page’s before </body> custom code and see if that works?

Or maybe this works?

var Webflow = Webflow || [];
Webflow.push(function() {
  //Your code
});

hi @Davidlin_ch12 thanks for suggestion. I was moving code everywhere to see if I will be able to grab dots, but no joy. JQuery is only sugar on plain JS and browser doesn’t understand JQuery, thats why is JQuery code transpiled on runtime to vanilla JS so browser will understand the code. I will give try to your second suggestion. But to grab a simple div with class that is rendered in DOM should be an easy task without need to take extra action.

I completely agree, which is why I think it isn’t rendered in DOM but after some form of JS code has been run. If you look in the Designer navigator, Slide Nav is not populated as well which makes me more sure that it isn’t rendered in DOM.

hi @Davidlin_ch12 I’m 100% convinced that is rendered in DOM I have tested code beside chrome snippets also with Tempermonkey and all works as expected. Not in Webflow.

Yes it is rendered in DOM, but just not at initial load. I created a quick test here:

By adding the async function I provided previously, you should be able to get the dots. Consequently, the dots are appended onto the document after load :smiley:

As I have mentioned I have also tried

document.addEventListener("DOMContentLoaded", () => {})

to make sure that DOM is rendered before code will run. Nothing helps.

oh I see I was thinking about async as well but it looked to me like overkill. Now i know that is the only way. :slight_smile:

Using Jquery ready event also works. So I think they are using jquery to append the dots

I’m not familiar with jQuery syntax as I’ve learned and prefer Vanilla JS. :wink:

1 Like

I’m just scratching my head why “DOMContentLoaded” doesn’t work.

I think it is a timing challenge. Jquery gets added as one of the last elements before </body>, which means the dots only get appended after jquery has loaded. The old code was trying to query the div elements before the dots were appended to the document, which in turn gave you zero matches. Hope the code helps :smiley:

1 Like

Yeh I have got it, that’s why I used DOMContentLoaded as it is a vanilla JS of jQuery $(document)... and even moved embed on the bottom to make sure that is read as last. It didn’t work even in page before body code section. This should not happened when use vanilla JS. Thanks for your help :wink:

1 Like

Makes sense. Tried to use your vanilla JS syntax after jquery is loaded, but just as you say, it doesn’t work!

Not sure why though?

Yeah it is odd behaviour but is sorted now and I have another experience with webflow I can use before they fix it. :wink: Now I can, thank to you, post help with custom code for this specific request. I will give you credit. :wink:

1 Like