Uncaught ReferenceError: Particles is not defined

Question

I'm trying to copy a website code from the internet and add it to my project. Here is the code from website but when I add it I get this error and the particles don't run. I have download and install particle.js from "https://github.com/marcbruederlin/particles.js/issues" this website. I dont share my CSS because i think its not important for you and Stackoverflow doesnt let me share too much codes.

/* Credit and Thanks:
Matrix - Particles.js;
SliderJS - Ettrics;
Design - Sara Mazal Web;
Fonts - Google Fonts
*/

window.onload = function () {
  Particles.init({
    selector: ".background"
  });
};
const particles = Particles.init({
  selector: ".background",
  color: ["#03dac6", "#ff0266", "#000000"],
  connectParticles: true,
  responsive: [
    {
      breakpoint: 768,
      options: {
        color: ["#faebd7", "#03dac6", "#ff0266"],
        maxParticles: 43,
        connectParticles: false
      }
    }
  ]
});

class NavigationPage {
  constructor() {
    this.currentId = null;
    this.currentTab = null;
    this.tabContainerHeight = 70;
    this.lastScroll = 0;
    let self = this;
    $(".nav-tab").click(function () {
      self.onTabClick(event, $(this));
    });
    $(window).scroll(() => {
      this.onScroll();
    });
    $(window).resize(() => {
      this.onResize();
    });
  }

  onTabClick(event, element) {
    event.preventDefault();
    let scrollTop =
      $(element.attr("href")).offset().top - this.tabContainerHeight + 1;
    $("html, body").animate({ scrollTop: scrollTop }, 600);
  }

  onScroll() {
    this.checkHeaderPosition();
    this.findCurrentTabSelector();
    this.lastScroll = $(window).scrollTop();
  }

  onResize() {
    if (this.currentId) {
      this.setSliderCss();
    }
  }

  checkHeaderPosition() {
    const headerHeight = 75;
    if ($(window).scrollTop() > headerHeight) {
      $(".nav-container").addClass("nav-container--scrolled");
    } else {
      $(".nav-container").removeClass("nav-container--scrolled");
    }
    let offset =
      $(".nav").offset().top +
      $(".nav").height() -
      this.tabContainerHeight -
      headerHeight;
    if (
      $(window).scrollTop() > this.lastScroll &&
      $(window).scrollTop() > offset
    ) {
      $(".nav-container").addClass("nav-container--move-up");
      $(".nav-container").removeClass("nav-container--top-first");
      $(".nav-container").addClass("nav-container--top-second");
    } else if (
      $(window).scrollTop() < this.lastScroll &&
      $(window).scrollTop() > offset
    ) {
      $(".nav-container").removeClass("nav-container--move-up");
      $(".nav-container").removeClass("nav-container--top-second");
      $(".nav-container-container").addClass("nav-container--top-first");
    } else {
      $(".nav-container").removeClass("nav-container--move-up");
      $(".nav-container").removeClass("nav-container--top-first");
      $(".nav-container").removeClass("nav-container--top-second");
    }
  }

  findCurrentTabSelector(element) {
    let newCurrentId;
    let newCurrentTab;
    let self = this;
    $(".nav-tab").each(function () {
      let id = $(this).attr("href");
      let offsetTop = $(id).offset().top - self.tabContainerHeight;
      let offsetBottom =
        $(id).offset().top + $(id).height() - self.tabContainerHeight;
      if (
        $(window).scrollTop() > offsetTop &&
        $(window).scrollTop() < offsetBottom
      ) {
        newCurrentId = id;
        newCurrentTab = $(this);
      }
    });
    if (this.currentId != newCurrentId || this.currentId === null) {
      this.currentId = newCurrentId;
      this.currentTab = newCurrentTab;
      this.setSliderCss();
    }
  }

  setSliderCss() {
    let width = 0;
    let left = 0;
    if (this.currentTab) {
      width = this.currentTab.css("width");
      left = this.currentTab.offset().left;
    }
    $(".nav-tab-slider").css("width", width);
    $(".nav-tab-slider").css("left", left);
  }
}

new NavigationPage();
/* Credit and Thanks:
Matrix - Particles.js;
SliderJS - Ettrics;
Design - Sara Mazal Web;
Fonts - Google Fonts
*/

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="style.js"></script>
    
    
</head>
<body>
  <sectio class="nav">
    <h1>FRONTEND TRENDS</h1>
    <h3 class="span loader"><span class="m">B</span><span class="m">E</span><span class="m">N</span><span class="m">E</span><span class="m">F</span><span class="m">I</span><span class="m">T</span><span class="m">S</span><span class="m">&nbsp;</span><span class="m">o</span><span class="m">f</span><span class="m">&nbsp;</span><span class="m">T</span><span class="m">E</span><span class="m">C</span><span class="m">H</span><span class="m">N</span><span class="m">O</span><span class="m">L</span><span class="m">O</span><span class="m">G</span><span class="m">I</span><span class="m">E</span><span class="m">S</span></h3>
    <div class="nav-container"><a class="nav-tab" href="#tab-pwa">PWA</a><a class="nav-tab" href="#tab-graphql">GraphQL</a><a class="nav-tab" href="#tab-next">NEXT</a><a class="nav-tab" href="#tab-typescript">TYPESCRIPT</a><a class="nav-tab" href="#tab-deno">DENO</a><span class="nav-tab-slider"></span></div>
