When I draw my element more than one, they are doesn't work!

Hey there!

My plugin “Video Scroll Element” works to play videos with just scrolling. If you want to look at it preview link is here:

But, If I want to draw my element more than one, things get complicated and my plugin doesn’t work correctly. I don’t get any error so I can’t find my mistake.

For example, I draw 2 “Video Scroll Element”. If they both visible on page load, my “Video Scroll Element” doesn’t be fixed on the page and doesn’t work correctly. But, If I make to my second “Video Scroll Element” not visible on page load, my first “Video Scroll Element” working correctly. When I come to end of the first video, I am trying to hide my first item and show my second “Video Scroll Element”. Like this screenshot:

But my second “Video Scroll Element” doesn’t fix on the page and doesn’t play with scrolling. It just acts like an image as you can see here:

I tried a few ways to fix this problem but I couldn’t. So, anyone can help me please? My codes here:

Header:

Update:



If you want to solve the error by trying it, I can invite you to the plugin editor. Just write your email. Thank you for your time!

@Efe The issue is you are not using a unique ID selector for each instance and an ID can only be used to identify a single element on the page.

You can use something like math.random() to generate a unique Id for each instance and then use that ID (instead of ‘parent’) when you append the div to the canvas.

Hey eli!

Thank you for your reply. I’m busy these days. So, I look at your reply very lately.

I am trying it but my querySelector can’t read it.

In this part, I get random value to ‘divId’.

And here, I insert this value to the querySelector.

But my debug mode throws this error:

How should I do?

Hey Efe, an ID needs to have ‘#’ so it would be ‘#5812’ not ‘.5812’.

2 Likes

@eli
Oh, It was my carelessness. I changed it. But I’m still getting the same error.

@efe, it shouldn’t be wrapped in quotes like that. There are some other issues but set your forQuery variable like this:

var forQuery = '#' + divID;
1 Like

@eli
It works, thanks so much!
So, do you have an idea about other issues?

1 Like

Awesome @Efe! The other ones are minor but you shouldn’t need to add the double quotes around your other variables either. For example 'width: properties.bubble.width; height: properties.bubble.height;' should work as well and is a bit cleaner.

But… if it’s working that’s what matters :slight_smile: Nice job!

1 Like

@eli
Thank you! :slightly_smiling_face:

But, we only fixed the problem with querySelector. But I am still getting an error :confused:
image

This error instead of showing a specific example, it shows all my code wrong. So I can’t find my fault.

Oh, fun… and of course it doesn’t say what line the error is on. Paste your code in here. https://jshint.com/ That can be helpful sometimes.

1 Like

@eli
It’s an interesting one.
I get still the same error despite this.

var forQuery = ‘#’ + divID;

Like here:

But, I get this error twice. I added this line: alert(forQuery); and this alert works two times!
I don’t know why? It has to be work just one time. By the way, when I open the developer console, this alert works again, and my error increases.

Hey, @eli!
I solved it. I want to explain for you.

querySelector method uses CSS3 selectors for querying the DOM and CSS3 doesn’t support ID selectors that start with a digit.

So, I changed my ID like: “div”+randomID and it solved!

Thank you for your interest. I am grateful to you :slightly_smiling_face:

1 Like

@Efe, excellent! Glad you were able to solve it.

1 Like