Search…

X3 Photo Gallery Support Forums

Search…
 
BigBobbyD
Experienced
Topic Author
Posts: 29
Joined: 04 Sep 2021, 04:41

Help with JS and execution

15 Jan 2023, 16:00

Greetings,

Yeah, I need some more assistance.  I am trying to update from particles.js to tsparticles.js to prevent memory leakage (known issue) on my site.  I have inserted the correct code and it does run, however only when I manually refresh the pages.

For some reason, the links will work when called directly from here, but not internally from X3 using the navigation buttons.

https://dalton.li/contact/
or
https://dalton.li/legal/
I hope you can get me fixed up so that this will run correctly.

what i have  done is place a custom Javascript under "Custom" and a container ID on each page, along with the script to the .js file in the Custom head location.

Thank you in advance,

Sincerely,

Rob
 
User avatar
mjau-mjau
X3 Wizard
Posts: 13675
Joined: 30 Sep 2006, 03:37

Re: Help with JS and execution

15 Jan 2023, 23:01

Ok, so you want to trigger this on ALL pages? Doesn't seem useful on the front page. Anyway, the problem is that X3 is technically a SPA (single-page application), and the Javascript you add to custom will only trigger once (on the first page loaded into browser).

To trigger the javascript on all pages, also after navigating from the X3 menu, you would need to put all the Javascript inside x3_load_page() function:
Code
function x3_load_page(){
  console.log('Runs after each X3 ajax page load');
  // Add your particles code here. It will trigger on each page load from navigation.
}
 
BigBobbyD
Experienced
Topic Author
Posts: 29
Joined: 04 Sep 2021, 04:41

Re: Help with JS and execution

16 Jan 2023, 03:47

Thanks for the quick response,
I agree that I dont want to run the js globally and would prefer just to choose a few pages to have this as a background.  I have tried the code just on my contact page and still have the same error.  If I navigate to the page from the front page then the script fails to load.  Only if I click on the browser refresh does it work.  Same too is true when I navigate from the contact page and go back.
under "page Javascriip"

function x3_load_page(){
  console.log('Runs after each X3 ajax page load');
  // Add your particles code here. It will trigger on each page load from navigation.
}
  tsParticles.load("tsparticles", {
      "particles": {

under the content section 

<!-- tsParticles container -->

<div id="tsParticles"></div>

scratching my head?? :joy:
 
User avatar
mjau-mjau
X3 Wizard
Posts: 13675
Joined: 30 Sep 2006, 03:37

Re: Help with JS and execution

16 Jan 2023, 04:06

BigBobbyD wrote: I have tried the code just on my contact page and still have the same error.
In my example, the point was for you to move your code INSIDE the function.
Code
function x3_load_page(){
  // ADD YOUR PARTICLES CODE HERE!
}
BigBobbyD wrote:and would prefer just to choose a few pages to have this as a background.
Then do this:
Code
function x3_load_page(){
  // will only trigger if <div id="tsParticles"></div> exists on page:
  if(!document.getElementById('tsParticles')) return;
  // ADD YOUR PARTICLES CODE HERE!
}
You still need to add your particles code below the comment. I don't want to add it into the example here, because you haven't even posted it, and I don't want to format it for this forum post.
 
BigBobbyD
Experienced
Topic Author
Posts: 29
Joined: 04 Sep 2021, 04:41

Re: Help with JS and execution

16 Jan 2023, 06:54

Okay, this is working now,

Thanks for your help.  The problems I was having related to doing an update from the old particles.js, which was still stuck in the cache from X3.  After clearing the Cache and preloads all is fine.

Thanks so much :grinning: :smiley: