Particles.js: Not able to create multiple instances of particles-js

[dwij2812]

I tried Creating Multiple calls to particleJS function in order to run multiple instances of particleJS in certain divs on my HTML page. but by default it only redenrs the first div which is called and ignores the rest. Is there any way we can fix this?

I've Already Referred to #33 , #183 and #302 but still the query remains unsolved. Please Help with the same and provide a robust solution for this.

[dwij2812]

[Update] Figured out that one of the issues is #119 but still two of them are not working if the canvas size is forcefully made to match the screen size using JS Functions

[Gabo1122]

Hello @dwij2812 not sure if you still need help but here is my solution:
I created two JS files particles.js and particles2.js, on particles2.js I changed to: particlesJS("particles-js2"...)
named the second DIV to particlesjs2 and created a style for it.
You can take a look at my website pmptoken.xyz I hope I was helpful good luck.

[jaredcaraway]

@Gabo1122 Where on that one-page site are you using particles.js? All I see is two static images with particle-style illustrations. Maybe I'm overlooking something.

[Gabo1122]

@jaredcaraway On the main site! and then before the footer.

[jaredcaraway]

Oh, okay. I see it now. From a user experience standpoint, it's not clear that your logo in the header links to another page...why are there two sites that generally serve the same purpose? It's confusing. But I digress.

The particle effect does look cool on the "main" site.

[Gabo1122]

Thanks @jaredcaraway I was updating the old website to main one, maybe by the time you saw it wasn't fully uploaded but there is only one page now.

[dwij2812]

Thanks @Gabo1122,

I had already tried that approach as shown in #183 but that did not work for me, Later i discovered that the canvas which is created by the Particles.js script for displaying the particles was assuming its width and height as 0 for all subsequent entries except the 1st one.

In order to overcome this error, i put up all these functions in a window.onload() {} in the script tag of the HTML page and it worked magically for me on all types of devices later.

I guess the particles.js Library has some bug where they have not enabled the screen width to duplicate elements as when the first one loads the other divs may not be rendered by the HTML yet on the screen and hence it assumes width and height to be zero which doesn't show the particles on the screen and we feel that the function is not being called.

[atorognp]

@dwij2812 Can you share a snippet of your work using codepen or some other source like Github Pages if possible?

[dwij2812]

I did the following as described:

<script>
window.onload=function(){
particlesJS("main-part",particles.json);
particlesJS("second-part",particles2.json);
</script>
<!-- Once this is done i initialized the 2 divs as required in the webpage using the divs as shown-->
<div id="main-part"></div>
...
...
Some other HTML Elements will go here.
...
...
<div id="second-part"></div>

[atorognp]

@dwij2812 Tks a lot!!

[dimariabovol]

@dwij2812 thank you!!!!!!