Reusability... (with Ajax/XHTTP calls etc)

[imathome]

Vincent - firstly excellent library and work. Very impressed.

To cope with reloading pages (Ajax etc), I would modify your code in the following manner to be a little more robust. Your decision.

` window.particlesJS = function(tag_id, params){

//console.log(params);

/ no string id? so it's object params, and set the id with default id / if(typeof(tag_id) != 'string'){ params = tag_id; tag_id = 'particles-js'; }

/ no id? set the id to default id / if(!tag_id){ tag_id = 'particles-js'; }

/ pJS elements / var pJS_tag = document.getElementById(tag_id), pJS_canvas_class = 'particles-js-canvas-el', exist_canvas = (pJS_tag?pJS_tag.getElementsByClassName(pJS_canvas_class):null);

/ remove canvas if exists into the pJS target tag / if(exist_canvas && exist_canvas.length){ while(exist_canvas.length > 0){ pJS_tag.removeChild(exist_canvas[0]); } }

/ create canvas element / var canvas_el = document.createElement('canvas'); canvas_el.className = pJS_canvas_class;

/ set size canvas / canvas_el.style.width = "100%"; canvas_el.style.height = "100%";

/ append canvas / var canvas = pJS_tag ? pJS_tag.appendChild(canvas_el) : null;

/ launch particle.js / if(canvas != null){ pJSDom.push(new pJS(tag_id, params)); }

};

`

[Moh-Mokh]

Hello There, I want to ask about something as I am facing this huge issue adding this amazing script in my website which is built with Ajax and while trying to troubleshoot the problem, either the page that has the particles script is working the first time it loads and the other pages don't load properly.. if not at all. or Scenario 2: the page with the script aren't loading properly and the other pages load fine.

Can you please help me in that matter as I'm running out of options and it's sad..

I also would like to note that trying your code made the script load perfectly every time even when loading the page through ajax but the other pages dont load or load improperly. Thank you.

[imathome]

Using document.ready should solve one issue but this won’t immediately solve the problem you are experiencing. Generally speaking in the onload event, you need to iterate through all instances (using a selector) which then triggers the code to run correctly.

$(document).ready(function() { $(“.particle”).each(function() { // do code here }); });

Place this at the end of the document or in a sea parade file. If inline apply the script headers etc. Note that the selector looks for nodes with the class “particle”.

Hope that helps