</sectio>
<main class="main">
    <section class="slider" id="tab-pwa">
        <h1>PWA</h1>
        <h2>the best of both worlds...</h2>
    </section>
    <section class="slider" id="tab-graphql">
        <h1>GraphQL</h1>
        <h2>a query language for APIs</h2>
    </section>
    <section class="slider" id="tab-next">
        <h1>NEXT</h1>
        <h2>framework for Production</h2>
    </section>
    <section class="slider" id="tab-typescript">
        <h1>TYPESCRIPT</h1>
        <h2>giving you better tooling at any scale</h2>
    </section>
    <section class="slider" id="tab-deno">
        <h1>DENO</h1>
        <h2>a modern runtime</h2>
    </section>
</main>
<canvas class="background"></canvas>
<script src="node_modules\particlesjs\dist/particles.min.js"></script>
</body>
</html>

`` — That URL looks broken, and even if it isn't, you need to load the library **before** you use it, not after. — Quentin, Jun 30 '22 at 10:14
Yes thanks i understand what to do. but now it shows me this error: Uncaught TypeError: Cannot read properties of null (reading 'getContext') at n._initializeCanvas (particles.min.js:9:1242) at Object.init (particles.min.js:9:661) at style.js:13:29 — perkays, Jun 30 '22 at 10:46
That's the *same problem*. https://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method-such-as-getelementbyid-not-find-the-element - you need to include the element in the document before you try to access it, not after. — Quentin, Jun 30 '22 at 10:49
but which element does it mean ? i load particles.js before evrything load (i moved it to the top of html site ) what can i do more ? — perkays, Jun 30 '22 at 11:02
If it is at the top then it is **before** ``, isn't it? So you are trying to access `` before it exists. See the question I linked to. — Quentin, Jun 30 '22 at 11:11
ok now i understand! i have to first add canvas 2. particle.js 3. style.js. Thank you very much i solve it. — perkays, Jun 30 '22 at 11:47

perkays · Accepted Answer · 2022-07-04T09:31:20.500

0

I solved it. i had to load the library before I use it. thats mean; i have to add my javascript file right before the closing body tag, before it should i add my particle.js and before particle.js my style.js. it looks like;

solved by @Quentin. Thank you

<canvas class="background"></canvas>
<script src="node_modules/particlesjs/dist/particles.js"></script>
<script src="style.js"></script>

edited Jul 04 '22 at 09:31

answered Jun 30 '22 at 11:57

perkays

1
3

collapsar · Answer 2 · 2022-06-30T10:34:43.613

Solution

Copied code should include the libraries it depends on. Before the code that uses them (see comment on the question by @Quentin).

/* Credit and Thanks:
Matrix - Particles.js;
SliderJS - Ettrics;
Design - Sara Mazal Web;
Fonts - Google Fonts
*/

window.onload = function () {
  Particles.init({
    selector: ".background"
  });
};
const particles = Particles.init({
  selector: ".background",
  color: ["#03dac6", "#ff0266", "#000000"],
  connectParticles: true,
  responsive: [
    {
      breakpoint: 768,
      options: {
        color: ["#faebd7", "#03dac6", "#ff0266"],
        maxParticles: 43,
        connectParticles: false
      }
    }
  ]
});

class NavigationPage {
  constructor() {
    this.currentId = null;
    this.currentTab = null;
    this.tabContainerHeight = 70;
    this.lastScroll = 0;
    let self = this;
    $(".nav-tab").click(function () {
      self.onTabClick(event, $(this));
    });
    $(window).scroll(() => {
      this.onScroll();
    });
    $(window).resize(() => {
      this.onResize();
    });
  }

  onTabClick(event, element) {
    event.preventDefault();
    let scrollTop =
      $(element.attr("href")).offset().top - this.tabContainerHeight + 1;
    $("html, body").animate({ scrollTop: scrollTop }, 600);
  }

  onScroll() {
    this.checkHeaderPosition();
    this.findCurrentTabSelector();
    this.lastScroll = $(window).scrollTop();
  }

  onResize() {
    if (this.currentId) {
      this.setSliderCss();
    }
  }

