The particles from particles.js plugin fail to appear on Chrome browser

While experimenting with particles.js, I noticed that it runs smoothly on the Safari browser (I'm using a MacBook), but it encounters an error on Chrome and the particles fail to display.

Error pJS - XMLHttpRequest status: 404
particles.js:1558 Error pJS - File config not found
particles.js:1557 Error pJS - XMLHttpRequest status: 404
particles.js:1558 Error pJS - File config not found

Index.html

<div id="particles-js"></div>
<script type = "text/javascript" src="particles.js"></script>
<script type = "text/javascript" src="app.js"></script>

Styles.css

  #particles-js {
    position: absolute;
    z-index: -10;
    width: 100%;
    height: 100%;
    top: 0;
    background: #000000;
  }

In a separate file named app.js, I have all the settings for the particles.

javascripthtmlcssparticles.js

Answer №1

The issue arises because particle.js is unable to load two json files simultaneously.

/particlesjs-config.json and /assets/particles.json

To diagnose the problem, inspect your Safari console for error messages. It is likely that there are errors present. Additionally, refer to the particle.js documentation to ensure proper setup.

This section of particle.js is where the request encounters difficulties:

window.particlesJS.load = function (tag_id, path_config_json, callback) {
    /* load json config */
    var xhr = new XMLHttpRequest();
    xhr.open("GET", path_config_json);
    xhr.onreadystatechange = function (data) {
      if (xhr.readyState == 4) {
        if (xhr.status == 200) {
          var params = JSON.parse(data.currentTarget.response);
          window.particlesJS(tag_id, params);
          if (callback) callback();
        } else {
          console.log("Error pJS - XMLHttpRequest status: " + xhr.status);
          console.log("Error pJS - File config not found");
        }
      }
    };
    xhr.send();

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How can you leverage the power of useState in a custom React hook?

Here is a code snippet for a custom hook I created: const useShowBg = () => { const [showBg, useShowBg] = useState(false); return [showBg, useShowBg]; }; export default useShowBg; In my component, I import and use the custom hook like this: im ...

javascriptreactjs

What is the process for storing a list group in an SQL database?

Having a code snippet in html which populates a list with data selected from a combo box upon clicking the 'add' button. However, running into an issue where "undefined index: subjectlist" error occurs when submitting the form. Seeking advice on ...

javascriptphphtmllist

A guide on scheduling automatic data insertion in mongoose.js

I'm working on a website with Node.js and Mongoose, and I could use some guidance on how to automatically insert data into Mongoose with Node.js at specific times. For example, at the end of each month, I want my current data to be stored in the Mongo ...

javascriptnode.jsmongoose

Tips for switching out images depending on the time of day

Currently, I have a script that dynamically changes the background color of my webpage based on the time of day. However, I am facing issues trying to implement a similar functionality for replacing an image source. The current code is also time zone-based ...

javascriptjqueryhtmlcss

How can we enable Material UI tooltip based on certain conditions?

In my React component utilizing Material UI, I have the code snippet below: const MyButton = ({ warningText }) => ( <Tooltip title={warningText}> <Button>Do action</Button> </Tooltip> ) At present, an empty tool ...

javascriptreactjstooltipmaterial-ui

UTF-8 characters not displaying correctly in Python 3 when received through WebSocket?

I am encountering an issue with sending a JavaScript unicode star character. When interpreted by Python, the unicode characters are being displayed as the letter â, both in the console and log file. Furthermore, other unicode characters also seem to be ...

javascriptpythonwindowsutf-8websocket

Having trouble getting my absolute div to center?

Check out this problem on my server at THIS LINK .login-div{ background: #fff none repeat scroll 0 0; height: 500px; left: 50%; width: 500px; right: 0; z-index: 99999; top: 20%; position: ...

htmlcss

There was an issue with the SidebarController function being undefined, as it was expected to be a function

I'm encountering two issues with my demo: Error: [ng:areq] Argument 'SidebarController' is not a function, received undefined http://errors.angularjs.org/1.2.26/ng/areq?p0=SidebarController&p1=not%20aNaNunction%2C%20got%20undefined ...

phpjqueryhtmlcssangularjs

How can I use XPATH and Python Selenium to select the text node that is outside of an <a> element?

Check out the following link: Within this section of code: //*[@id="main-contents"]/div[1]/table[1]/tbody/tr/td, there is a piece of text Mottled Boar slain (10) //*[@id="main-contents"]/div[1]/table[1]/tbody/tr/td/a This part contains only: Mo ...

pythonhtmlpython-3.xseleniumxpath

"Submitting an HTML form and displaying the response without redirecting to a

I created a basic portlet for Liferay that includes a form for inputting parameters to send to an external webservice. However, when I submit the form, I am redirected to the URL of the webservice. Is there a method to prevent this redirection and instead ...

htmlhttppostliferayportlet

What is the best way to show an array object from PHP to AJAX in JavaScript?

I am facing an issue with a function that returns an array object from PHP using MySQL. I need to call this array in an AJAX function using JavaScript, but I am unsure of how to display the PHP array object in a dynamic table or console log. Here is my PH ...

javascriptphpjqueryajaxfunction

What is the reason for the absence of the $.ajax function in the jQuery package designed for node.js?

Here is my code sample, which I would like to use for practicing with jQuery's ajax function. Note that I have already installed the jQuery package using npm install jquery: var $ = require('jquery'); var remoteValue = false; var doSometh ...

javascriptjqueryajaxnode.js

Is there a way to determine if a browser's Storage object is localStorage or sessionStorage in order to effectively handle static and dynamic secret keys within a client?

I have developed a customizable storage service where an example is getExpirableStorage(getSecureStorage(getLocalStorage() | getSessionStorage())) in typescript/javascript. When implementing getSecureStorage, I used a static cipher key to encrypt every ke ...

javascriptangulartypescriptlocal-storagesession-storage

Diving deep into the reasons behind a test's failure

Currently, I am using Postman to test the API that I am developing with express. In this process, I am creating a series of tests. Below is a brief example: tests["Status code is 200"] = responseCode.code === 200; // Verifying the expected board var expe ...

javascriptpostman

What is the internal mechanism behind the operation of JavaScript function parameters?

As someone who is new to programming, I've been struggling to understand how parameters and arguments work behind the scenes. For example: function changeStuff(a) { return a = a * 10; } var num = 10; console.log(changeStuff(num)); / ...

javascript

Is there a way to show textboxes stacked on top of each other without causing them to

Here is the HTML snippet I am working with: <div> <p><label>Faculty <input type="text" class = "f"></label></p> <p><label >Department<input type="text" class = "f"></label></p> ...

htmlcss

How to Align Navigation Bar Items to the Right in Bootstrap 4

I need some help with bootstrap. I've looked at various discussions on this topic and tried numerous solutions, but I still can't get it right. I want the logo to be on the left and the navigation links aligned to the right. Here's what I&ap ...

htmlcssbootstrap-4navbar

Lost item phenomenon: conceal information below until it emerges

I'm attempting to create a garage door effect on my website, where upon loading the page, a garage door is displayed. Upon hovering over the door, it lifts up to reveal the content behind it. The challenge I'm facing is keeping the content hidden ...

javascriptjqueryhtmlcss

Is there a more efficient approach to extracting the border width using javascript?

I implemented the following code: const playGard = document.getElementsByClassName("playGard")[0]; const borderW = getComputedStyle(playGard,null).getPropertyValue('border-left-width').substr(0,2); The result I obtained was "10". Is there a m ...

javascriptcssgetcomputedstyle

The world of coding comes alive with Quartz Composer JavaScript

Seeking assistance as I navigate through a challenging project. Any help would be greatly appreciated. Thanks in advance! I have a Quartz Composition where I aim to incorporate a Streetview from Google Maps and control the navigation, but I'm unsure ...

javascriptgoogle-maps-api-3quartz-composer