  checkHeaderPosition() {
    const headerHeight = 75;
    if ($(window).scrollTop() > headerHeight) {
      $(".nav-container").addClass("nav-container--scrolled");
    } else {
      $(".nav-container").removeClass("nav-container--scrolled");
    }
    let offset =
      $(".nav").offset().top +
      $(".nav").height() -
      this.tabContainerHeight -
      headerHeight;
    if (
      $(window).scrollTop() > this.lastScroll &&
      $(window).scrollTop() > offset
    ) {
      $(".nav-container").addClass("nav-container--move-up");
      $(".nav-container").removeClass("nav-container--top-first");
      $(".nav-container").addClass("nav-container--top-second");
    } else if (
      $(window).scrollTop() < this.lastScroll &&
      $(window).scrollTop() > offset
    ) {
      $(".nav-container").removeClass("nav-container--move-up");
      $(".nav-container").removeClass("nav-container--top-second");
      $(".nav-container-container").addClass("nav-container--top-first");
    } else {
      $(".nav-container").removeClass("nav-container--move-up");
      $(".nav-container").removeClass("nav-container--top-first");
      $(".nav-container").removeClass("nav-container--top-second");
    }
  }

  findCurrentTabSelector(element) {
    let newCurrentId;
    let newCurrentTab;
    let self = this;
    $(".nav-tab").each(function () {
      let id = $(this).attr("href");
      let offsetTop = $(id).offset().top - self.tabContainerHeight;
      let offsetBottom =
        $(id).offset().top + $(id).height() - self.tabContainerHeight;
      if (
        $(window).scrollTop() > offsetTop &&
        $(window).scrollTop() < offsetBottom
      ) {
        newCurrentId = id;
        newCurrentTab = $(this);
      }
    });
    if (this.currentId != newCurrentId || this.currentId === null) {
      this.currentId = newCurrentId;
      this.currentTab = newCurrentTab;
      this.setSliderCss();
    }
  }

  setSliderCss() {
    let width = 0;
    let left = 0;
    if (this.currentTab) {
      width = this.currentTab.css("width");
      left = this.currentTab.offset().left;
    }
    $(".nav-tab-slider").css("width", width);
    $(".nav-tab-slider").css("left", left);
  }
}

new NavigationPage();
/* Credit and Thanks:
Matrix - Particles.js;
SliderJS - Ettrics;
Design - Sara Mazal Web;
Fonts - Google Fonts
*/

<script src="https://cdnjs.cloudflare.com/ajax/libs/particlesjs/2.2.3/particles.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="style.js"></script>
    
    
</head>
<body>
  <sectio class="nav">
    <h1>FRONTEND TRENDS</h1>
    <h3 class="span loader"><span class="m">B</span><span class="m">E</span><span class="m">N</span><span class="m">E</span><span class="m">F</span><span class="m">I</span><span class="m">T</span><span class="m">S</span><span class="m">&nbsp;</span><span class="m">o</span><span class="m">f</span><span class="m">&nbsp;</span><span class="m">T</span><span class="m">E</span><span class="m">C</span><span class="m">H</span><span class="m">N</span><span class="m">O</span><span class="m">L</span><span class="m">O</span><span class="m">G</span><span class="m">I</span><span class="m">E</span><span class="m">S</span></h3>
    <div class="nav-container"><a class="nav-tab" href="#tab-pwa">PWA</a><a class="nav-tab" href="#tab-graphql">GraphQL</a><a class="nav-tab" href="#tab-next">NEXT</a><a class="nav-tab" href="#tab-typescript">TYPESCRIPT</a><a class="nav-tab" href="#tab-deno">DENO</a><span class="nav-tab-slider"></span></div>
</sectio>
<main class="main">
    <section class="slider" id="tab-pwa">
        <h1>PWA</h1>
        <h2>the best of both worlds...</h2>
    </section>
    <section class="slider" id="tab-graphql">
        <h1>GraphQL</h1>
        <h2>a query language for APIs</h2>
    </section>
    <section class="slider" id="tab-next">
        <h1>NEXT</h1>
        <h2>framework for Production</h2>
    </section>
    <section class="slider" id="tab-typescript">
        <h1>TYPESCRIPT</h1>
        <h2>giving you better tooling at any scale</h2>
    </section>
    <section class="slider" id="tab-deno">
        <h1>DENO</h1>
        <h2>a modern runtime</h2>
    </section>
</main>
<canvas class="background"></canvas>
<!-- not needed as too late for the code, most likely won't work anyway due to the mix of  backslashes and forward slashes -->
<!-- script src="node_modules\particlesjs\dist/particles.min.js"></script-->
</body>
</html>

if i put it at top of the website it doesnt work i have to add canvas because it is my element after canvas particle.js and last style.js. but thank you for your answer — perkays, Jun 30 '22 at 11:49
It runs fine in the current version of Chrome (102) and Firefox (102). Include all third party libraries at the top of your code, ie. _before_ your code. specifically: `...`. Use the debugger to identify the issue. If you wish this site contributors to help you, share more info (best of all the code that throws the error). — collapsar, Jun 30 '22 at 11:52
I do not get your latest comment. All scripts can be packed into the `head` section of the main html file of your site, in the order requird to resolve dependencies. If some code of yours requires the DOM to be present (ie. that the browser has interpreted the html and has built the data structures that support the rendering), execute this code in a `DOMContentLoaded` event listener. — collapsar, Jun 30 '22 at 11:55
Ye i think its a better idee i will do it Thanks for your answer — perkays, Jun 30 '22 at 12:21

Uncaught ReferenceError: Particles is not defined

2 Answers2